scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WEB-170): edit profile view

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-04-11 18:51:38 +02:00
parent 82e4d40203
commit 9396b2c3d5
114 changed files with 3642 additions and 2171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
components/MyProfile/Profile/index.tsx
View File

@@ -1,108 +1,70 @@
import { cva } from "class-variance-authority"
import { _ } from "@/lib/translation"
import Card from "@/components/MyProfile/Card"
import Image from "@/components/Image"
import LabelAndIcon from "../LabelAndIcon"
import {
CalendarIcon,
EmailIcon,
HouseIcon,
PhoneIcon,
} from "@/components/Icons"
import Container from "./Container"
import Field from "../Field"
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) {
export default function Profile(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>
<Container {...props}>
<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>
<Field>
<Field.Icon>SE</Field.Icon>
<Field.TextLabel>{_("Country")}</Field.TextLabel>
<Field.Content>Sweden</Field.Content>
</Field>
<Field>
<Field.Icon>
<CalendarIcon />
</Field.Icon>
<Field.TextLabel>{_("Date of Birth")}</Field.TextLabel>
<Field.Content>27/05/1977</Field.Content>
</Field>
<Field>
<Field.Icon>
<EmailIcon />
</Field.Icon>
<Field.TextLabel>{_("Email")}</Field.TextLabel>
<Field.Content>f*********@g****.com</Field.Content>
</Field>
<Field>
<Field.Icon>
<PhoneIcon />
</Field.Icon>
<Field.TextLabel>{_("Phone number")}</Field.TextLabel>
<Field.Content>+46 ******00</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>{_("Address")}</Field.TextLabel>
<Field.Content>T***************</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>{_("City/State")}</Field.TextLabel>
<Field.Content>S*******</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>{_("Zip code")}</Field.TextLabel>
<Field.Content>1****</Field.Content>
</Field>
</section>
</Card>
</Container>
)
}