36 lines
774 B
TypeScript
36 lines
774 B
TypeScript
import { ReactNode } from "react";
|
|
|
|
type TabItem = {
|
|
key: string;
|
|
title: string;
|
|
content: ReactNode;
|
|
};
|
|
|
|
type TabsProps = {
|
|
items: TabItem[];
|
|
active: string;
|
|
onChange: (key: string) => void;
|
|
};
|
|
|
|
export default function Tabs({ items, active, onChange }: TabsProps) {
|
|
return (
|
|
<div>
|
|
<ul className="nav nav-tabs mb-3">
|
|
{items.map((item) => (
|
|
<li key={item.key} className="nav-item">
|
|
<button
|
|
className={`nav-link ${item.key === active ? "active" : ""}`}
|
|
onClick={() => onChange(item.key)}
|
|
>
|
|
{item.title}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div>
|
|
{items.find((item) => item.key === active)?.content}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|