70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import { ChevronRightIcon, CloseLargeIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import { AlertProps } from "./alert"
|
|
import { getIconByAlertType } from "./utils"
|
|
import { alertVariants } from "./variants"
|
|
|
|
import styles from "./alert.module.css"
|
|
|
|
export default async function Alert({
|
|
className,
|
|
variant,
|
|
type,
|
|
heading,
|
|
text,
|
|
sidePeekCtaText,
|
|
sidepeekContent,
|
|
closeable = false,
|
|
}: AlertProps) {
|
|
const classNames = alertVariants({
|
|
className,
|
|
variant,
|
|
type,
|
|
})
|
|
const intl = await getIntl()
|
|
|
|
const Icon = getIconByAlertType(type)
|
|
|
|
return (
|
|
<div className={classNames}>
|
|
<span className={styles.iconWrapper}>
|
|
<Icon className={styles.icon} width={24} height={24} />
|
|
</span>
|
|
<div className={styles.content}>
|
|
<div className={styles.textWrapper}>
|
|
{heading ? (
|
|
<Body className={styles.heading} textTransform="bold" asChild>
|
|
<h2>{heading}</h2>
|
|
</Body>
|
|
) : null}
|
|
<Body className={styles.text}>{text}</Body>
|
|
</div>
|
|
{sidePeekCtaText ? (
|
|
<Button
|
|
theme="base"
|
|
variant="icon"
|
|
intent="text"
|
|
size="small"
|
|
wrapping
|
|
className={styles.sidepeekCta}
|
|
>
|
|
{sidePeekCtaText}
|
|
<ChevronRightIcon />
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
{closeable ? (
|
|
<button
|
|
className={styles.closeButton}
|
|
aria-label={intl.formatMessage({ id: "Close" })}
|
|
>
|
|
<CloseLargeIcon />
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|