97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
// import { dt } from "@/lib/dt"
|
|
import { serverClient } from "@/lib/trpc/server"
|
|
|
|
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>
|
|
)
|
|
}
|