feat(WEB-154): my profile view

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

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

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

@@ -0,0 +1,10 @@
+import Button from "@/components/TempDesignSystem/Button";
+
+export default function EditProfile() {
+  return (
+    <>
+      <Button form="edit-profile" type="reset">Cancel</Button>
+      <Button form="edit-profile" type="submit">Save</Button>
+    </>
+  )
+}

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

@@ -0,0 +1,11 @@
+import Modal from "@/components/Modal";
+
+export default function VerifyCode() {
+  return (
+    <Modal>
+      <Modal.Header>
+        <Modal.Title>Verify Code</Modal.Title>
+      </Modal.Header>
+    </Modal>
+  )
+}

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

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

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

@@ -0,0 +1,22 @@
+import Button from "@/components/TempDesignSystem/Button";
+import Link from "@/components/TempDesignSystem/Link";
+
+import styles from "./view.module.css"
+
+import type { LangParams, PageArgs } from "@/types/params";
+
+export default function ProfileView({ params }: PageArgs<LangParams>) {
+  return (
+    <Button
+      asChild
+      bgcolor="quarternary"
+      className={styles.btn}
+      size="small"
+      weight="regular"
+    >
+      <Link href={`/${params.lang}/my-pages/profile/verify`}>
+        Edit
+      </Link>
+    </Button>
+  )
+}

app/[lang]/(live)/(protected)/my-pages/profile/@view/view.module.css

@@ -0,0 +1,3 @@
+.btn {
+  position: absolute;
+}

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

@@ -0,0 +1,16 @@
+type ProfileLayoutProps = React.PropsWithChildren<{
+  edit: React.ReactNode
+  verifyCode: React.ReactNode
+  view: React.ReactNode
+}>
+
+export default function ProfileLayout({ children, edit, verifyCode, view }: ProfileLayoutProps) {
+  return (
+    <>
+      {edit}
+      {view}
+      {children}
+      {verifyCode}
+    </>
+  )
+}

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

@@ -0,0 +1,10 @@
+.page {
+  display: grid;
+  gap: 3rem;
+}
+
+.cards {
+  display: grid;
+  gap: 0.4rem;
+  grid-template-columns: 1fr 1fr;
+}

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

@@ -0,0 +1,36 @@
+import { serverClient } from "@/lib/trpc/server";
+import { extendedUser } from "../_constants";
+
+import CommunicationPreferences from "@/components/MyProfile/CommunicationPreferences";
+import CreditCards from "@/components/MyProfile/CreditCards";
+import MaxWidth from "@/components/MaxWidth";
+import MembershipCard from "@/components/MyProfile/MembershipCard";
+import Password from "@/components/MyProfile/Password";
+import Profile from "@/components/MyProfile/Profile";
+import Wishes from "@/components/MyProfile/Wishes";
+
+import styles from "./page.module.css"
+import Modal from "@/components/Modal";
+
+export default async function MyProfile() {
+  const data = await serverClient().user.get()
+  const user = {
+    ...data,
+    ...extendedUser,
+  }
+  return (
+    <MaxWidth className={styles.page} tag="main">
+      <Modal>
+        <h1>HALLÅ ELLER!?!</h1>
+      </Modal>
+      <Profile user={user} />
+      <section className={styles.cards}>
+        <CommunicationPreferences />
+        <Wishes />
+        <MembershipCard />
+        <CreditCards />
+        <Password />
+      </section>
+    </MaxWidth>
+  )
+}

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

@@ -0,0 +1,9 @@
+export default function VerifyPage() {
+  return (
+    <section>
+      <header>
+        <h1>Verify that code already!</h1>
+      </header>
+    </section>
+  )
+}