1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
import React, { Children, FC } from "react";
import Link from '../Link';
import styles from './breadcrumbs.module.scss';
import clsx from 'clsx';
export type BreadCrumbsProps = {
className?: string;
style?: object;
children: React.ReactNode;
};
const BreadCrumbs : FC<BreadCrumbsProps> = ({children, className, style, ...props}) => (
<span style={{ whiteSpace: 'nowrap', ...style }} className={clsx(styles.breadcrumbs, className)} {...props}>
{Children.map(children, (child, index) => {
return (
<>
{
index !== 0 ? (
<span className={styles.divider}>/</span>
) : undefined
}
{child}
</>
);
})}
</span>
);
export type CrumbProps = {
children: React.ReactNode;
};
const Crumb : FC<CrumbProps> = ({children, ...props}) => (
<span className={styles.crumb} {...props}>
{children}
</span>
);
export type LinkCrumbProps = {
href: string;
children: React.ReactNode;
}
const LinkCrumb : FC<LinkCrumbProps> = ({children, href, ...props}) => (
<Crumb>
<Link href={href}>
{children}
</Link>
</Crumb>
);
export {
Crumb,
BreadCrumbs,
LinkCrumb
};
|
