109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import { cva } from "class-variance-authority"
|
|
|
|
import Card from "@/components/MyProfile/Card"
|
|
import Image from "@/components/Image"
|
|
import LabelAndIcon from "../LabelAndIcon"
|
|
|
|
import styles from "./profile.module.css"
|
|
|
|
import type { ProfileProps } from "@/types/components/myPages/myProfile/profile"
|
|
|
|
const profileStyles = cva(styles.profile)
|
|
|
|
export default function Profile({ className, user, ...props }: ProfileProps) {
|
|
return (
|
|
<Card className={profileStyles({ className })} {...props}>
|
|
<header className={styles.header}>
|
|
<Image
|
|
alt="Account Icon"
|
|
height={40}
|
|
src="/account_circle.svg"
|
|
width={40}
|
|
/>
|
|
<Card.Title uppercase>
|
|
{user.name}
|
|
</Card.Title>
|
|
</header>
|
|
<section className={styles.info}>
|
|
<LabelAndIcon>
|
|
<LabelAndIcon.Icon>SE</LabelAndIcon.Icon>
|
|
<LabelAndIcon.Label>Country</LabelAndIcon.Label>
|
|
<LabelAndIcon.Content>Sweden</LabelAndIcon.Content>
|
|
</LabelAndIcon>
|
|
<LabelAndIcon>
|
|
<LabelAndIcon.Icon>
|
|
<Image
|
|
alt="Calendar Icon"
|
|
height={20}
|
|
src="/calendar_month.svg"
|
|
width={20}
|
|
/>
|
|
</LabelAndIcon.Icon>
|
|
<LabelAndIcon.Label>Date of Birth</LabelAndIcon.Label>
|
|
<LabelAndIcon.Content>27/05/1977</LabelAndIcon.Content>
|
|
</LabelAndIcon>
|
|
<LabelAndIcon>
|
|
<LabelAndIcon.Icon>
|
|
<Image
|
|
alt="Email Icon"
|
|
height={20}
|
|
src="/alternate_email.svg"
|
|
width={20}
|
|
/>
|
|
</LabelAndIcon.Icon>
|
|
<LabelAndIcon.Label>Email</LabelAndIcon.Label>
|
|
<LabelAndIcon.Content>f*********@g****.com</LabelAndIcon.Content>
|
|
</LabelAndIcon>
|
|
<LabelAndIcon>
|
|
<LabelAndIcon.Icon>
|
|
<Image
|
|
alt="Cellphone Icon"
|
|
height={20}
|
|
src="/phone.svg"
|
|
width={20}
|
|
/>
|
|
</LabelAndIcon.Icon>
|
|
<LabelAndIcon.Label>Phone number</LabelAndIcon.Label>
|
|
<LabelAndIcon.Content>+46 ******00</LabelAndIcon.Content>
|
|
</LabelAndIcon>
|
|
<LabelAndIcon>
|
|
<LabelAndIcon.Icon>
|
|
<Image
|
|
alt="House Icon"
|
|
height={20}
|
|
src="/home.svg"
|
|
width={20}
|
|
/>
|
|
</LabelAndIcon.Icon>
|
|
<LabelAndIcon.Label>Address</LabelAndIcon.Label>
|
|
<LabelAndIcon.Content>T***************</LabelAndIcon.Content>
|
|
</LabelAndIcon>
|
|
<LabelAndIcon>
|
|
<LabelAndIcon.Icon>
|
|
<Image
|
|
alt="House Icon"
|
|
height={20}
|
|
src="/home.svg"
|
|
width={20}
|
|
/>
|
|
</LabelAndIcon.Icon>
|
|
<LabelAndIcon.Label>City/State</LabelAndIcon.Label>
|
|
<LabelAndIcon.Content>S*******</LabelAndIcon.Content>
|
|
</LabelAndIcon>
|
|
<LabelAndIcon>
|
|
<LabelAndIcon.Icon>
|
|
<Image
|
|
alt="House Icon"
|
|
height={20}
|
|
src="/home.svg"
|
|
width={20}
|
|
/>
|
|
</LabelAndIcon.Icon>
|
|
<LabelAndIcon.Label>Zip code</LabelAndIcon.Label>
|
|
<LabelAndIcon.Content>1****</LabelAndIcon.Content>
|
|
</LabelAndIcon>
|
|
</section>
|
|
</Card>
|
|
)
|
|
}
|