38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import styles from "./levelSummary.module.css"
|
|
|
|
import type { LevelSummaryProps } from "@/types/components/overviewTable"
|
|
|
|
export default function LevelSummary({
|
|
level,
|
|
showDescription = true,
|
|
}: LevelSummaryProps) {
|
|
const intl = useIntl()
|
|
|
|
const pointsMsg: React.ReactNode = level.required_nights
|
|
? intl.formatMessage<React.ReactNode>(
|
|
{
|
|
id: "{pointsAmount, number} points or {nightsAmount, number} nights",
|
|
},
|
|
{
|
|
pointsAmount: level.required_points,
|
|
nightsAmount: level.required_nights,
|
|
highlight: (str) => <span className={styles.redText}>{str}</span>,
|
|
}
|
|
)
|
|
: intl.formatMessage(
|
|
{ id: "{pointsAmount, number} points" },
|
|
{ pointsAmount: level.required_points }
|
|
)
|
|
|
|
return (
|
|
<div className={styles.levelSummary}>
|
|
<span className={styles.levelRequirements}>{pointsMsg}</span>
|
|
{showDescription && (
|
|
<p className={styles.levelSummaryText}>{level.description}</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|