Connect to solr (search product), header component with title, fix product card layout, show product search result

1 files changed, 160 insertions, 119 deletions

diff --git a/src/styles/globals.css b/src/styles/globals.css
index e88d14aa..d0080dda 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -5,115 +5,146 @@
 @tailwind utilities;
 
 html, body {
-    @apply w-screen;
-    @apply text-base;
-    @apply text-gray-900;
+    @apply 
+        w-screen
+        text-base
+        text-gray-900
+    ;
 }
 
 @layer base {
     h1, .h1 {
-        @apply text-lg; 
-        @apply font-semibold;
-        @apply text-gray-900;
+        @apply
+            text-lg
+            font-semibold
+            text-gray-900
+        ;
     }
 
     a {
-        @apply font-medium;
-        @apply text-yellow-900;
+        @apply 
+            font-medium
+            text-yellow-900
+        ;
     }
 }
 
 @layer components {
     .badge-red {
-        @apply text-xs;
-        @apply font-medium;
-        @apply px-1;
-        @apply py-0.5;
-        @apply rounded;
-        @apply bg-red-300;
-        @apply text-red-900;
+        @apply
+            text-xs
+            font-medium
+            px-1
+            py-0.5
+            rounded
+            bg-red-300
+            text-red-900
+        ;
     }
 
     .badge-yellow {
-        @apply text-xs;
-        @apply font-medium;
-        @apply px-1;
-        @apply py-0.5;
-        @apply rounded;
-        @apply bg-yellow-300;
-        @apply text-yellow-900;
+        @apply
+            text-xs
+            font-medium
+            px-1
+            py-0.5
+            rounded
+            bg-yellow-300
+            text-yellow-900
+        ;
     }
 
     .form-label {
-        @apply text-sm;
-        @apply mb-1;
-        @apply block;
+        @apply
+            text-sm
+            mb-1
+            block
+        ;
     }
 
     .form-input {
-        @apply p-3;
-        @apply rounded;
-        @apply border;
-        @apply border-gray-300;
-        @apply bg-transparent;
-        @apply w-full;
-        @apply leading-none;
+        @apply 
+            p-3
+            rounded
+            border
+            border-gray-300
+            bg-transparent
+            w-full
+            leading-none
+        ;
     }
 
     .btn-primary {
-        @apply p-3;
-        @apply bg-yellow-900;
-        @apply border-yellow-900;
-        @apply rounded;
-        @apply border;
-        @apply text-white;
-        @apply text-center;
-        @apply disabled:bg-yellow-700;
-        @apply disabled:border-yellow-700;
+        @apply 
+            block
+            w-fit
+            p-3
+            bg-yellow-900
+            border-yellow-900
+            rounded
+            border
+            text-white
+            text-center
+            disabled:bg-yellow-700
+            disabled:border-yellow-700
+        ;
     }
 
     .btn-light {
-        @apply p-3;
-        @apply bg-gray-100;
-        @apply border-gray-300;
-        @apply rounded;
-        @apply border;
-        @apply text-gray-900;
-        @apply text-center;
+        @apply 
+            block
+            w-fit
+            p-3
+            bg-gray-100
+            border-gray-300
+            rounded
+            border
+            text-gray-900
+            text-center
+        ;
     }
 
     .product-card {
-        @apply w-full;
-        @apply h-full;
-        @apply border;
-        @apply border-gray-300;
-        @apply rounded;
-        @apply relative;
-        @apply flex;
-        @apply flex-col;
+        @apply
+            w-full
+            h-full
+            border
+            border-gray-300
+            rounded
+            relative
+            flex
+            flex-col
+        ;
     }
 
     .product-card__image {
-        @apply w-full;
-        @apply h-[160px];
-        @apply object-contain;
-        @apply object-center;
-        @apply border-b;
-        @apply border-gray-300;
+        @apply
+            w-full
+            h-[160px]
+            object-contain
+            object-center
+            border-b
+            border-gray-300
+        ;
     }
 
     .product-card__description {
-        @apply p-2;
-        @apply pb-3;
-        @apply flex;
-        @apply flex-col;
-        @apply flex-1;
-        @apply justify-between;
+        @apply
+            p-2
+            pb-3
+            flex
+            flex-col
+            flex-1
+            justify-between
+        ;
     }
 
     .product-card__title {
-        @apply text-sm;
-        @apply text-gray-900;
+        @apply
+            text-sm
+            text-gray-900
+            h-16
+        ;
     }
 
     .product-card__brand {
@@ -140,19 +171,21 @@ html, body {
 }
 
 .menu-wrapper {
-    @apply fixed;
-    @apply top-0;
-    @apply left-0;
-    @apply bg-white;
-    @apply w-[85%];
-    @apply h-full;
-    @apply z-[60];
-    @apply py-4;
-    @apply px-4;
-    @apply overflow-y-auto;
-    @apply translate-x-[-100%];
-    @apply ease-linear;
-    @apply duration-150;
+    @apply
+        fixed
+        top-0
+        left-0
+        bg-white
+        w-[85%]
+        h-full
+        z-[60]
+        py-4
+        px-4
+        overflow-y-auto
+        translate-x-[-100%]
+        ease-linear
+        duration-150
+    ;
 }
 
 .menu-wrapper.active{
@@ -160,51 +193,59 @@ html, body {
 }
 
 .menu-overlay {
-    @apply fixed;
-    @apply top-0;
-    @apply left-0;
-    @apply w-full;
-    @apply h-full;
-    @apply z-[55];
-    @apply bg-gray-900/60;
+    @apply
+        fixed
+        top-0
+        left-0
+        w-full
+        h-full
+        z-[55]
+        bg-gray-900/60
+    ;
 }
 
 .sticky-header {
-    @apply px-4; 
-    @apply py-3;
-    @apply bg-white;
-    @apply border-b;
-    @apply sticky;
-    @apply top-0;
-    @apply shadow;
-    @apply z-50;
+    @apply
+        px-4
+        py-3
+        bg-white
+        border-b
+        sticky
+        top-0
+        shadow
+        z-50
+    ;
 }
 
 .content-container {
-    @apply max-w-full;
-    @apply overflow-x-hidden;
+    @apply 
+        max-w-full
+        overflow-x-hidden
+    ;
 }
 
 #indoteknik_toast {
-    @apply fixed;
-    @apply bottom-4;
-    @apply translate-y-[200%];
-    @apply left-[50%];
-    @apply translate-x-[-50%];
-    @apply z-[100];
-    @apply flex;
-    @apply items-center;
-    @apply p-4;
-    @apply mb-4;
-    @apply w-[90%];
-    @apply text-gray-500;
-    @apply bg-white;
-    @apply border;
-    @apply border-gray-300;
-    @apply rounded-lg;
-    @apply shadow;
-    @apply ease-linear;
-    @apply duration-300;
+    @apply
+        fixed
+        bottom-4
+        translate-y-[200%]
+        left-[50%]
+        translate-x-[-50%]
+        z-[100]
+        flex
+        items-center
+        p-4
+        mb-4
+        w-[90%]
+        text-gray-500
+        bg-white
+        border
+        border-gray-300
+        rounded-lg
+        shadow
+        ease-linear
+        duration-300
+    ;
 }
 
 #indoteknik_toast.active {