90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
|
|
import { cardVariants } from "./variants"
|
|
|
|
import styles from "./card.module.css"
|
|
|
|
import type { ButtonProps } from "@/components/TempDesignSystem/Button/button"
|
|
import type { CardProps } from "./card"
|
|
|
|
export default function Card({
|
|
primaryButton,
|
|
secondaryButton,
|
|
scriptedTopTitle,
|
|
heading,
|
|
bodyText,
|
|
className,
|
|
theme,
|
|
}: CardProps) {
|
|
let buttonTheme: ButtonProps["theme"] = "primaryLight"
|
|
|
|
switch (theme) {
|
|
case "one":
|
|
buttonTheme = "primaryLight"
|
|
break
|
|
case "two":
|
|
buttonTheme = "secondaryLight"
|
|
break
|
|
case "three":
|
|
buttonTheme = "tertiaryLight"
|
|
break
|
|
}
|
|
|
|
return (
|
|
<article
|
|
className={cardVariants({
|
|
className,
|
|
theme,
|
|
})}
|
|
>
|
|
{scriptedTopTitle ? (
|
|
<section className={styles.scriptContainer}>
|
|
<BiroScript className={styles.scriptedTitle} type="two">
|
|
{scriptedTopTitle}
|
|
</BiroScript>
|
|
</section>
|
|
) : null}
|
|
<Title as="h5" className={styles.heading} level="h3">
|
|
{heading}
|
|
</Title>
|
|
{bodyText ? (
|
|
<Body className={styles.bodyText} textAlign="center">
|
|
{bodyText}
|
|
</Body>
|
|
) : null}
|
|
<div className={styles.buttonContainer}>
|
|
{primaryButton ? (
|
|
<Button asChild theme={buttonTheme} size="small">
|
|
<Link
|
|
href={primaryButton.href}
|
|
target={primaryButton.openInNewTab ? "_blank" : undefined}
|
|
>
|
|
{primaryButton.title}
|
|
</Link>
|
|
</Button>
|
|
) : null}
|
|
{secondaryButton ? (
|
|
<Button
|
|
asChild
|
|
theme={buttonTheme}
|
|
size="small"
|
|
intent="secondary"
|
|
disabled
|
|
>
|
|
<Link
|
|
href={secondaryButton.href}
|
|
target={secondaryButton.openInNewTab ? "_blank" : undefined}
|
|
>
|
|
{secondaryButton.title}
|
|
</Link>
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|