From 663571b1257d80ef597923a984f64dd3f2341d10 Mon Sep 17 00:00:00 2001
From: = <inman.turbo@gmail.com>
Date: Thu, 27 Jun 2024 14:50:26 -0400
Subject: [PATCH] work in progress

---
 resources/views/blade-icons/index.blade.php   |  6 +--
 resources/views/blade-icons/show.blade.php    | 45 ++++++++++++++-----
 resources/views/components/layout.blade.php   |  8 ++--
 .../views/livewire/icon-search.blade.php      | 22 ++++-----
 4 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/resources/views/blade-icons/index.blade.php b/resources/views/blade-icons/index.blade.php
index 6677e5f..5f7aed9 100644
--- a/resources/views/blade-icons/index.blade.php
+++ b/resources/views/blade-icons/index.blade.php
@@ -1,6 +1,6 @@
 <x-buku-icons::layout title="Blade Icons">
     <div>
-        <div class="mt-16 max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="px-4 mx-auto mt-16 max-w-screen-2xl sm:px-6 lg:px-8">
             <div class="max-w-4xl mx-auto text-center">
                 <x-buku-icons::h3>
                     Search for an icon
@@ -11,9 +11,9 @@
             </div>
         </div>
 
-        <div id="search" class="relative flex items-center justify-between max-w-screen-2xl px-4 mt-6 p-8 sm:mt-0 mx-auto sm:px-6">
+        <div id="search" class="relative flex items-center justify-between p-8 px-4 mx-auto mt-6 max-w-screen-2xl sm:mt-0 sm:px-6">
             <livewire:buku-icons::icon-search/>
         </div>
     </div>
-    <x-buku-icons::footer/>
+    {{-- <x-buku-icons::footer/> --}}
 </x-buku-icons::layout>
diff --git a/resources/views/blade-icons/show.blade.php b/resources/views/blade-icons/show.blade.php
index 6b311b4..e706622 100644
--- a/resources/views/blade-icons/show.blade.php
+++ b/resources/views/blade-icons/show.blade.php
@@ -1,6 +1,6 @@
 <x-buku-icons::layout :title="$icon->name">
 
-    <div id="icon-detail" class="mt-6 relative max-w-screen-xl px-4 mx-auto sm:px-6">
+    <div id="icon-detail" class="relative max-w-screen-xl px-4 mx-auto mt-6 sm:px-6">
         <x-buku-icons::h3>
             <x-buku-icons::a :href="$icon->set->repository">
                 {{ $icon->set->name }}
@@ -9,39 +9,60 @@
             <br class="sm:hidden"> / {{ $icon->name }}
         </x-buku-icons::h3>
 
-        <div class="mt-6 sm:grid sm:grid-cols-5 sm:gap-10 w-full">
-            <div class="sm:col-span-3 flex items-center justify-center w-full py-12 bg-gray-100 text-gray-700">
-                {{ svg($icon->name, 'w-64 h-64') }}
+        <div class="w-full mt-6 sm:grid sm:grid-cols-5 sm:gap-10">
+            <div class="flex items-center justify-center w-full py-12 text-gray-700 bg-gray-100 sm:col-span-3">
+            {{ svg($icon->name, 'w-64 h-64') }}
             </div>
 
-            <div class="mt-10 sm:mt-0 sm:col-span-2 mt-2 mr-2lg:ml-2lg:mt-0">
+            <div class="mt-2 mt-10 sm:mt-0 sm:col-span-2 mr-2lg:ml-2lg:mt-0">
                 <div class="w-full">
-                    <x-buku-icons::h5>Install through composer</x-buku-icons::h5>
+                    <x-buku-icons::h5><x-button onclick="window.parent.Livewire.dispatch('creatingNewLink', ['{{ $icon->name }}'])">Use for a bookmark</x-button></x-buku-icons::h5>
                     <x-markdown class="mt-2 font-medium prose-sm prose bg-gray-700 rounded text-gray-50 sm:text-base">```
-    composer require {{ $icon->set->composer }}
+{{ $icon->name }}
     </x-markdown>
                 </div>
+ @if(auth()->user()->type === \App\Models\UserType::SuperAdmin)
+                <div class="w-full mt-6">
+                    <x-buku-icons::h5>Use outside of blade</x-buku-icons::h5>
+                    <x-markdown class="mt-2 font-medium prose-sm prose bg-gray-700 rounded text-gray-50 sm:text-base">```
+<?php echo '<!--- import vite --->' ?>    
+<?php echo "<?php echo Blade::render(" ?> "@@vite(['resources/css/app.css', 'resources/js/app.js'])" <?php echo "); ?>" ?>
+</x-markdown>
+<x-markdown class="mt-2 font-medium prose-sm prose bg-gray-700 rounded text-gray-50 sm:text-base">```
+<?php echo '<!--- render icon --->' ?>    
+<?php echo "<?php echo Blade::render("?> "@@svg('<?php echo $icon->name ?>')" <?php echo "); ?>" ?>
+</x-markdown>
+                </div>
+
+                <div class="w-full mt-6">
+                    <x-buku-icons::h5>Use it with blade</x-buku-icons::h5>
+                    <x-markdown class="mt-2 font-medium prose-sm prose bg-gray-700 rounded text-gray-50 sm:text-base">```
+<?php echo '<!--- import vite --->' ?>    
+@@vite(['resources/css/app.css', 'resources/js/app.js'])
+</x-markdown>
+                </div>
 
                 <div class="w-full mt-6">
                     <x-buku-icons::h5>Use it as a component</x-buku-icons::h5>
                     <x-markdown class="mt-2 font-medium prose-sm prose bg-gray-700 rounded text-gray-50 sm:text-base">```
-    <x-{{ $icon->name }} />
+<x-{{ $icon->name }} />
     </x-markdown>
                 </div>
 
                 <div class="w-full mt-6">
                     <x-buku-icons::h5>Use it as a directive</x-buku-icons::h5>
                     <x-markdown class="mt-2 font-medium prose-sm prose bg-gray-700 rounded text-gray-50 sm:text-base">```
