feat: breadcrumbs for My Pages

components/MyPages/Breadcrumbs/Breadcrumb.tsx

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,17 @@
+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/Client.tsx

@@ -1,49 +0,0 @@
-"use client"
-import { Fragment } from "react"
-import { usePathname } from "next/navigation"
-
-import Link from "@/components/TempDesignSystem/Link"
-
-import styles from "./breadcrumbs.module.css"
-
-import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
-
-export default function ClientBreadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
-  const pathname = usePathname()
-  /** Temp solution until we can get breadcrumbs from CS */
-  const path = pathname.replace(`/${lang}`, '')
-  const currentBreadcrumbs = breadcrumbs?.[path]
-  if (!currentBreadcrumbs?.length) {
-    return null
-  }
-
-  return (
-    <>
-      <li className={styles.listItem}>
-        <span>/</span>
-      </li>
-      {currentBreadcrumbs.map(breadcrumb => {
-        if (breadcrumb.href) {
-          return (
-            <Fragment key={breadcrumb.title}>
-              <li className={styles.listItem}>
-                <Link className={styles.link} href={breadcrumb.href}>
-                  {breadcrumb.title}
-                </Link>
-              </li>
-              <li className={styles.listItem}>
-                <span>/</span>
-              </li>
-            </Fragment>
-          )
-        }
-
-        return (
-          <li className={styles.listItem} key={breadcrumb.title}>
-            <p className={styles.currentPage}>{breadcrumb.title}</p>
-          </li>
-        )
-      })}
-    </>
-  )
-}

components/MyPages/Breadcrumbs/breadcrumbs.module.css

@@ -27,6 +27,11 @@
   line-height: 1.56rem;
 }
 
+.listItem {
+  display: flex;
+  gap: 0.4rem;
+}
+
 .currentPage {
   margin: 0;
 }
@@ -37,4 +42,4 @@
     padding-left: 2.4rem;
     padding-top: 2rem;
   }
-}
+}

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>
   )