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

components/MyPages/Breadcrumbs/Breadcrumb.tsx

@@ -1,9 +0,0 @@
-import styles from "./breadcrumbs.module.css"
-
-export default function Breadcrumb({ children }: React.PropsWithChildren) {
-  return (
-    <li className={styles.listItem}>
-      <p className={styles.currentPage}>{children}</p>
-    </li>
-  )
-}

components/MyPages/Breadcrumbs/BreadcrumbWithLink.tsx

@@ -1,17 +0,0 @@
-import Link from "@/components/TempDesignSystem/Link"
-
-import styles from "./breadcrumbs.module.css"
-
-export default function BreadcrumbsWithLink({
-  children,
-  href,
-}: React.PropsWithChildren<{ href: string }>) {
-  return (
-    <li className={styles.listItem}>
-      <Link className={styles.link} href={href}>
-        {children}
-      </Link>
-      <span aria-hidden="true">/</span>
-    </li>
-  )
-}

components/MyPages/Breadcrumbs/breadcrumbs.module.css

@@ -2,34 +2,24 @@
   display: block;
   padding-left: var(--Spacing-x2);
   padding-right: var(--Spacing-x2);
-  padding-top: var(--Spacing-x4);
+  padding-top: var(--Spacing-x2);
 }
 
 .list {
   align-items: center;
   display: flex;
-  gap: 0.4rem;
+  gap: var(--Spacing-x-quarter);
   justify-content: flex-start;
   list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.listItem,
-.link {
-  color: var(--some-text-color, #000);
-  font-size: 1.4rem;
-  font-weight: 400;
-  line-height: 1.56rem;
 }
 
 .listItem {
+  align-items: center;
   display: flex;
-  gap: 0.4rem;
 }
 
-.currentPage {
-  margin: 0;
+.homeLink {
+  display: flex;
 }
 
 @media screen and (min-width: 1367px) {

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>