feat(WEB-162): final design for my profile page

2024-06-07 10:36:23 +02:00
parent a7b04df7b6
commit 5f3e417593
96 changed files with 802 additions and 494 deletions
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.module.css
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.module.css
@@ -0,0 +1,36 @@
+.container {
+  background-color: var(--Scandic-Brand-Warm-White);
+  border-radius: var(--Corner-radius-Large);
+  display: grid;
+  gap: var(--Spacing-x3);
+  padding: var(--Spacing-x3);
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x2);
+  justify-content: space-between;
+}
+
+button.btn {
+  border: 1px solid var(--Base-Border-Subtle);
+}
+
+.profile {
+  display: flex;
+  gap: var(--Spacing-x2);
+  justify-content: space-between;
+}
+
+.info {
+  display: grid;
+  gap: var(--Spacing-x-one-and-half) var(--Spacing-x7);
+  grid-template-columns: auto auto;
+}
+
+.item {
+  display: grid;
+  gap: var(--Spacing-x1);
+  grid-template-columns: auto auto 1fr;
+}
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
@@ -1,5 +1,96 @@
-import Profile from "@/components/MyProfile/Profile"
+// import { dt } from "@/lib/dt"
+import { serverClient } from "@/lib/trpc/server"

-export default function ProfileInfo() {
-  return <Profile />
+import {
+  EmailIcon,
+  GlobeIcon,
+  LocationIcon,
+  LockIcon,
+  PhoneIcon,
+} from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+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() {
+  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}>
+        <hgroup>
+          <Title as="h4" color="red" level="h1">
+            {user.name}
+          </Title>
+          <Title as="h4" color="burgundy" level="h2">
+            {user.dateOfBirth}
+          </Title>
+        </hgroup>
+        <Button className={styles.btn} size="large" theme="primaryStrong">
+          {formatMessage({ id: "Edit profile" })}
+        </Button>
+      </header>
+      <Divider color="burgundy" opacity={8} />
+      <section className={styles.profile}>
+        <article className={styles.info}>
+          <div className={styles.item}>
+            <LocationIcon color="burgundy" />
+            <Body color="burgundy" textTransform="bold">
+              {formatMessage({ id: "Address" })}
+            </Body>
+            <Body color="burgundy">
+              {user.address.streetAddress
+                ? `${user.address.streetAddress}, `
+                : ""}
+              {user.address.city ? `${user.address.city}, ` : ""}
+              {user.address.country ? `${user.address.country}` : ""}
+              {!user.address.streetAddress &&
+              !user.address.city &&
+              !user.address.country
+                ? "N/A"
+                : null}
+            </Body>
+          </div>
+          <div className={styles.item}>
+            <EmailIcon color="burgundy" />
+            <Body color="burgundy" textTransform="bold">
+              {formatMessage({ id: "Email" })}
+            </Body>
+            <Body color="burgundy">{user.email}</Body>
+          </div>
+          <div className={styles.item}>
+            <PhoneIcon color="burgundy" />
+            <Body color="burgundy" textTransform="bold">
+              {formatMessage({ id: "Phone number" })}
+            </Body>
+            <Body color="burgundy">{user.phoneNumber}</Body>
+          </div>
+          <div className={styles.item}>
+            <GlobeIcon color="burgundy" />
+            <Body color="burgundy" textTransform="bold">
+              {formatMessage({ id: "Language" })}
+            </Body>
+            <Body color="burgundy">{user.language}</Body>
+          </div>
+        </article>
+        <aside>
+          <div className={styles.item}>
+            <LockIcon color="burgundy" />
+            <Body color="burgundy" textTransform="bold">
+              {formatMessage({ id: "Password" })}
+            </Body>
+            <Body color="burgundy">**********</Body>
+          </div>
+        </aside>
+      </section>
+    </section>
+  )
 }