From f9378b2044f315e726f088d2d832a7b32deb30ea Mon Sep 17 00:00:00 2001
From: "waffle.lord" <waffle.lord@hotmail.com>
Date: Fri, 22 Nov 2024 14:28:13 -0500
Subject: [PATCH] setup and style dropdown options

---
 app/Livewire/Mod/ModerationOptions.php        | 11 +++++
 resources/views/components/mod-card.blade.php |  8 ++--
 .../livewire/mod/moderation-options.blade.php | 48 +++++++++++++++----
 3 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/app/Livewire/Mod/ModerationOptions.php b/app/Livewire/Mod/ModerationOptions.php
index 457e9a0..8784216 100644
--- a/app/Livewire/Mod/ModerationOptions.php
+++ b/app/Livewire/Mod/ModerationOptions.php
@@ -2,6 +2,7 @@
 
 namespace App\Livewire\Mod;
 
+use Illuminate\Support\Facades\Log;
 use Livewire\Component;
 
 class ModerationOptions extends Component
@@ -10,4 +11,14 @@ class ModerationOptions extends Component
     {
         return view('livewire.mod.moderation-options');
     }
+
+    public function deleteMod(): void
+    {
+        Log::info('delete');
+    }
+
+    public function disableMod(): void
+    {
+        Log::info('disable');
+    }
 }
diff --git a/resources/views/components/mod-card.blade.php b/resources/views/components/mod-card.blade.php
index 013ba82..e88e162 100644
--- a/resources/views/components/mod-card.blade.php
+++ b/resources/views/components/mod-card.blade.php
@@ -6,10 +6,12 @@
     @endif
     <div class="flex flex-col group h-full w-full bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl overflow-hidden hover:shadow-lg hover:bg-gray-50 dark:hover:bg-black hover:shadow-gray-400 dark:hover:shadow-black transition-colors ease-out duration-700">
         <div class="h-auto md:h-full md:flex">
+            @if (auth()->check() && auth()->user()->isAdmin())
+            <div class="absolute right-0 z-50 m-2">
+                <livewire:mod.moderation-options />
+            </div>
+            @endif
             <div class="relative h-auto md:h-full md:shrink-0 overflow-hidden">
-                <div class="absolute right-0 z-50 text-blue-400 dark:text-blue-500 m-2">
-                    <livewire:mod.moderation-options />
-                </div>
                 @if ($mod->thumbnail)
                     <img src="{{ $mod->thumbnailUrl }}" alt="{{ $mod->name }}" class="h-48 w-full object-cover md:h-full md:w-48 transform group-hover:scale-110 transition-all duration-200">
                 @else
diff --git a/resources/views/livewire/mod/moderation-options.blade.php b/resources/views/livewire/mod/moderation-options.blade.php
index 8f981f9..fbf6d03 100644
--- a/resources/views/livewire/mod/moderation-options.blade.php
+++ b/resources/views/livewire/mod/moderation-options.blade.php
@@ -1,11 +1,43 @@
 <div>
-    {{-- Icon (shield with keyhole) --}}
-    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M3 5.75V11c0 5.001 2.958 8.676 8.725 10.948a.75.75 0 0 0 .55 0C18.042 19.676 21 16 21 11V5.75a.75.75 0 0 0-.75-.75c-2.663 0-5.258-.943-7.8-2.85a.75.75 0 0 0-.9 0C9.008 4.057 6.413 5 3.75 5a.75.75 0 0 0-.75.75ZM13.995 11a2 2 0 0 1-1.245 1.852v2.398a.75.75 0 0 1-1.5 0v-2.394A2 2 0 1 1 13.995 11Z"/>
-    </svg>
+    <x-dropdown alignment="right" contentClasses="py-1 rounded-full bg-gray-200 dark:bg-gray-800">
+        <x-slot name="trigger">
+            {{-- wire:click.prevent here to stop from following mod card links --}}
+            <button class="relative text-blue-400 dark:text-blue-500 hover:text-blue-600 dark:hover:text-blue-700" wire:click.prevent="">
+                {{-- Icon (shield with keyhole) --}}
+                <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M3 5.75V11c0 5.001 2.958 8.676 8.725 10.948a.75.75 0 0 0 .55 0C18.042 19.676 21 16 21 11V5.75a.75.75 0 0 0-.75-.75c-2.663 0-5.258-.943-7.8-2.85a.75.75 0 0 0-.9 0C9.008 4.057 6.413 5 3.75 5a.75.75 0 0 0-.75.75ZM13.995 11a2 2 0 0 1-1.245 1.852v2.398a.75.75 0 0 1-1.5 0v-2.394A2 2 0 1 1 13.995 11Z"/>
+                </svg>
+            </button>
+        </x-slot>
 
