fix: the issue of the breadcrumb link and make it depend on the as pr…

…ops #95
HamzaAmar · Oct 30, 2024 · d2f96fe · d2f96fe
1 parent 183a3db
commit d2f96fe
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 99 deletions.
diff --git a/apps/docs/content/components/breadcrumb.mdx b/apps/docs/content/components/breadcrumb.mdx
@@ -39,3 +39,7 @@ import { Breadcrumb } from '@pillar-ui/core'
 <Prop defaultValue="4" type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
 
 <Playground direction="column" name="breadcrumbSize" root="breadcrumb" />
+
+### As
+
+<Playground direction="column" name="breadcrumbAs" root="breadcrumb" />
diff --git a/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbAs.tsx b/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbAs.tsx
@@ -9,20 +9,33 @@ const breadcrumbsItems = [
 ]
 
 export const BreadcrumbAs = () => {
-  const items = breadcrumbsItems.map(({ name, link, current }) => (
-    <BreadcrumbItem current={current} key={name} link={link}>
+  const aItems = breadcrumbsItems.map(({ name, link, current }) => (
+    <BreadcrumbItem current={current} key={name} href={link}>
+      {name}
+    </BreadcrumbItem>
+  ))
+  const linkItems = breadcrumbsItems.map(({ name, link, current }) => (
+    <BreadcrumbItem as={Link} current={current} key={name} href={link}>
+      {name}
+    </BreadcrumbItem>
+  ))
+  const buttonItems = breadcrumbsItems.map(({ name, link, current }) => (
+    <BreadcrumbItem
+      as="button"
+      current={current}
+      key={name}
+      onClick={() => {
+        alert('Hello')
+      }}
+    >
       {name}
     </BreadcrumbItem>
   ))
   return (
     <>
-      <Breadcrumb color="d">{items}</Breadcrumb>
-      <Breadcrumb color="w">{items}</Breadcrumb>
-      <Breadcrumb color="su">{items}</Breadcrumb>
-      <Breadcrumb color="se">{items}</Breadcrumb>
-      <Breadcrumb color="p">{items}</Breadcrumb>
-      <Breadcrumb color="b">{items}</Breadcrumb>
-      <Breadcrumb color="i">{items}</Breadcrumb>
+      <Breadcrumb>{aItems}</Breadcrumb>
+      <Breadcrumb>{linkItems}</Breadcrumb>
+      <Breadcrumb>{buttonItems}</Breadcrumb>
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbColor.tsx b/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbColor.tsx
@@ -9,7 +9,7 @@ const breadcrumbsItems = [
 
 export const BreadcrumbColor = () => {
   const items = breadcrumbsItems.map(({ name, link, current }) => (
-    <BreadcrumbItem current={current} key={name} link={link}>
+    <BreadcrumbItem current={current} key={name} href={link}>
       {name}
     </BreadcrumbItem>
   ))

diff --git a/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbIcon.tsx b/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbIcon.tsx
@@ -13,7 +13,7 @@ export const BreadcrumbIcon = () => {
     <>
       <Breadcrumb>
         {breadcrumbsItems.map(({ name, link, icon, current }) => (
-          <BreadcrumbItem key={name} link={link} current={current}>
+          <BreadcrumbItem key={name} href={link} current={current}>
             {name}
             {icon}
           </BreadcrumbItem>
@@ -22,7 +22,7 @@ export const BreadcrumbIcon = () => {
 
       <Breadcrumb>
         {breadcrumbsItems.map(({ name, link, icon, current }) => (
-          <BreadcrumbItem key={name} link={link} current={current}>
+          <BreadcrumbItem key={name} href={link} current={current}>
             {icon}
             {name}
           </BreadcrumbItem>

diff --git a/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbSeparator.tsx b/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbSeparator.tsx
@@ -9,7 +9,7 @@ const breadcrumbsItems = [
 
 export const BreadcrumbSeparator = () => {
   const items = breadcrumbsItems.map(({ name, link, current }) => (
-    <BreadcrumbItem current={current} key={name} link={link}>
+    <BreadcrumbItem current={current} key={name} href={link}>
       {name}
     </BreadcrumbItem>
   ))

diff --git a/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbSize.tsx b/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbSize.tsx
@@ -8,7 +8,7 @@ const breadcrumbsItems = [
 
 export const BreadcrumbSize = () => {
   const items = breadcrumbsItems.map(({ name, link, current }) => (
-    <BreadcrumbItem current={current} key={name} link={link}>
+    <BreadcrumbItem current={current} key={name} href={link}>
       {name}
     </BreadcrumbItem>
   ))