85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
import CopyButton from "./CopyButton"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Image from "@/components/Image"
|
|
import MembershipCardButton from "./MembershipCardButton"
|
|
import ProgressBar from "@/components/TempDesignSystem/ProgressBar"
|
|
import Title from "@/components/MyPages/Title"
|
|
|
|
import styles from "./overview.module.css"
|
|
|
|
import type { OverviewProps } from "@/types/components/myPages/overview"
|
|
import Link from "next/link"
|
|
|
|
export default function Overview({ user }: OverviewProps) {
|
|
return (
|
|
<section className={styles.container}>
|
|
<header className={styles.header}>
|
|
<Title uppercase>Good morning {user.name}</Title>
|
|
</header>
|
|
<section className={styles.overview}>
|
|
<section className={styles.friend}>
|
|
<p className={styles.level}>Current level:</p>
|
|
<Image
|
|
alt="Good Friend"
|
|
height={70}
|
|
src="/good-friend.svg"
|
|
width={228}
|
|
/>
|
|
<h3 className={styles.name}>{user.name}</h3>
|
|
<div className={styles.membershipContainer}>
|
|
<p className={styles.membershipId}>{user.membershipId}</p>
|
|
<CopyButton membershipId={user.membershipId} />
|
|
</div>
|
|
<MembershipCardButton />
|
|
</section>
|
|
<section className={styles.stats}>
|
|
<div>
|
|
<h4 className={styles.pointsTitle}>Total Points</h4>
|
|
<Divider variant="dotted" />
|
|
<p className={styles.points}>{user.points}</p>
|
|
</div>
|
|
<div className={styles.qualifyingPoints}>
|
|
<h4 className={styles.pointsTitle}>Progress</h4>
|
|
<Divider variant="dotted" />
|
|
<div className={styles.pointsContainer}>
|
|
<div className={styles.pointsProgress}>
|
|
<Image
|
|
alt="Arrow Up Icon"
|
|
height={24}
|
|
src="/arrow_upward.svg"
|
|
width={24}
|
|
/>
|
|
<p className={styles.point}>{user.qualifyingPoints}</p>
|
|
<h5 className={styles.pointsProgressTitle}>
|
|
Qualifying points
|
|
</h5>
|
|
</div>
|
|
<div className={styles.pointsProgress}>
|
|
<Image
|
|
alt="Arrow Up Icon"
|
|
height={24}
|
|
src="/arrow_upward.svg"
|
|
width={24}
|
|
/>
|
|
<p className={styles.point}>{user.nights}</p>
|
|
<h5 className={styles.pointsProgressTitle}>Nights</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.progress}>
|
|
<ProgressBar className={styles.progressbar} progress={70} />
|
|
<h4 className={styles.progressTitle}>Progress</h4>
|
|
<p className={styles.pointsRemaining}>
|
|
14 680 points until next level
|
|
</p>
|
|
<p className={styles.target}>Close friend</p>
|
|
</div>
|
|
</section>
|
|
<Link className={styles.link} href="#">
|
|
Go to my points
|
|
</Link>
|
|
</section>
|
|
</section>
|
|
)
|
|
}
|