56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import Link from "next/link";
|
|
import styles from "./memos.module.css";
|
|
|
|
type HeroAction = {
|
|
href: string;
|
|
label: string;
|
|
secondary?: boolean;
|
|
};
|
|
|
|
type CommunityPageHeroProps = {
|
|
eyebrow: string;
|
|
title: string;
|
|
description: string;
|
|
chips?: string[];
|
|
actions?: HeroAction[];
|
|
};
|
|
|
|
export function CommunityPageHero({
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
chips = [],
|
|
actions = [],
|
|
}: CommunityPageHeroProps) {
|
|
return (
|
|
<section className={styles.heroCard}>
|
|
<div className={styles.heroGlow} />
|
|
<span className={styles.heroEyebrow}>{eyebrow}</span>
|
|
<h1 className={styles.heroTitle}>{title}</h1>
|
|
<p className={styles.heroDesc}>{description}</p>
|
|
{chips.length ? (
|
|
<div className={styles.heroChips}>
|
|
{chips.map((chip) => (
|
|
<span key={chip} className={styles.heroChip}>
|
|
{chip}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
{actions.length ? (
|
|
<div className={styles.heroActions}>
|
|
{actions.map((action) => (
|
|
<Link
|
|
key={`${action.href}-${action.label}`}
|
|
href={action.href}
|
|
className={action.secondary ? styles.heroSecondaryAction : styles.heroPrimaryAction}
|
|
>
|
|
{action.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
);
|
|
}
|