95 lines
1.8 KiB
TypeScript
95 lines
1.8 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import { Navbar, NavbarLink } from '@/components/ui/navbar'
|
|
import { Logo } from '@/components/ui/logo'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
const meta = {
|
|
title: 'Navigation/Navbar',
|
|
component: Navbar,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'fullscreen' },
|
|
argTypes: {
|
|
variant: {
|
|
control: 'select',
|
|
options: ['solid', 'transparent', 'minimal'],
|
|
},
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<div className="min-h-[200px]">
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
} satisfies Meta<typeof Navbar>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const navLinks = (
|
|
<>
|
|
<NavbarLink href="#" active>Home</NavbarLink>
|
|
<NavbarLink href="#">About</NavbarLink>
|
|
<NavbarLink href="#">Services</NavbarLink>
|
|
<NavbarLink href="#">Contact</NavbarLink>
|
|
</>
|
|
)
|
|
|
|
const navActions = (
|
|
<>
|
|
<Button variant="ghost" size="sm">Log in</Button>
|
|
<Button size="sm">Sign up</Button>
|
|
</>
|
|
)
|
|
|
|
export const Solid: Story = {
|
|
args: {
|
|
variant: 'solid',
|
|
logo: <Logo size="sm" />,
|
|
actions: navActions,
|
|
children: navLinks,
|
|
},
|
|
}
|
|
|
|
export const Transparent: Story = {
|
|
args: {
|
|
variant: 'transparent',
|
|
logo: <Logo size="sm" />,
|
|
actions: navActions,
|
|
children: navLinks,
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<div className="min-h-[200px] bg-gradient-to-br from-primary/20 to-primary/5">
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
}
|
|
|
|
export const Minimal: Story = {
|
|
args: {
|
|
variant: 'minimal',
|
|
logo: <Logo size="sm" />,
|
|
actions: navActions,
|
|
children: navLinks,
|
|
},
|
|
}
|
|
|
|
export const WithoutActions: Story = {
|
|
args: {
|
|
variant: 'solid',
|
|
logo: <Logo size="sm" />,
|
|
children: navLinks,
|
|
},
|
|
}
|
|
|
|
export const LogoOnly: Story = {
|
|
args: {
|
|
variant: 'solid',
|
|
logo: <Logo size="sm" />,
|
|
actions: navActions,
|
|
},
|
|
}
|