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
57
58
59
60
61
62
63
64
65
66
67
68
69
|
import { ReactNode } from "react";
import { Link } from "react-router-dom";
import classNames from "classnames";
import { Text, ThemeColor, useC } from "../common";
import "./TabBar.css";
export interface Tab {
name: string;
text: Text;
link?: string;
onClick?: () => void;
}
export interface TabsProps {
activeTabName?: string;
tabs: Tab[];
color?: ThemeColor;
actions?: ReactNode;
dense?: boolean;
className?: string;
}
export default function TabBar(props: TabsProps) {
const { tabs, color, activeTabName, className, dense, actions } = props;
const c = useC();
return (
<div
className={classNames(
"cru-tab-bar",
dense && "dense",
`cru-clickable-${color ?? "primary"}`,
className,
)}
>
<div className="cru-tab-bar-tab-area">
{tabs.map((tab) => {
const { name, text, link, onClick } = tab;
const active = activeTabName === name;
const className = classNames("cru-tab-bar-item", active && "active");
if (link != null) {
return (
<Link
key={name}
to={link}
onClick={onClick}
className={className}
>
{c(text)}
</Link>
);
} else {
return (
<span key={name} onClick={onClick} className={className}>
{c(text)}
</span>
);
}
})}
</div>
<div className="cru-tab-bar-action-area">{actions}</div>
</div>
);
}
|
