feat(WEB-154): my profile view

components/MyPages/Breadcrumbs/Client.tsx

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

@@ -0,0 +1,40 @@
+.breadcrumbs {
+  background-color: var(--some-grey-color, #f2f2f2);
+  display: block;
+  padding-bottom: 0.8rem;
+  padding-left: 2rem;
+  padding-top: 3rem;
+  position: sticky;
+  top: var(--header-height);
+  z-index: 999;
+}
+
+.list {
+  align-items: center;
+  display: flex;
+  gap: 0.4rem;
+  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;
+}
+
+.currentPage {
+  margin: 0;
+}
+
+@media screen and (min-width: 950px) {
+  .breadcrumbs {
+    background-color: var(--some-white-color, #fff);
+    padding-left: 2.4rem;
+    padding-top: 2rem;
+  }
+}

components/MyPages/Breadcrumbs/index.tsx

@@ -0,0 +1,21 @@
+import ClientBreadcrumbs from "./Client"
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
+
+export default function Breadcrumbs({ breadcrumbs, lang }: 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} />
+      </ul>
+    </nav>
+  )
+}