94 lines
2.2 KiB
TypeScript
94 lines
2.2 KiB
TypeScript
import Title from "@/components/Title"
|
|
|
|
import Button from "../Button"
|
|
import { ButtonProps } from "../Button/button"
|
|
import Divider from "../Divider"
|
|
import Link from "../Link"
|
|
import { CardProps } from "./card"
|
|
import { cardVariants } from "./variants"
|
|
|
|
import styles from "./card.module.css"
|
|
|
|
export default function Card({
|
|
primaryButton,
|
|
secondaryButton,
|
|
scriptedTopTitle,
|
|
heading,
|
|
bodyText,
|
|
backgroundImage,
|
|
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}>
|
|
<Title level="h3" weight="semiBold" className={styles.scriptedTitle}>
|
|
{scriptedTopTitle}
|
|
</Title>
|
|
<Divider className={styles.divider} />
|
|
</section>
|
|
) : null}
|
|
{heading ? (
|
|
<Title
|
|
level="h3"
|
|
as="h5"
|
|
weight="semiBold"
|
|
uppercase
|
|
className={styles.heading}
|
|
>
|
|
{heading}
|
|
</Title>
|
|
) : null}
|
|
{bodyText ? <p className={styles.bodyText}>{bodyText}</p> : 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>
|
|
)
|
|
}
|