feat: tags

ui: improvements

resources/views/livewire/project/shared/tags.blade.php

@@ -1,13 +1,32 @@
 <div>
     <h2>Tags</h2>
-    @foreach ($this->resource->tags as $tag)
-        <div>
-            <div>{{ $tag->name }}</div>
-            <x-forms.button isError wire:click="deleteTag('{{ $tag->id }}','{{ $tag->name }}')">Delete</x-forms.button>
+    <div class="flex gap-2 pt-4">
+        @forelse ($this->resource->tags as $tagId => $tag)
+            <div class="px-2 py-1 text-center text-white select-none w-fit bg-coolgray-100 hover:bg-coolgray-200">
+                {{ $tag->name }}
+                <svg wire:click="deleteTag('{{ $tag->id }}','{{ $tag->name }}')"
+                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                    class="inline-block w-3 h-3 rounded cursor-pointer stroke-current hover:bg-red-500">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+            </div>
+        @empty
+            <div>No tags yet</div>
+        @endforelse
+    </div>
+    <form wire:submit='submit' class="flex items-end gap-2 pt-4">
+        <div class="w-64">
+            <x-forms.input label="Create new or assign existing tags"
+                helper="You add more at once with space seperated list: web api something<br><br>If the tag does not exists, it will be created." wire:model="new_tag" />
         </div>
-    @endforeach
-    <form wire:submit='submit'>
-        <x-forms.input label="Add/Assign a tag" wire:model="new_tag"  wire:confirm="Are you sure you want to delete this post?" />
         <x-forms.button type="submit">Add</x-forms.button>
     </form>
+    <h3 class="pt-4">Already defined tags</h3>
+    <div>Click to quickly add</div>
+    <div class="flex gap-2 pt-4">
+        @foreach ($tags as $tag)
+            <x-forms.button wire:click="addTag('{{ $tag->id }}','{{ $tag->name }}')">
+                {{ $tag->name }}</x-forms.button>
+        @endforeach
+    </div>
 </div>