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

components/MyPages/Blocks/Overview/Buttons/CopyButton.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Image from "@/components/Image"
+
+import type { User } from "@/types/user"
+
+export default function CopyButton({
+  membershipId,
+}: Pick<User, "membershipId">) {
+  function handleCopy() {
+    console.log(`COPIED! (${membershipId})`)
+  }
+
+  return (
+    <Button onClick={handleCopy} type="button" variant="icon">
+      <Image alt="Copy Icon" height={20} src="/copy.svg" width={20} />
+    </Button>
+  )
+}

components/MyPages/Blocks/Overview/Buttons/MembershipCardButton.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Image from "@/components/Image"
+
+import styles from "./btn.module.css"
+
+export default function MembershipCardButton() {
+  function handleShowMembershipCard() {
+    console.log(`Showing membership card`)
+  }
+  return (
+    <Button
+      className={styles.membershipBtn}
+      onClick={handleShowMembershipCard}
+      type="button"
+    >
+      <span>Membership Card</span>
+      <Image alt="QR icon" height={20} src="/qr.svg" width={20} />
+    </Button>
+  )
+}

components/MyPages/Blocks/Overview/Buttons/btn.module.css

@@ -0,0 +1,5 @@
+@media screen and (max-width: 950px) {
+  .membershipBtn {
+    display: none;
+  }
+}