112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import { Hero } from '@/components/ui/hero'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
const meta = {
|
|
title: 'Composition/Hero',
|
|
component: Hero,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'fullscreen' },
|
|
argTypes: {
|
|
variant: {
|
|
control: 'select',
|
|
options: ['centered', 'left-aligned', 'split'],
|
|
},
|
|
background: {
|
|
control: 'select',
|
|
options: ['default', 'muted', 'accent', 'dark'],
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Hero>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const defaultActions = (
|
|
<>
|
|
<Button size="lg">Get Started</Button>
|
|
<Button size="lg" variant="outline">Learn More</Button>
|
|
</>
|
|
)
|
|
|
|
export const Centered: Story = {
|
|
args: {
|
|
variant: 'centered',
|
|
heading: 'Build better products with Greyhaven',
|
|
subheading:
|
|
'A modern design system that helps you create consistent, accessible, and beautiful user interfaces.',
|
|
actions: defaultActions,
|
|
},
|
|
}
|
|
|
|
export const LeftAligned: Story = {
|
|
args: {
|
|
variant: 'left-aligned',
|
|
heading: 'Ship faster with confidence',
|
|
subheading:
|
|
'Pre-built components, design tokens, and patterns so your team can focus on what matters.',
|
|
actions: defaultActions,
|
|
},
|
|
}
|
|
|
|
export const Split: Story = {
|
|
args: {
|
|
variant: 'split',
|
|
heading: 'Design meets engineering',
|
|
subheading:
|
|
'Bridging the gap between design and code with a shared language of components and tokens.',
|
|
actions: defaultActions,
|
|
media: (
|
|
<div className="w-full aspect-video bg-muted rounded-lg flex items-center justify-center text-muted-foreground">
|
|
Image / Media Placeholder
|
|
</div>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const MutedBackground: Story = {
|
|
args: {
|
|
variant: 'centered',
|
|
background: 'muted',
|
|
heading: 'Welcome to the platform',
|
|
subheading: 'Everything you need to build and scale your project.',
|
|
actions: defaultActions,
|
|
},
|
|
}
|
|
|
|
export const AccentBackground: Story = {
|
|
args: {
|
|
variant: 'centered',
|
|
background: 'accent',
|
|
heading: 'Start building today',
|
|
subheading: 'Join thousands of developers using our design system.',
|
|
actions: defaultActions,
|
|
},
|
|
}
|
|
|
|
export const DarkBackground: Story = {
|
|
args: {
|
|
variant: 'centered',
|
|
background: 'dark',
|
|
heading: 'The future of design systems',
|
|
subheading: 'A bold new approach to building consistent user interfaces at scale.',
|
|
actions: (
|
|
<>
|
|
<Button size="lg" variant="secondary">Get Started</Button>
|
|
<Button size="lg" variant="outline" className="border-background/20 text-background hover:bg-background/10">
|
|
Learn More
|
|
</Button>
|
|
</>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const WithoutActions: Story = {
|
|
args: {
|
|
variant: 'centered',
|
|
heading: 'A hero section without action buttons',
|
|
subheading: 'Sometimes you just need a heading and description.',
|
|
},
|
|
}
|