feat: Tabs (0.7.0)
This commit is contained in:
@@ -0,0 +1,44 @@
|
||||
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' }
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user