feat: breadcrumbs for My Pages

components/MyPages/Breadcrumbs/index.tsx

@@ -1,20 +1,31 @@
-import ClientBreadcrumbs from "./Client"
-import Link from "@/components/TempDesignSystem/Link"
+import { _ } from "@/lib/translation"
+
+import Breadcrumb from "./Breadcrumb"
+import BreadcrumbsWithLink from "./BreadcrumbWithLink"
 
 import styles from "./breadcrumbs.module.css"
 
 import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
 
-export default function Breadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
+export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
   return (
     <nav className={styles.breadcrumbs}>
       <ul className={styles.list}>
-        <li className={styles.listItem}>
-          <Link className={styles.link} href="#">
-            Home
-          </Link>
-        </li>
-        <ClientBreadcrumbs breadcrumbs={breadcrumbs} lang={lang} />
+        <BreadcrumbsWithLink href="#">{_("Home")}</BreadcrumbsWithLink>
+        {breadcrumbs.map((breadcrumb) => {
+          if (breadcrumb.href) {
+            return (
+              <BreadcrumbsWithLink
+                key={breadcrumb.title}
+                href={breadcrumb.href}
+              >
+                {breadcrumb.title}
+              </BreadcrumbsWithLink>
+            )
+          }
+
+          return <Breadcrumb>{breadcrumb.title}</Breadcrumb>
+        })}
       </ul>
     </nav>
   )