37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { cn } from './utils';
|
|
import type { VariantProps } from 'class-variance-authority';
|
|
import { cva } from 'class-variance-authority';
|
|
import type { HTMLAttributes, PropsWithChildren } from 'react';
|
|
import { forwardRef } from 'react';
|
|
|
|
const variants = cva('font-bold leading-7 text-gray-900 sm:truncate sm:tracking-tight', {
|
|
defaultVariants: {
|
|
size: 1,
|
|
},
|
|
variants: {
|
|
size: {
|
|
1: 'text-lg sm:text-xl',
|
|
2: 'text-xl sm:text-2xl',
|
|
3: 'text-2xl sm:text-3xl',
|
|
4: 'text-3xl sm:text-4xl',
|
|
5: 'text-4xl sm:text-5xl',
|
|
6: 'text-5xl sm:text-6xl',
|
|
7: 'text-6xl sm:text-7xl',
|
|
8: 'text-7xl sm:text-8xl',
|
|
9: 'text-8xl sm:text-9xl',
|
|
},
|
|
},
|
|
});
|
|
|
|
export type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
|
|
VariantProps<typeof variants> &
|
|
PropsWithChildren;
|
|
|
|
export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
|
|
({ children, className, size, ...props }, ref) => (
|
|
<h1 className={cn(variants({ className, size }))} ref={ref} {...props}>
|
|
{children}
|
|
</h1>
|
|
)
|
|
);
|