81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { ContentCard } from "@scandic-hotels/design-system/ContentCard"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { Carousel } from "@/components/Carousel"
|
|
import { CarouselContent } from "@/components/Carousel/CarouselContent"
|
|
import { CarouselDots } from "@/components/Carousel/CarouselDots"
|
|
import { CarouselItem } from "@/components/Carousel/CarouselItem"
|
|
import {
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/Carousel/CarouselNavigation"
|
|
|
|
import styles from "./allCampaigns.module.css"
|
|
|
|
import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
|
|
|
|
interface AllCampaignsProps {
|
|
heading: string
|
|
preamble?: string | null
|
|
cards: {
|
|
url: string
|
|
heading: string
|
|
text: string | null
|
|
image: ImageVaultAsset
|
|
}[]
|
|
}
|
|
|
|
export default function AllCampaigns({
|
|
heading,
|
|
preamble,
|
|
cards,
|
|
}: AllCampaignsProps) {
|
|
if (!cards.length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className={styles.allCampaignsSection}>
|
|
<header className={styles.header}>
|
|
<Typography variant="Title/md">
|
|
<h3 className={styles.heading}>{heading}</h3>
|
|
</Typography>
|
|
{preamble ? (
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p className={styles.preamble}>{preamble}</p>
|
|
</Typography>
|
|
) : null}
|
|
</header>
|
|
<ul className={styles.cardsList}>
|
|
{cards.map(({ url, image, heading, text }) => (
|
|
<li key={url} className={styles.listItem}>
|
|
<ContentCard
|
|
heading={heading}
|
|
image={image}
|
|
bodyText={text || ""}
|
|
link={{ href: url }}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Carousel className={styles.carousel}>
|
|
<CarouselContent>
|
|
{cards.map(({ url, heading, text, image }) => (
|
|
<CarouselItem key={url}>
|
|
<ContentCard
|
|
heading={heading}
|
|
image={image}
|
|
bodyText={text || ""}
|
|
link={{ href: url }}
|
|
/>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious className={styles.navigationButton} />
|
|
<CarouselNext className={styles.navigationButton} />
|
|
<CarouselDots />
|
|
</Carousel>
|
|
</section>
|
|
)
|
|
}
|