Merged in feat/best-friend-hero (pull request #338)

Feat(SW-170): Update overview hero

Approved-by: Christel Westerberg

components/MyPages/Blocks/Overview/Friend/MemershipNumber/index.tsx

@@ -0,0 +1,34 @@
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { getIntl } from "@/i18n"
+
+import CopyButton from "../../Buttons/CopyButton"
+import { MembershipNumberProps } from "./membershipNumber"
+import { membershipNumberVariants } from "./membershipNumberVariants"
+
+import styles from "./membershipNumber.module.css"
+
+export default async function MembershipNumber({
+  className,
+  color,
+  membership,
+}: MembershipNumberProps) {
+  const { formatMessage } = await getIntl()
+  const classNames = membershipNumberVariants({ className, color })
+
+  return (
+    <div className={classNames}>
+      <Caption color="pale">
+        {formatMessage({ id: "Membership ID" })}
+        {": "}
+      </Caption>
+      <span className={styles.icon}>
+        <Caption className={styles.icon} color="pale">
+          {membership.membershipNumber ?? "N/A"}
+        </Caption>
+        {membership && (
+          <CopyButton membershipNumber={membership.membershipNumber} />
+        )}
+      </span>
+    </div>
+  )
+}