feat(WEB-162): final design edit profile page

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

@@ -1,4 +1,4 @@
-// import { dt } from "@/lib/dt"
+import { profileEdit } from "@/constants/routes/myPages"
 import { serverClient } from "@/lib/trpc/server"
 
 import {
@@ -8,36 +8,41 @@ import {
   LockIcon,
   PhoneIcon,
 } from "@/components/Icons"
+import Header from "@/components/Profile/Header"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import styles from "./page.module.css"
 
-export default async function Profile() {
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function Profile({ params }: PageArgs<LangParams>) {
   const { formatMessage } = await getIntl()
   const user = await serverClient().user.get()
   if (!user) {
     return null
   }
-  // const dob = dt(user.dateOfBirth).format("DD/MM/YYYY")
   return (
-    <section className={styles.container}>
-      <header className={styles.header}>
+    <>
+      <Header>
         <hgroup>
-          <Title as="h4" color="red" level="h1">
-            {user.name}
+          <Title as="h4" color="peach80" level="h1">
+            {formatMessage({ id: "Welcome" })}
           </Title>
           <Title as="h4" color="burgundy" level="h2">
-            {user.dateOfBirth}
+            {user.name}
           </Title>
         </hgroup>
-        <Button className={styles.btn} size="large" theme="primaryStrong">
-          {formatMessage({ id: "Edit profile" })}
+        <Button asChild intent="secondary" size="small" theme="base">
+          <Link color="none" href={profileEdit[params.lang]}>
+            {formatMessage({ id: "Edit profile" })}
+          </Link>
         </Button>
-      </header>
+      </Header>
       <Divider color="burgundy" opacity={8} />
       <section className={styles.profile}>
         <article className={styles.info}>
@@ -91,6 +96,6 @@ export default async function Profile() {
           </div>
         </aside>
       </section>
-    </section>
+    </>
   )
 }