53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
|
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||
|
|
import { useState } from 'react'
|
||
|
|
import { RiSparklingFill, RiTerminalBoxLine } from '@remixicon/react'
|
||
|
|
import TabSliderNew from '.'
|
||
|
|
|
||
|
|
const OPTIONS = [
|
||
|
|
{ value: 'visual', text: 'Visual builder', icon: <RiSparklingFill className="mr-2 h-4 w-4 text-primary-500" /> },
|
||
|
|
{ value: 'code', text: 'Code', icon: <RiTerminalBoxLine className="mr-2 h-4 w-4 text-text-tertiary" /> },
|
||
|
|
]
|
||
|
|
|
||
|
|
const TabSliderNewDemo = ({
|
||
|
|
initialValue = 'visual',
|
||
|
|
}: {
|
||
|
|
initialValue?: string
|
||
|
|
}) => {
|
||
|
|
const [value, setValue] = useState(initialValue)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex w-full max-w-sm 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">Pill tabs</div>
|
||
|
|
<TabSliderNew value={value} options={OPTIONS} onChange={setValue} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const meta = {
|
||
|
|
title: 'Base/Navigation/TabSliderNew',
|
||
|
|
component: TabSliderNewDemo,
|
||
|
|
parameters: {
|
||
|
|
layout: 'centered',
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
component: 'Rounded pill tabs suited for switching between editors. Icons illustrate mixed text/icon options.',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
argTypes: {
|
||
|
|
initialValue: {
|
||
|
|
control: 'radio',
|
||
|
|
options: OPTIONS.map(option => option.value),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
args: {
|
||
|
|
initialValue: 'visual',
|
||
|
|
},
|
||
|
|
tags: ['autodocs'],
|
||
|
|
} satisfies Meta<typeof TabSliderNewDemo>
|
||
|
|
|
||
|
|
export default meta
|
||
|
|
type Story = StoryObj<typeof meta>
|
||
|
|
|
||
|
|
export const Playground: Story = {}
|