110 lines
2.7 KiB
TypeScript
110 lines
2.7 KiB
TypeScript
import * as React from 'react'
|
|
import { cva, type VariantProps } from 'class-variance-authority'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const footerVariants = cva(
|
|
'border-t border-border bg-background font-sans',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
minimal: 'py-8',
|
|
full: 'py-12',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'minimal',
|
|
},
|
|
},
|
|
)
|
|
|
|
interface FooterLinkGroup {
|
|
title: string
|
|
links: { label: string; href: string }[]
|
|
}
|
|
|
|
interface FooterProps
|
|
extends React.ComponentProps<'footer'>,
|
|
VariantProps<typeof footerVariants> {
|
|
logo?: React.ReactNode
|
|
copyright?: React.ReactNode
|
|
linkGroups?: FooterLinkGroup[]
|
|
actions?: React.ReactNode
|
|
}
|
|
|
|
function Footer({
|
|
className,
|
|
variant,
|
|
logo,
|
|
copyright,
|
|
linkGroups,
|
|
actions,
|
|
children,
|
|
...props
|
|
}: FooterProps) {
|
|
if (variant === 'full' && linkGroups) {
|
|
return (
|
|
<footer
|
|
data-slot="footer"
|
|
className={cn(footerVariants({ variant, className }))}
|
|
{...props}
|
|
>
|
|
<div className="container mx-auto px-6">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
|
|
{logo && (
|
|
<div className="col-span-2 md:col-span-1">
|
|
{logo}
|
|
</div>
|
|
)}
|
|
{linkGroups.map((group) => (
|
|
<div key={group.title}>
|
|
<h4 className="text-sm font-semibold mb-4">{group.title}</h4>
|
|
<ul className="space-y-2">
|
|
{group.links.map((link) => (
|
|
<li key={link.href}>
|
|
<a
|
|
href={link.href}
|
|
className="text-sm text-muted-foreground hover:text-primary transition-colors"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="border-t border-border pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
|
|
{copyright && (
|
|
<p className="text-sm text-muted-foreground">{copyright}</p>
|
|
)}
|
|
{actions}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<footer
|
|
data-slot="footer"
|
|
className={cn(footerVariants({ variant, className }))}
|
|
{...props}
|
|
>
|
|
<div className="container mx-auto px-6">
|
|
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
|
{logo && <div>{logo}</div>}
|
|
{copyright && (
|
|
<p className="text-sm text-muted-foreground">{copyright}</p>
|
|
)}
|
|
{actions}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|
|
|
|
export { Footer, footerVariants }
|