-    {{-- Another good option for an icon if the shield is too much (option dials)--}}
-{{--    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">--}}
-{{--        <path d="M8.75 13.5a3.251 3.251 0 0 1 3.163 2.5h9.337a.75.75 0 0 1 .102 1.493l-.102.007h-9.337a3.251 3.251 0 0 1-6.326 0H2.75a.75.75 0 0 1-.102-1.493L2.75 16h2.837a3.251 3.251 0 0 1 3.163-2.5Zm6.5-9.5a3.251 3.251 0 0 1 3.163 2.5h2.837a.75.75 0 0 1 .102 1.493L21.25 8h-2.837a3.251 3.251 0 0 1-6.326 0H2.75a.75.75 0 0 1-.102-1.493L2.75 6.5h9.337A3.251 3.251 0 0 1 15.25 4Z"/>--}}
-{{--    </svg>--}}
+        <x-slot name="content">
+            <div>
+                <button wire:click.prevent="disableMod" wire:confirm="Disable the mod?" class="p-2 h-full w-full text-blue-500 dark:text-blue-500 bg-gray-200 dark:bg-gray-800 hover:text-blue-400 dark:hover:text-blue-400">
+                    <div class="flex">
+                        <span class="pr-2">
+                            {{-- Icon (circle with dash) --}}
+                            <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M12 2.001c5.524 0 10 4.477 10 10s-4.476 10-10 10c-5.522 0-10-4.477-10-10s4.478-10 10-10Zm4.25 9.25h-8.5a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5Z" />
+                            </svg>
+                        </span>
+                        {{ __('Disable') }}
+                    </div>
+                </button>
+            </div>
+            <div>
+                <button wire:click.prevent="deleteMod" wire:confirm="Delete the mod?" class="p-2 h-full w-full text-red-500 dark:text-red-500 bg-gray-200 dark:bg-gray-800 hover:text-red-400 dark:hover:text-red-400">
+                    <div class="flex">
+                        <span class="pr-2">
+                            {{-- Icon (trash can) --}}
+                            <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M21.5 6a1 1 0 0 1-.883.993L20.5 7h-.845l-1.231 12.52A2.75 2.75 0 0 1 15.687 22H8.313a2.75 2.75 0 0 1-2.737-2.48L4.345 7H3.5a1 1 0 0 1 0-2h5a3.5 3.5 0 1 1 7 0h5a1 1 0 0 1 1 1Zm-7.25 3.25a.75.75 0 0 0-.743.648L13.5 10v7l.007.102a.75.75 0 0 0 1.486 0L15 17v-7l-.007-.102a.75.75 0 0 0-.743-.648Zm-4.5 0a.75.75 0 0 0-.743.648L9 10v7l.007.102a.75.75 0 0 0 1.486 0L10.5 17v-7l-.007-.102a.75.75 0 0 0-.743-.648ZM12 3.5A1.5 1.5 0 0 0 10.5 5h3A1.5 1.5 0 0 0 12 3.5Z" />
+                            </svg>
+                        </span>
+                        {{  __('Delete')  }}
+                    </div>
+                </button>
+            </div>
+        </x-slot>
+
+    </x-dropdown>
 </div>