69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import * as React from 'react';
|
|
|
|
import type { SlateElementProps } from 'platejs';
|
|
|
|
import { type VariantProps, cva } from 'class-variance-authority';
|
|
import { SlateElement } from 'platejs';
|
|
|
|
const headingVariants = cva('relative mb-1', {
|
|
variants: {
|
|
variant: {
|
|
h1: 'mt-[1.6em] pb-1 font-heading text-4xl font-bold',
|
|
h2: 'mt-[1.4em] pb-px font-heading text-2xl font-semibold tracking-tight',
|
|
h3: 'mt-[1em] pb-px font-heading text-xl font-semibold tracking-tight',
|
|
h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',
|
|
h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',
|
|
h6: 'mt-[0.75em] text-base font-semibold tracking-tight',
|
|
},
|
|
},
|
|
});
|
|
|
|
export function HeadingElementStatic({
|
|
variant = 'h1',
|
|
...props
|
|
}: SlateElementProps & VariantProps<typeof headingVariants>) {
|
|
return (
|
|
<SlateElement
|
|
as={variant!}
|
|
className={headingVariants({ variant })}
|
|
{...props}
|
|
>
|
|
{props.children}
|
|
</SlateElement>
|
|
);
|
|
}
|
|
|
|
export function H1ElementStatic(props: SlateElementProps) {
|
|
return <HeadingElementStatic variant="h1" {...props} />;
|
|
}
|
|
|
|
export function H2ElementStatic(
|
|
props: React.ComponentProps<typeof HeadingElementStatic>
|
|
) {
|
|
return <HeadingElementStatic variant="h2" {...props} />;
|
|
}
|
|
|
|
export function H3ElementStatic(
|
|
props: React.ComponentProps<typeof HeadingElementStatic>
|
|
) {
|
|
return <HeadingElementStatic variant="h3" {...props} />;
|
|
}
|
|
|
|
export function H4ElementStatic(
|
|
props: React.ComponentProps<typeof HeadingElementStatic>
|
|
) {
|
|
return <HeadingElementStatic variant="h4" {...props} />;
|
|
}
|
|
|
|
export function H5ElementStatic(
|
|
props: React.ComponentProps<typeof HeadingElementStatic>
|
|
) {
|
|
return <HeadingElementStatic variant="h5" {...props} />;
|
|
}
|
|
|
|
export function H6ElementStatic(
|
|
props: React.ComponentProps<typeof HeadingElementStatic>
|
|
) {
|
|
return <HeadingElementStatic variant="h6" {...props} />;
|
|
}
|