wip

resources/views/components/dashboard/videos/filters/sorters.blade.php

@@ -1,3 +1,34 @@
-<div>
-    bla
+@props([
+    'action',
+])
+
+<div x-data="{ open: true }" class="flex items-center">
+    <x-wireuse::actions-button
+        :$action
+        x-on:click="open = ! open"
+        class="flex-row-reverse py-1.5 px-3 gap-1 rounded font-medium text-xs bg-secondary-700 text-secondary-200"
+    />
+
+    @teleport('body')
+        <div
+            x-cloak
+            x-show="open"
+            x-on:click.outside="open = false"
+            x-on:keyup.escape.window="open = false"
+            x-trap.inert.noscroll="open"
+            class="absolute z-30 bottom-0 inset-x-1/4 m-3"
+        >
+            <div class="relative px-3 py-4 rounded-xl flex w-full max-w-[25rem] mx-auto bg-secondary-500">
+                <div class="prose prose-headings:font-semibold prose-h1:text-sm prose-h1:text-base">
+                    <h1>{{ __('Sort by' )}}</h1>
+
+                    {{-- {{ $sort }} --}}
+
+                    {{-- {{ $action->foo }} --}}
+
+                    {{-- <button wire:click="$parent.set('form.sort', 'bla')">Remove</button> --}}
+                </div>
+            </div>
+        </div>
+    @endteleport
 </div>

resources/views/livewire/dashboard/content/videos.blade.php

@@ -1,6 +1,6 @@
 <x-wireuse::layout-container class="p-3" fluid>
     <x-dashboard.videos.filters>
-        <x-dashboard.videos.filters.sorters />
+        <x-dashboard.videos.filters.sorters :action="$filters->first('sort')" />
     </x-dashboard.videos.filters>
 
 </x-wireuse::layout-container>

src/App/Livewire/Dashboard/Content/Videos.php

@@ -3,6 +3,8 @@
 namespace App\Livewire\Dashboard\Content;
 
 use App\Livewire\Dashboard\Videos\Forms\QueryForm;
+use Foxws\WireUse\Actions\Support\Action;
+use Foxws\WireUse\Actions\Support\ActionGroup;
 use Illuminate\View\View;
 use Livewire\Component;
 
@@ -13,12 +15,24 @@ class Videos extends Component
     public function render(): View
     {
         return view('livewire.dashboard.content.videos')->with([
-            // 'filters' => $this->filters(),
+            'filters' => $this->filters(),
         ]);
     }
 
     public function updated(): void
     {
         $this->validate();
     }
+
+    protected function filters(): ActionGroup
+    {
+        return ActionGroup::make()
+            ->add('sort', fn (Action $item) => $item
+                ->label(__('Sort by'))
+                ->icon('heroicon-s-chevron-down')
+                ->bladeAttributes([
+                    'class:icon' => 'size-3',
+                ])
+            );
+    }
 }