#187: SVG component introduced

alimranahmed · Sep 15, 2024 · 826f241 · 826f241
1 parent bbd99f4
commit 826f241
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 41 deletions.
diff --git a/composer.lock b/composer.lock
diff --git a/resources/views/components/backend/navbar.blade.php b/resources/views/components/backend/navbar.blade.php
@@ -8,16 +8,9 @@ class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hove
                         aria-controls="mobile-menu" aria-expanded="false">
                     <span class="sr-only">Open main menu</span>
 
-                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                         stroke="currentColor" aria-hidden="true">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M4 6h16M4 12h16M4 18h16"/>
-                    </svg>
+                    <x-svg icon="burger" class="block h-6 w-6" stroke="currentColor"/>
 
-                    <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                         stroke="currentColor" aria-hidden="true">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-                    </svg>
+                    <x-svg icon="cross1" class="hidden h-6 w-6" stroke="currentColor"/>
                 </button>
             </div>
 

diff --git a/resources/views/components/frontend/navbar.blade.php b/resources/views/components/frontend/navbar.blade.php
@@ -7,17 +7,13 @@
     <form action="{{route("search-article")}}">
         <div class="flex">
             <input name="query_string"
+                   placeholder="Search..."
                    aria-label="Query string"
                    required
-                   class="rounded-l-full border-l border-t border-b border-blue-200 outline-none px-2 bg-gray-100 focus:bg-white w-full appearance-none"
+                   class="rounded-l-full border-l border-t border-b border-blue-200 outline-none px-2 bg-gray-100 focus:bg-white focus:ring-0 focus:outline-none focus:border-blue-200 w-full appearance-none"
             >
-            <button
-                class="px-2 text-blue-800 focus:outline-none rounded-r-full border-r border-t border-b border-blue-200">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
-                    <path class="heroicon-ui" fill="currentColor"
-                          d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6
-         6 0 1 0 0-12 6 6 0 0 0 0 12z"/>
-                </svg>
+            <button class="px-2 text-blue-800 focus:outline-none rounded-r-full border-r border-t border-b border-blue-200">
+                <x-svg icon="search"/>
             </button>
         </div>
     </form>
@@ -39,22 +35,16 @@ class="rounded-full h-10 w-10 object-cover object-center">
 
         <a class="rounded-full text-red-900 bg-red-500 hidden sm-hide-menu"
            onclick="document.querySelector('.sm-navs').classList.add('hidden');
-       document.querySelector('.sm-show-menu').classList.remove('hidden');
-        document.querySelector('.sm-hide-menu').classList.add('hidden');">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
-                <path class="heroicon-ui"
-                      d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"/>
-            </svg>
+                document.querySelector('.sm-show-menu').classList.remove('hidden');
+                document.querySelector('.sm-hide-menu').classList.add('hidden');">
+            <x-svg icon="cross"/>
         </a>
 
         <a class="inset rounded-full text-blue-900 sm-show-menu"
            onclick="document.querySelector('.sm-navs').classList.remove('hidden');
-       document.querySelector('.sm-show-menu').classList.add('hidden');
-        document.querySelector('.sm-hide-menu').classList.remove('hidden');">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
-                <path class="heroicon-ui"
-                      d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
-            </svg>
+                document.querySelector('.sm-show-menu').classList.add('hidden');
+                document.querySelector('.sm-hide-menu').classList.remove('hidden');">
+            <x-svg icon="search"/>
         </a>
     </div>
 
@@ -65,13 +55,8 @@ class="rounded-full h-10 w-10 object-cover object-center">
                        aria-label="Query string"
                        required
                        class="rounded-l-full border-l border-t border-b border-blue-200 outline-none px-2 bg-gray-100 focus:bg-white w-full appearance-none">
-                <button type="submit"
-                        class="px-2 text-blue-800 focus:outline-none rounded-r-full border-r border-t border-b border-blue-200">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
-                        <path class="heroicon-ui" fill="currentColor"
-                              d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6
-         6 0 1 0 0-12 6 6 0 0 0 0 12z"/>
-                    </svg>
+                <button type="submit" class="px-2 text-blue-800 focus:outline-none rounded-r-full border-r border-t border-b border-blue-200">
+                    <x-svg icon="search"/>
                 </button>
             </div>
         </form>

diff --git a/resources/views/components/svg.blade.php b/resources/views/components/svg.blade.php
@@ -0,0 +1,19 @@
+@props(['icon'])
+
+@php
+    $path = match ($icon) {
+        'search' => 'M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z',
+        'cross' => 'M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z',
+        'cross1' => 'M6 18L18 6M6 6l12 12',
+        'burger' => 'M4 6h16M4 12h16M4 18h16',
+    }
+@endphp
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 24 24"
+     width="18"
+     height="18"
+     aria-hidden="true"
+    {{$attributes}}>
+    <path fill="currentColor" d="{{$path}}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>