59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import type { FC } from 'react';
|
|
import { Breadcrumb as AriaBreadcrumb, Breadcrumbs as AriaBreadcrumbs } from 'react-aria-components';
|
|
|
|
export interface BreadcrumbsProps {
|
|
items: string[];
|
|
}
|
|
const Breadcrumbs: FC<BreadcrumbsProps> = (props) => {
|
|
const { items } = props;
|
|
|
|
return (
|
|
<nav aria-label="Breadcrumb">
|
|
<AriaBreadcrumbs className="flex items-center gap-2.5">
|
|
<AriaBreadcrumb aria-label="홈">
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="19"
|
|
height="18"
|
|
viewBox="0 0 19 18"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M6.75 14.4545H4.25V7.83333L9.25 4L14.25 7.83333V14.4545H11.75"
|
|
stroke="#6C7789"
|
|
strokeLinecap="square"
|
|
/>
|
|
<path d="M10.8381 12.9615V10.3633H7.65625V12.9615" stroke="#6C7789" />
|
|
</svg>
|
|
</AriaBreadcrumb>
|
|
{items.map((item, index) => (
|
|
<AriaBreadcrumb
|
|
className="flex items-center gap-2.5 text-xs text-dabeeo-black-47 data-current:text-dabeeo-black-22"
|
|
key={`breadcrumb-${index}-${item}`}
|
|
>
|
|
<>
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="6"
|
|
height="8"
|
|
viewBox="0 0 6 8"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M2.70722 4.00064L0.25 1.54349L1.4556 0.337891L5.12572 4.00064L1.45572 7.66347L0.250117 6.45786L2.70722 4.00064Z"
|
|
fill="#6C7789"
|
|
/>
|
|
</svg>
|
|
{item}
|
|
</>
|
|
</AriaBreadcrumb>
|
|
))}
|
|
</AriaBreadcrumbs>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Breadcrumbs;
|