feat(WEB-304): remaning UI from design system primitives

components/MyPages/Breadcrumbs/index.tsx

@@ -1,26 +1,53 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import Breadcrumb from "./Breadcrumb"
-import BreadcrumbsWithLink from "./BreadcrumbWithLink"
+import { ChevronRightIcon , HouseIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
 import styles from "./breadcrumbs.module.css"
 
 export default async function Breadcrumbs() {
   const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
+  const homeBreadcrumb = breadcrumbs.shift()
   return (
     <nav className={styles.breadcrumbs}>
       <ul className={styles.list}>
+        {homeBreadcrumb ? (
+          <li className={styles.listItem}>
+            <Link
+              className={styles.homeLink}
+              color="peach80"
+              href={homeBreadcrumb.href!}
+              variant="breadcrumb"
+            >
+              <HouseIcon color="peach80" />
+            </Link>
+            <ChevronRightIcon aria-hidden="true" color="peach80" />
+          </li>
+        ) : null}
+
         {breadcrumbs.map((breadcrumb) => {
           if (breadcrumb.href) {
             return (
-              <BreadcrumbsWithLink key={breadcrumb.uid} href={breadcrumb.href}>
-                {breadcrumb.title}
-              </BreadcrumbsWithLink>
+              <li key={breadcrumb.uid} className={styles.listItem}>
+                <Link
+                  color="peach80"
+                  href={breadcrumb.href}
+                  variant="breadcrumb"
+                >
+                  {breadcrumb.title}
+                </Link>
+                <ChevronRightIcon aria-hidden="true" color="peach80" />
+              </li>
             )
           }
 
           return (
-            <Breadcrumb key={breadcrumb.uid}>{breadcrumb.title}</Breadcrumb>
+            <li key={breadcrumb.uid} className={styles.listItem}>
+              <Footnote color="burgundy" textTransform="bold">
+                {breadcrumb.title}
+              </Footnote>
+            </li>
           )
         })}
       </ul>