Files
web/components/MyPages/Blocks/Overview/Friend/index.tsx
2024-08-27 07:41:59 +02:00

55 lines
1.8 KiB
TypeScript

import { membershipLevels } from "@/constants/membershipLevels"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembership, isHighestMembership } from "@/utils/user"
import { MembershipNumberProps } from "./MemershipNumber/membershipNumber"
import MembershipLevel from "./MembershipLevel"
import MembershipNumber from "./MemershipNumber"
import styles from "./friend.module.css"
import type { UserProps } from "@/types/components/myPages/user"
export default async function Friend({
user,
color,
}: UserProps & Pick<MembershipNumberProps, "color">) {
const { formatMessage } = await getIntl()
const membership = getMembership(user.memberships)
if (!membership?.membershipLevel) {
return null
}
// @ts-expect-error: membershiplevel needs proper fix
const isHighestLevel = isHighestMembership(membership.membershipLevel)
return (
<section className={styles.friend}>
<header className={styles.header}>
<Body color="white" textTransform="bold" textAlign="center">
{formatMessage(
isHighestLevel
? { id: "Highest level" }
: // @ts-expect-error: membershiplevel needs proper fix
{ id: `Level ${membershipLevels[membership.membershipLevel]}` }
)}
</Body>
{membership ? (
<MembershipLevel
// @ts-expect-error: membershiplevel needs proper fix
level={membershipLevels[membership.membershipLevel]}
/>
) : null}
</header>
<div className={styles.membership}>
<Title className={styles.name} color="pale" level="h3">
{user.name}
</Title>
<MembershipNumber membership={membership} color={color} />
</div>
</section>
)
}