feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/Overview/Friend/MembershipNumber/index.tsx

@@ -0,0 +1,35 @@
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { getIntl } from "@/i18n"
+
+import CopyButton from "../../Buttons/CopyButton"
+import { membershipNumberVariants } from "./membershipNumberVariants"
+
+import styles from "./membershipNumber.module.css"
+
+import type { MembershipNumberProps } from "@/types/components/myPages/membershipNumber"
+
+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" asChild>
+          <code>{membership?.membershipNumber ?? "N/A"}</code>
+        </Caption>
+        {membership && (
+          <CopyButton membershipNumber={membership.membershipNumber} />
+        )}
+      </span>
+    </div>
+  )
+}