Files
web/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
2024-06-05 13:25:10 +02:00

43 lines
1.4 KiB
TypeScript

import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import Contact from "./Contact"
import styles from "./joinLoyalty.module.css"
import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar"
export default async function JoinLoyaltyContact({
block,
}: JoinLoyaltyContactProps) {
const { formatMessage } = await getIntl()
return (
<div className={styles.container}>
<div className={styles.wrapper}>
<Title level="h3">{block.title}</Title>
<Image
alt="Scandic Friends"
className={styles.image}
height={65}
src="/_static/icons/scandic-friends.png"
width={203}
/>
{block.preamble && <p className={styles.preamble}>{block.preamble}</p>}
<Button intent="primary">
<span>{formatMessage({ id: "Join Scandic Friends" })}</span>
</Button>
<div className={styles.linkContainer}>
<Link href="/login" className={styles.loginLink}>
{formatMessage({ id: "Already a friend?" })} <br />
{formatMessage({ id: "Click here to log in" })}
</Link>
</div>
</div>
{block.contact && <Contact contactBlock={block.contact} />}
</div>
)
}