feat(WEB-167): update my pages layout to MVP wireframes

components/MyPages/Blocks/Overview/index.tsx

@@ -1,83 +1,20 @@
-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 Friend from "./Friend"
+import Stats from "./Stats"
 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>
+        <Title uppercase>Good morning</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>
+        <Friend user={user} />
+        <Stats user={user} />
       </section>
     </section>
   )