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

35 lines
1.0 KiB
TypeScript

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" asChild>
<code>{membership.membershipNumber ?? "N/A"}</code>
</Caption>
{membership && (
<CopyButton membershipNumber={membership.membershipNumber} />
)}
</span>
</div>
)
}