36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
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>
|
|
)
|
|
}
|