Тимур Городецкий
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { useState } from 'react';
|
|
import { Tabs, ITab } from './Tabs';
|
|
|
|
const QUEUE: ITab[] = [
|
|
{ id: 'pending', label: 'На согласовании у меня', count: 1 },
|
|
{ id: 'mine', label: 'Инициализированные мной', count: 71 },
|
|
{ id: 'approved', label: 'Согласованные мной', count: 4 }
|
|
];
|
|
|
|
const meta: Meta<typeof Tabs> = {
|
|
title: 'Навигация/Tabs',
|
|
component: Tabs,
|
|
tags: ['autodocs']
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof Tabs>;
|
|
|
|
// Вкладки-очереди реестра (как в дашборде myDocuments).
|
|
export const Queues: Story = {
|
|
render: () => {
|
|
const [active, setActive] = useState<string | number>('pending');
|
|
return <Tabs tabs={QUEUE} activeId={active} onChange={setActive} />;
|
|
}
|
|
};
|
|
|
|
// Вкладки категорий с иконками.
|
|
export const WithIcons: Story = {
|
|
render: () => {
|
|
const [active, setActive] = useState<string | number>('rec');
|
|
return (
|
|
<Tabs
|
|
activeId={active}
|
|
onChange={setActive}
|
|
tabs={[
|
|
{ id: 'rec', label: 'Отдел рекрутинга', icon: 'people' },
|
|
{ id: 'it', label: 'IT', icon: 'monitor' },
|
|
{ id: 'buh', label: 'Бухгалтерия', icon: 'calculator' }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
};
|