Card Image Section

1import { ArrowPointer, Button } from "@/registry/brook/ui/button/button";
2import { Card, CardContent, CardDescription, CardFooter, CardImage, CardTitle } from "@/registry/brook/ui/card/card";
3import styles from "./card-image-section.module.css";
4 
5type CardData = {
6  id: number;
7  imageSrc: string;
8  alt: string;
9  title: string;
10  description: string;
11  href?: string;
12};
13 
14type CardImageSectionProps = {
15  data: {
16    caption: string;
17    heading: string;
18    description: string;
19    cards: CardData[];
20  };
21};
22 
23export function CardImageSection({ data }: CardImageSectionProps) {
24  return (
25    <section className={styles.section}>
26      <header className={styles.header}>
27        <span className={styles.caption}>{data.caption}</span>
28        <h2 className={styles.heading}>{data.heading}</h2>
29        <p className={styles.description}>{data.description}</p>
30      </header>
31 
32      <div className={styles.grid}>
33        {data.cards.map((card) => (
34          <Card className={styles.card} key={card.id} variant="lift">
35            <CardImage alt={card.alt} className={styles.cardImage} src={card.imageSrc} />
36 
37            <CardContent>
38              <CardTitle className={styles.cardTitle}>{card.title}</CardTitle>
39              <CardDescription>{card.description}</CardDescription>
40            </CardContent>
41 
42            <CardFooter>
43              <Button className={styles.linkButton} render={<a href={card.href ?? "#"} />} size="sm" variant="link">
44                Learn More
45                <ArrowPointer />
46              </Button>
47            </CardFooter>
48          </Card>
49        ))}
50      </div>
51    </section>
52  );
53}