93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import { Footer } from '@/components/ui/footer'
|
|
import { Logo } from '@/components/ui/logo'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
const meta = {
|
|
title: 'Composition/Footer',
|
|
component: Footer,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'fullscreen' },
|
|
argTypes: {
|
|
variant: {
|
|
control: 'select',
|
|
options: ['minimal', 'full'],
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Footer>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Minimal: Story = {
|
|
args: {
|
|
variant: 'minimal',
|
|
logo: <Logo size="sm" />,
|
|
copyright: <>© 2026 Greyhaven. All rights reserved.</>,
|
|
actions: (
|
|
<div className="flex gap-4 text-sm text-muted-foreground">
|
|
<a href="#" className="hover:text-foreground transition-colors">Privacy</a>
|
|
<a href="#" className="hover:text-foreground transition-colors">Terms</a>
|
|
<a href="#" className="hover:text-foreground transition-colors">Contact</a>
|
|
</div>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const Full: Story = {
|
|
args: {
|
|
variant: 'full',
|
|
logo: <Logo size="md" />,
|
|
copyright: <>© 2026 Greyhaven. All rights reserved.</>,
|
|
linkGroups: [
|
|
{
|
|
title: 'Product',
|
|
links: [
|
|
{ label: 'Features', href: '#' },
|
|
{ label: 'Pricing', href: '#' },
|
|
{ label: 'Changelog', href: '#' },
|
|
{ label: 'Docs', href: '#' },
|
|
],
|
|
},
|
|
{
|
|
title: 'Company',
|
|
links: [
|
|
{ label: 'About', href: '#' },
|
|
{ label: 'Blog', href: '#' },
|
|
{ label: 'Careers', href: '#' },
|
|
{ label: 'Contact', href: '#' },
|
|
],
|
|
},
|
|
{
|
|
title: 'Legal',
|
|
links: [
|
|
{ label: 'Privacy Policy', href: '#' },
|
|
{ label: 'Terms of Service', href: '#' },
|
|
{ label: 'Cookie Policy', href: '#' },
|
|
],
|
|
},
|
|
],
|
|
actions: (
|
|
<div className="flex gap-2">
|
|
<Button variant="ghost" size="sm">Twitter</Button>
|
|
<Button variant="ghost" size="sm">GitHub</Button>
|
|
<Button variant="ghost" size="sm">Discord</Button>
|
|
</div>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const MinimalNoCopyright: Story = {
|
|
args: {
|
|
variant: 'minimal',
|
|
logo: <Logo size="sm" />,
|
|
actions: (
|
|
<div className="flex gap-4 text-sm text-muted-foreground">
|
|
<a href="#" className="hover:text-foreground transition-colors">Docs</a>
|
|
<a href="#" className="hover:text-foreground transition-colors">GitHub</a>
|
|
</div>
|
|
),
|
|
},
|
|
}
|