web/components/MyPages/Blocks/Overview/Friend/MemberShipLevel/index.tsx

import { membershipLevels } from "@/constants/membershipLevels"

import {
  BestFriend,
  CloseFriend,
  DearFriend,
  GoodFriend,
  LoyalFriend,
  NewFriend,
  TrueFriend,
} from "@/components/Levels"

import styles from "./membershipLevel.module.css"

import type { MembershipLevelProps } from "@/types/components/myPages/membershipLevel"

export default function MembershipLevel({ level }: MembershipLevelProps) {
  switch (level) {
    case membershipLevels.L1:
      return <NewFriend className={styles.level} color="pale" />
    case membershipLevels.L2:
      return <GoodFriend className={styles.level} color="pale" />
    case membershipLevels.L3:
      return <CloseFriend className={styles.level} color="pale" />
    case membershipLevels.L4:
      return <DearFriend className={styles.level} color="pale" />
    case membershipLevels.L5:
      return <LoyalFriend className={styles.level} color="pale" />
    case membershipLevels.L6:
      return <TrueFriend className={styles.level} color="pale" />
    case membershipLevels.L7:
      return <BestFriend className={styles.level} color="pale" />
    default:
      return null
  }
}