Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 4x 11x 11x | import { cn } from "@/lib/utils";
import { MotionProps } from "framer-motion";
import React from "react";
import Balancer from "react-wrap-balancer";
export const Heading = ({
className,
as: Tag = "h2",
children,
size = "md",
...props
}: {
className?: string;
as?: any;
children: any;
size?: "sm" | "md" | "xl" | "2xl";
props?: React.HTMLAttributes<HTMLHeadingElement | MotionProps>;
} & MotionProps &
React.HTMLAttributes<HTMLHeadingElement | MotionProps>) => {
const sizeVariants = {
sm: "text-xl md:text-2xl md:leading-snug",
md: "text-3xl md:text-4xl md:leading-tight",
xl: "text-4xl md:text-6xl md:leading-none",
"2xl": "text-5xl md:text-7xl md:leading-none",
};
return (
<Tag
className={cn(
"text-3xl md:text-5xl md:leading-tight max-w-5xl mx-auto text-center tracking-tight",
"font-medium font-heading",
"bg-clip-text text-transparent bg-linear-to-b from-neutral-800 via-white to-white",
sizeVariants[size],
className
)}
{...props}
>
<Balancer>{children}</Balancer>
</Tag>
);
}; |