Use Tabs component in event list with disabled state support

- Add gray color palette to theme.css
- Add disabled attribute support to Tabs component
- Refactor event list filter tabs to use the Tabs component

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/css/theme.css

@@ -1,5 +1,18 @@
 
 @theme {
+  /* Gray Colors (Tailwind default) */
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+
   /* Primary Colors - Claper Purple */
   --color-primary-50: #f3defa;
   --color-primary-100: #e8bef5;

lib/claper_web/live/event_live/index.html.heex

@@ -65,31 +65,17 @@
     <div class="pt-6 pb-6">
       <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
         <!-- Left: Filter Tabs -->
-        <div class="bg-gray-100 rounded-full p-0.5 flex items-center">
-          <button
-            phx-click="change-tab"
-            phx-value-tab="not_expired"
-            class={"px-4 py-2.5 rounded-full text-sm font-bold transition #{if @active_tab == "not_expired", do: "bg-primary-500 text-white", else: "text-gray-500 hover:text-gray-700"}"}
-          >
+        <.tabs style={:boxed}>
+          <:tab active={@active_tab == "not_expired"} phx-click="change-tab" phx-value-tab="not_expired">
             {gettext("Active")}
-          </button>
-          <button
-            phx-click="change-tab"
-            phx-value-tab="expired"
-            disabled={not @has_expired_events}
-            class={"px-4 py-2.5 rounded-full text-sm transition #{if @active_tab == "expired", do: "bg-primary-500 text-white font-bold", else: "text-gray-500 hover:text-gray-700"} #{if not @has_expired_events, do: "opacity-50 cursor-not-allowed"}"}
-          >
+          </:tab>
+          <:tab active={@active_tab == "expired"} disabled={not @has_expired_events} phx-click="change-tab" phx-value-tab="expired">
             {gettext("Done")}
-          </button>
-          <button
-            phx-click="change-tab"
-            phx-value-tab="invited"
-            disabled={not @has_invited_events}
-            class={"px-4 py-2.5 rounded-full text-sm transition #{if @active_tab == "invited", do: "bg-primary-500 text-white font-bold", else: "text-gray-500 hover:text-gray-700"} #{if not @has_invited_events, do: "opacity-50 cursor-not-allowed"}"}
-          >
+          </:tab>
+          <:tab active={@active_tab == "invited"} disabled={not @has_invited_events} phx-click="change-tab" phx-value-tab="invited">
             {gettext("Shared with you")}
-          </button>
-        </div>
+          </:tab>
+        </.tabs>
 
         <!-- Right: View Toggle & Action Buttons -->
         <div class="flex items-center gap-2 flex-wrap">

lib/claper_web/views/components/tabs_component.ex

@@ -42,7 +42,11 @@ defmodule ClaperWeb.Component.Tabs do
 
   slot :tab, required: true do
     attr :active, :boolean
+    attr :disabled, :boolean
     attr :class, :string
+    attr :"phx-click", :string
+    attr :"phx-target", :string
+    attr :"phx-value-tab", :string
   end
 
   def tabs(assigns) do
@@ -60,10 +64,12 @@ defmodule ClaperWeb.Component.Tabs do
           role="tab"
           class={[
             tab_base_classes(@style),
-            tab_state_classes(@style, tab[:active] || false)
+            tab_state_classes(@style, tab[:active] || false),
+            disabled_classes(tab[:disabled] || false)
           ]}
           aria-selected={tab[:active] || false}
-          {assigns_to_attributes(tab, [:active, :class, :inner_block])}
+          disabled={tab[:disabled] || false}
+          {assigns_to_attributes(tab, [:active, :disabled, :class, :inner_block])}
         >
           {render_slot(tab)}
         </button>
@@ -82,6 +88,7 @@ defmodule ClaperWeb.Component.Tabs do
   """
   attr :style, :atom, default: :bordered, values: [:bordered, :lifted, :boxed]
   attr :active, :boolean, default: false
+  attr :disabled, :boolean, default: false
   attr :class, :string, default: nil
   attr :rest, :global, include: ~w(phx-click phx-target phx-value-tab)
 
@@ -94,9 +101,11 @@ defmodule ClaperWeb.Component.Tabs do
       class={[
         tab_base_classes(@style),
         tab_state_classes(@style, @active),
+        disabled_classes(@disabled),
         @class
       ]}
       aria-selected={@active}
+      disabled={@disabled}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -154,4 +163,8 @@ defmodule ClaperWeb.Component.Tabs do
   defp tab_state_classes(:boxed, false) do
     "text-gray-500 hover:text-gray-700 bg-transparent"
   end
+
+  # Disabled classes
+  defp disabled_classes(true), do: "opacity-50 cursor-not-allowed"
+  defp disabled_classes(false), do: "cursor-pointer"
 end