57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs'
|
|
import { useState } from 'react'
|
|
import TabSliderPlain from '.'
|
|
|
|
const OPTIONS = [
|
|
{ value: 'analytics', text: 'Analytics' },
|
|
{ value: 'activity', text: 'Recent activity' },
|
|
{ value: 'alerts', text: 'Alerts' },
|
|
]
|
|
|
|
const TabSliderPlainDemo = ({
|
|
initialValue = 'analytics',
|
|
}: {
|
|
initialValue?: string
|
|
}) => {
|
|
const [value, setValue] = useState(initialValue)
|
|
|
|
return (
|
|
<div className="flex w-full max-w-2xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
|
|
<div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Underline tabs</div>
|
|
<TabSliderPlain
|
|
value={value}
|
|
onChange={setValue}
|
|
options={OPTIONS}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const meta = {
|
|
title: 'Base/Navigation/TabSliderPlain',
|
|
component: TabSliderPlainDemo,
|
|
parameters: {
|
|
layout: 'centered',
|
|
docs: {
|
|
description: {
|
|
component: 'Underline-style navigation commonly used in dashboards. Toggle between three sections.',
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
initialValue: {
|
|
control: 'radio',
|
|
options: OPTIONS.map(option => option.value),
|
|
},
|
|
},
|
|
args: {
|
|
initialValue: 'analytics',
|
|
},
|
|
tags: ['autodocs'],
|
|
} satisfies Meta<typeof TabSliderPlainDemo>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Playground: Story = {}
|