#Tabs

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

const items: readonly TabItem[] = [
  {
    key: 'overview',
    label: 'Overview',
    icon: <ChartNoAxesColumn />,
    children: <p>View project activity, members and recent updates.</p>,
  },
  {
    key: 'settings',
    label: 'Settings',
    icon: <Settings />,
    children: (
      <Input
        aria-label="Project name"
        placeholder="Type, switch tabs, and your draft is preserved"
      />
    ),
  },
  { key: 'history', label: 'History', disabled: true, children: null },
];
export function TabsBasic() {
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Tabs aria-label="Project information" 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: 'First project', children: 'First project content', closable: true },
    { key: '2', label: 'Second project', children: 'Second project content', 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 },
            ]);
          }}
        >
          Add
        </Button>
      }
    />
  );
}