38 lines
983 B
TypeScript
38 lines
983 B
TypeScript
import styles from "./DetailBanner.module.css";
|
|
|
|
export default function DetailBanner({
|
|
title,
|
|
breadcrumbs,
|
|
}: {
|
|
title: string;
|
|
breadcrumbs: string[];
|
|
}) {
|
|
return (
|
|
<section className={styles.bannerWrap}>
|
|
<div className={styles.banner}>
|
|
<h1 className={styles.bannerTitle}>{title}</h1>
|
|
<nav className={styles.crumbs} aria-label="Breadcrumb">
|
|
{breadcrumbs.map((crumb, index) => (
|
|
<span key={`${crumb}-${index}`}>
|
|
{index > 0 ? (
|
|
<img
|
|
className={styles.crumbChevron}
|
|
src="/images/icons/chevron.svg"
|
|
alt=""
|
|
/>
|
|
) : null}
|
|
<span
|
|
className={
|
|
index === breadcrumbs.length - 1 ? styles.crumbActive : undefined
|
|
}
|
|
>
|
|
{crumb}
|
|
</span>
|
|
</span>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|