You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
876 B
31 lines
876 B
import type React from "react";
|
|
|
|
const headingStyles = {
|
|
h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
|
|
h2:
|
|
"scroll-m-20 border-b border-b-slate-200 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0 dark:border-b-slate-700",
|
|
h3: "scroll-m-20 text-lg font-semibold tracking-tight",
|
|
h4: "scroll-m-20 text-xl font-semibold tracking-tight",
|
|
h5: "scroll-m-20 text-lg font-medium tracking-tight",
|
|
};
|
|
|
|
interface HeadingProps {
|
|
as?: "h1" | "h2" | "h3" | "h4" | "h5";
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const Heading = ({
|
|
as: Component = "h1",
|
|
children,
|
|
className = "",
|
|
...props
|
|
}: HeadingProps) => {
|
|
const baseStyles = headingStyles[Component] || headingStyles.h1;
|
|
|
|
return (
|
|
<Component className={`${baseStyles} ${className}`} {...props}>
|
|
{children}
|
|
</Component>
|
|
);
|
|
};
|
|
|