feat(WEB-205, WEB-206): get breadcrumbs for my pages from contentstack

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/page.tsx

@@ -1,10 +1,17 @@
 import { serverClient } from "@/lib/trpc/server"
+import { benefits } from "@/constants/routes/myPages"
 
 import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
 
-export default async function BenefitsBreadcrumbs() {
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function BenefitsBreadcrumbs({
+  params,
+}: PageArgs<LangParams>) {
+  const href = benefits[params.lang].replace(`/${params.lang}`, "")
   const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href: "/my-pages/benefits",
+    href,
+    locale: params.lang,
   })
   return <Breadcrumbs breadcrumbs={breadcrumbs} />
 }

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/page.tsx

@@ -1,10 +1,17 @@
 import { serverClient } from "@/lib/trpc/server"
+import { overview } from "@/constants/routes/myPages"
 
 import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
 
-export default async function OverviewBreadcrumbs() {
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function OverviewBreadcrumbs({
+  params,
+}: PageArgs<LangParams>) {
+  const href = overview[params.lang].replace(`/${params.lang}`, "")
   const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href: "/my-pages/overview",
+    href,
+    locale: params.lang,
   })
   return <Breadcrumbs breadcrumbs={breadcrumbs} />
 }

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/[...catchAll]/page.tsx

@@ -1,10 +1,17 @@
 import { serverClient } from "@/lib/trpc/server"
+import { profile } from "@/constants/routes/myPages"
 
 import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
 
-export default async function ProfileBreadcrumbs() {
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function ProfileBreadcrumbs({
+  params,
+}: PageArgs<LangParams>) {
+  const href = profile[params.lang].replace(`/${params.lang}`, "")
   const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href: "/my-pages/profile",
+    href,
+    locale: params.lang,
   })
   return <Breadcrumbs breadcrumbs={breadcrumbs} />
 }

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/page.tsx

@@ -1,10 +1,17 @@
 import { serverClient } from "@/lib/trpc/server"
+import { profile } from "@/constants/routes/myPages"
 
 import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
 
-export default async function ProfileBreadcrumbs() {
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function ProfileBreadcrumbs({
+  params,
+}: PageArgs<LangParams>) {
+  const href = profile[params.lang].replace(`/${params.lang}`, "")
   const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href: "/my-pages/profile",
+    href,
+    locale: params.lang,
   })
   return <Breadcrumbs breadcrumbs={breadcrumbs} />
 }

app/[lang]/(live)/(protected)/my-pages/profile/@edit/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}

app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}

app/[lang]/(live)/(protected)/my-pages/profile/edit/page.tsx

@@ -0,0 +1,4 @@
+import "../profileLayout.css"
+export default function EditProfilePage() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx

@@ -1,10 +1,9 @@
 import MaxWidth from "@/components/MaxWidth"
 
-import styles from "./layout.module.css"
-
 import type { ProfileLayoutProps } from "@/types/components/myPages/myProfile/layout"
 
 export default function ProfileLayout({
+  children,
   communication,
   creditCards,
   edit,
@@ -15,13 +14,14 @@ export default function ProfileLayout({
   wishes,
 }: React.PropsWithChildren<ProfileLayoutProps>) {
   return (
-    <MaxWidth className={styles.page} tag="main">
-      <div className={styles.btns}>
+    <MaxWidth className="profile-page" tag="main">
+      <div className="profile-btns">
         {edit}
         {view}
       </div>
       {profile}
-      <section className={styles.cards}>
+      {children}
+      <section className="profile-cards">
         {communication}
         {wishes}
         {membershipCard}

app/[lang]/(live)/(protected)/my-pages/profile/page.tsx

@@ -0,0 +1,5 @@
+import "./profileLayout.css"
+
+export default function ProfilePage() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/profileLayout.css

@@ -1,9 +1,13 @@
-.page {
+/** 
+  * Due to css import issues with parallell routes we are forced to 
+  * use a regular css file and import it in the page.tsx
+  */
+.profile-page {
   display: grid;
   gap: 3rem;
 }
 
-.btns {
+.profile-btns {
   align-items: center;
   display: flex;
   gap: 1rem;
@@ -16,7 +20,7 @@
   transform: translateY(-100%);
 }
 
-.cards {
+.profile-cards {
   display: grid;
   gap: 0.4rem;
   grid-template-columns: 1fr 1fr;