#Tabs 标签页

import { Input, type TabItem, Tabs } from '@sudden3/leaf-ui';
import { ChartNoAxesColumn, Settings } from 'lucide-react';

const items: readonly TabItem[] = [
  {
    key: 'overview',
    label: '概览',
    icon: <ChartNoAxesColumn />,
    children: <p>查看项目活动、成员和最近更新。</p>,
  },
  {
    key: 'settings',
    label: '设置',
    icon: <Settings />,
    children: <Input aria-label="项目名称" placeholder="输入内容后切换，内容会保留" />,
  },
  { key: 'history', label: '历史', disabled: true, children: null },
];
export function TabsBasic() {
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Tabs aria-label="项目信息" items={items} />
      <Tabs items={items} type="card" size="sm" />
      <Tabs items={items} placement="left" />
    </div>
  );
}

import { Button, type TabItem, Tabs } from '@sudden3/leaf-ui';
import { useRef, useState } from 'react';
export function TabsClosable() {
  const sequence = useRef(2);
  const [items, setItems] = useState<TabItem[]>([
    { key: '1', label: '项目一', children: '项目一的内容', closable: true },
    { key: '2', label: '项目二', children: '项目二的内容', closable: true },
  ]);
  return (
    <Tabs
      items={items}
      type="card"
      onClose={(key) => setItems((list) => list.filter((item) => item.key !== key))}
      extra={
        <Button
          size="sm"
          variant="outline"
          onClick={() => {
            const key = String(++sequence.current);
            setItems((list) => [
              ...list,
              { key, label: `Project ${key}`, children: `Project ${key}`, closable: true },
            ]);
          }}
        >
          新增
        </Button>
      }
    />
  );
}