mirror of
https://github.com/vercel/commerce.git
synced 2025-05-12 04:37:51 +00:00
32 lines
702 B
TypeScript
32 lines
702 B
TypeScript
import { VariantProps, tv } from 'tailwind-variants';
|
|
|
|
const heading = tv(
|
|
{
|
|
base: [''],
|
|
variants: {
|
|
size: {
|
|
sm: 'text-heading-sm',
|
|
md: 'text-heading-md',
|
|
lg: 'text-heading-lg'
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
size: 'md'
|
|
}
|
|
},
|
|
{
|
|
twMerge: false
|
|
}
|
|
);
|
|
|
|
export interface HeadingProps extends VariantProps<typeof heading> {
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p';
|
|
}
|
|
|
|
export default function Heading({ children, className, size, as }: HeadingProps) {
|
|
const Component = as || 'h2';
|
|
return <Component className={heading({ size, className })}>{children}</Component>;
|
|
}
|