feat: add gradient prop to update fades

agrc · Mar 21, 2024 · ffeab7e · ffeab7e
1 parent 0f3050c
commit ffeab7e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/components/data/BreadCrumbs.astro b/src/components/data/BreadCrumbs.astro
@@ -5,14 +5,27 @@ interface Props {
   product?: string;
   category: SgidCategory | string;
   class?: string;
+  gradients?: string;
 }
 
-const { product, category, class: className } = Astro.props;
+const { product, category, class: className, gradients = 'from-white dark:from-primary-950' } = Astro.props;
 ---
 
 <nav class:list={['relative flex flex-col items-center justify-center gap-2 pl-2', className]}>
-  <div class="absolute left-0 z-10 h-full w-5 bg-gradient-to-r from-white to-transparent dark:from-primary-950"></div>
-  <div class="absolute right-0 z-10 h-full w-5 bg-gradient-to-l from-white to-transparent dark:from-primary-950"></div>
+  <div
+    class:list={[
+      'absolute left-0 z-10 h-full w-5 bg-gradient-to-r from-white to-transparent lg:hidden dark:from-primary-950',
+      gradients,
+    ]}
+  >
+  </div>
+  <div
+    class:list={[
+      'absolute right-0 z-10 h-full w-5 bg-gradient-to-l from-white to-transparent lg:hidden dark:from-primary-950',
+      gradients,
+    ]}
+  >
+  </div>
   <ol
     class="flex w-full gap-2 overflow-x-auto [-ms-overflow-style:-ms-autohiding-scrollbar] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
   >

diff --git a/src/pages/products/sgid/[category].astro b/src/pages/products/sgid/[category].astro
@@ -33,7 +33,7 @@ export async function getStaticPaths() {
 const pages = (await Astro.glob<IDataCategory>('../**/*.astro'))
   .filter((page) => {
     return [page.metadata?.category?.toLowerCase(), page?.metadata?.secondaryCategory?.toLowerCase()].includes(
-      categoryString,
+      categoryString
     );
   })
   .sort((a, b) => a.metadata.pageTitle.localeCompare(b.metadata.pageTitle));
@@ -60,7 +60,11 @@ const page: IStandardPageMetadata = {
 ---
 
 <Layout {...page}>
-  <BreadCrumbs category={toEnum(category)} class="bg-zinc-100 dark:bg-zinc-900 dark:text-zinc-300" />
+  <BreadCrumbs
+    category={toEnum(category)}
+    class="bg-zinc-100 dark:bg-zinc-900 dark:text-zinc-300"
+    gradients="from-zinc-100 dark:from-zinc-950"
+  />
   <Section {...page.section[0]}>
     {
       pages.map((page) => (