Merge pull request #22 from deco-sites/karla-tec3

feat: category product shelf
deco-sites · Oct 17, 2024 · 5c3904e · 5c3904e
2 parents 86a0e04 + 2f3338c
commit 5c3904e
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 67 deletions.
diff --git a/components/header/NavItem.tsx b/components/header/NavItem.tsx
@@ -14,54 +14,48 @@ function NavItem({ item }: { item: SiteNavigationElement }) {
       class="group flex items-center "
       style={{ height: NAVBAR_HEIGHT_DESKTOP }}
     >
-      <a
-        href={url}
-        class="group-hover:underline text-sm font-medium"
-      >
+      <a href={url} class="group-hover:underline text-sm font-light">
         {name}
       </a>
 
-      {children && children.length > 0 &&
-        (
-          <div
-            class="fixed hidden hover:flex group-hover:flex bg-base-100 z-40 items-start justify-center gap-6 border-t-2 border-b-2 border-base-200 w-screen"
-            style={{
-              top: "0px",
-              left: "0px",
-              marginTop: HEADER_HEIGHT_DESKTOP,
-            }}
-          >
-            {image?.url && (
-              <Image
-                class="p-6"
-                src={image.url}
-                alt={image.alternateName}
-                width={300}
-                height={332}
-                loading="lazy"
-              />
-            )}
-            <ul class="flex items-start justify-start gap-6 container">
-              {children.map((node) => (
-                <li class="p-6 pl-0">
-                  <a class="hover:underline" href={node.url}>
-                    <span>{node.name}</span>
-                  </a>
+      {children && children.length > 0 && (
+        <div
+          class="fixed hidden hover:flex text-xs group-hover:flex bg-gray-100 z-40 items-start justify-center gap-6 border-t border-b border-accent-content max-w-[1440px] mx-auto top-[-15px]"
+          style={{
+            marginTop: HEADER_HEIGHT_DESKTOP,
+          }}
+        >
+          {image?.url && (
+            <Image
+              class="p-6"
+              src={image.url}
+              alt={image.alternateName}
+              width={300}
+              height={332}
+              loading="lazy"
+            />
+          )}
+          <ul class="flex items-start justify-start gap-6 container">
+            {children.map((node) => (
+              <li class="p-6">
+                <a class="hover:underline" href={node.url}>
+                  <span>{node.name}</span>
+                </a>
 
-                  <ul class="flex flex-col gap-1 mt-4">
-                    {node.children?.map((leaf) => (
-                      <li>
-                        <a class="hover:underline" href={leaf.url}>
-                          <span class="text-xs">{leaf.name}</span>
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
+                <ul class="flex flex-col gap-1 mt-4">
+                  {node.children?.map((leaf) => (
+                    <li>
+                      <a class="hover:underline" href={leaf.url}>
+                        <span class="text-xs">{leaf.name}</span>
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
     </li>
   );
 }

diff --git a/components/product/ProductCard.tsx b/components/product/ProductCard.tsx
@@ -210,7 +210,7 @@ function ProductCard({
               item={item}
               class={clx(
                 "btn",
-                "btn-outline justify-center border-gray-400 !text-sm !font-medium px-0 no-animation w-full",
+                "btn-outline justify-center border-gray-400 !text-sm !font-medium px-0 no-animation w-full min-h-0 h-7",
                 "hover:!bg-primary",
                 "hover:!text-base-100",
               )}
@@ -221,7 +221,7 @@ function ProductCard({
               href={relativeUrl}
               class={clx(
                 "btn",
-                "btn-outline justify-start border-none !text-sm !font-medium px-0 no-animation w-full h-29",
+                "btn-outline justify-start border-none text-center !text-sm !font-medium px-0 no-animation w-full h-29",
                 "hover:!bg-transparent",
                 "disabled:!bg-transparent disabled:!opacity-75",
                 "btn-error hover:!text-error disabled:!text-error",

diff --git a/sections/CategoriesProdutctsShelf.tsx b/sections/CategoriesProdutctsShelf.tsx
@@ -52,14 +52,20 @@ function CategoriesProductsShelf({ productList, image, title, index = 0 }: Props
 
   return (
     <div class="container max-w-[1440px] mx-auto mt-10 px-11">
-      <div>
-        <p>{title}</p>
-        {productList.map((item, index) => (
-          <button class="btn" hx-get={useSection({props: {index}})} hx-target="closest section" hx-swap="outerHTML"
-          >
-            {item.title}
-          </button>
-        ))}
+      <div class="flex items-center mb-3">
+        <p class="font-medium uppercase px-2 lg:mr-4">{title}</p>
+        <div class=" flex gap-8">
+          {productList.map((item, index) => (
+            <button
+              class=" bg-gray-200 text-center text-accent-content uppercase border-none hover:bg-primary hover:text-base-100 p-2 rounded"
+              hx-get={useSection({ props: { index } })}
+              hx-target="closest section"
+              hx-swap="outerHTML"
+            >
+              {item.title}
+            </button>
+          ))}
+        </div>
       </div>
       <div class="flex">
         <div class=" w-[394px] h-[498px] ">
@@ -74,13 +80,13 @@ function CategoriesProductsShelf({ productList, image, title, index = 0 }: Props
             />
           </a>
         </div>
-        <div class="flex max-w-[calc(100%_-_394px)]" id="product-slider-container">
-          {products && (
-            <ProductSlider products={products } />
-          )}
+        <div
+          class="flex max-w-[calc(100%_-_394px)]"
+          id="product-slider-container"
+        >
+          {products && <ProductSlider products={products} />}
         </div>
       </div>
-
     </div>
   );
 }

diff --git a/static/tailwind.css b/static/tailwind.css
@@ -3725,6 +3725,9 @@ details.collapse summary::-webkit-details-marker {
 .top-4 {
   top: 1rem;
 }
+.top-\[-15px\] {
+  top: -15px;
+}
 .top-\[41px\] {
   top: 41px;
 }
@@ -3860,6 +3863,9 @@ details.collapse summary::-webkit-details-marker {
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -4722,15 +4728,12 @@ details.collapse summary::-webkit-details-marker {
   border-top-width: 1px;
   border-bottom-width: 1px;
 }
-.border-b-2 {
-  border-bottom-width: 2px;
+.border-b {
+  border-bottom-width: 1px;
 }
 .border-t {
   border-top-width: 1px;
 }
-.border-t-2 {
-  border-top-width: 2px;
-}
 .border-t-\[1px\] {
   border-top-width: 1px;
 }
@@ -4741,6 +4744,10 @@ details.collapse summary::-webkit-details-marker {
   --tw-border-opacity: 1;
   border-color: rgb(201 207 207 / var(--tw-border-opacity));
 }
+.border-accent-content {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-ac,oklch(var(--ac)/var(--tw-border-opacity)));
+}
 .border-base-200 {
   --tw-border-opacity: 1;
   border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
@@ -5071,9 +5078,6 @@ details.collapse summary::-webkit-details-marker {
 .pb-\[7px\] {
   padding-bottom: 7px;
 }
-.pl-0 {
-  padding-left: 0px;
-}
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -5854,6 +5858,11 @@ details.collapse summary::-webkit-details-marker {
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
 
+.hover\:bg-primary:hover {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+}
+
 .hover\:bg-gradient-to-r:hover {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -6478,6 +6487,10 @@ details.collapse summary::-webkit-details-marker {
     margin-left: 0.75rem;
   }
 
+  .lg\:mr-4 {
+    margin-right: 1rem;
+  }
+
   .lg\:mt-6 {
     margin-top: 1.5rem;
   }