-    @@svg('<?php echo $icon->name ?>')
+@@svg('<?php echo $icon->name ?>')
     </x-markdown>
                 </div>
 
                 <div class="w-full mt-6">
                     <x-buku-icons::h5>Use it with a helper</x-buku-icons::h5>
                     <x-markdown class="mt-2 font-medium prose-sm prose bg-gray-700 rounded text-gray-50 sm:text-base">```
-    {{ svg('<?php echo $icon->name ?>') }}
+{{ svg('<?php echo $icon->name ?>') }}
     </x-markdown>
                 </div>
+@endif
             </div>
         </div>
 
@@ -51,7 +72,7 @@
                     Similar icons
                 </x-buku-icons::h4>
 
-                <div class="mt-5 grid gap-3 gap-y-3 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 text-sm">
+                <div class="grid grid-cols-2 gap-3 mt-5 text-sm gap-y-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8">
                     @foreach ($icons as $icon)
                         <div
                             class="flex flex-col items-center"
@@ -65,5 +86,5 @@ class="flex flex-col items-center"
         @endif
     </div>
 
-    <x-buku-icons::footer/>
+    {{-- <x-buku-icons::footer/> --}}
 </x-buku-icons::layout>
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 9c50a1b..fc864b1 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -10,13 +10,13 @@
 
         {{ $head ?? '' }}
 
-        {{-- @livewireStyles
-        @bukStyles --}}
+        {{-- @livewireStyles --}}
+        {{-- @bukStyles --}}
 
     </x-slot>
 
     {{ $slot }}
 
-    {{-- @livewireScripts
-    @bukScripts --}}
+    {{-- @livewireScripts --}}
+    {{-- @bukScripts --}}
 </x-html>
diff --git a/resources/views/livewire/icon-search.blade.php b/resources/views/livewire/icon-search.blade.php
index 57815eb..a4eae36 100644
--- a/resources/views/livewire/icon-search.blade.php
+++ b/resources/views/livewire/icon-search.blade.php
@@ -1,10 +1,10 @@
 <div class="w-full">
     <div class="relative flex items-center w-full mb-6">
-        <div class="flex flex-col md:flex-row items-center border border-gray-200 rounded-lg shadow-md w-full">
-            <div class="inline-block relative flex-shrink block h-full w-full md:w-auto pr-2 border-b md:border-b-0 md:border-r">
+        <div class="flex flex-col items-center w-full border border-gray-200 rounded-lg shadow-md md:flex-row">
+            <div class="relative flex-shrink block inline-block w-full h-full pr-2 border-b md:w-auto md:border-b-0 md:border-r">
                 <select
-                    wire:model="set"
-                    class="appearance-none bg-transparent block h-full w-full p-4 mr-4 text-xl focus:outline-none"
+                    wire:model.live="set"
+                    class="block w-full h-full p-4 mr-4 text-xl bg-transparent appearance-none focus:outline-none"
                 >
                     <option value="">All icons</option>
 
@@ -14,8 +14,8 @@ class="appearance-none bg-transparent block h-full w-full p-4 mr-4 text-xl focus
                         </option>
                     @endforeach
                 </select>
-                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                    <x-heroicon-s-chevron-down class="fill-current h-4 w-4" />
+                <div class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
+                    <x-heroicon-s-chevron-down class="w-4 h-4 fill-current" />
                 </div>
             </div>
 
@@ -28,19 +28,19 @@ class="block w-full p-4 text-xl border-0 rounded-lg"
                     spellcheck="false"
                     type="text"
                     placeholder="Search all {{ number_format($total) }} Blade icons ..."
-                    wire:model.debounce.400ms="search"
+                    wire:model.live.debounce.400ms="search"
                 >
                 <div class="absolute inset-y-0 right-0 flex items-center justify-center mr-5">
                     <div wire:loading>
-                        <x-heroicon-o-refresh class="inline w-6 h-6 text-scarlet-600 fill-current animate-spin"/>
+                        <x-icon-refresh class="inline w-6 h-6 fill-current text-scarlet-600 animate-spin"/>
                     </div>
 
                     <div wire:loading.remove>
                         <button wire:click="resetSearch">
                             @if ($search)
-                                <x-antdesign-close-o class="inline w-6 h-6 text-gray-500 transition duration-300 ease-in-out fill-current hover:text-scarlet-500"/>
+                                <x-icon-close class="inline w-6 h-6 text-gray-500 transition duration-300 ease-in-out fill-current hover:text-scarlet-500"/>
                             @else
-                                <x-heroicon-o-refresh class="inline w-6 h-6 text-scarlet-600 transition duration-300 ease-in-out fill-current hover:text-scarlet-500"/>
+                                <x-icon-refresh class="inline w-6 h-6 transition duration-300 ease-in-out fill-current text-scarlet-600 hover:text-scarlet-500"/>
                             @endif
                         </button>
                     </div>
@@ -56,7 +56,7 @@ class="block w-full p-4 text-xl border-0 rounded-lg"
             </x-buku-icons::p>
         @endif
 
-        <div class="mt-5 grid gap-3 gap-y-3 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-10 text-sm">
+        <div class="grid grid-cols-2 gap-3 mt-5 text-sm gap-y-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-10">
             @foreach ($icons as $icon)
                 <div
                     class="flex flex-col items-center"