124 lines
2.9 KiB
TypeScript
124 lines
2.9 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
// https://ui.shadcn.com/docs/components/radix/typography.md
|
|
|
|
export function H1({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
|
|
return (
|
|
<h1
|
|
className={cn("scroll-m-20 text-4xl font-extrabold tracking-tight text-balance", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</h1>
|
|
)
|
|
}
|
|
|
|
export function H2({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
|
|
return (
|
|
<h2
|
|
className={cn("scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</h2>
|
|
)
|
|
}
|
|
|
|
export function H3({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
|
|
return (
|
|
<h3
|
|
className={cn("scroll-m-20 text-2xl font-semibold tracking-tight", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</h3>
|
|
)
|
|
}
|
|
|
|
export function H4({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
|
|
return (
|
|
<h4
|
|
className={cn("scroll-m-20 text-xl font-semibold tracking-tight", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</h4>
|
|
)
|
|
}
|
|
|
|
export function P({ className, children, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
|
|
return (
|
|
<p
|
|
className={cn("leading-7 not-first:mt-6", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
export function Blockquote({ className, children, ...props }: React.HTMLAttributes<HTMLQuoteElement>) {
|
|
return (
|
|
<blockquote
|
|
className={cn("mt-6 border-l-2 pl-6 italic", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</blockquote>
|
|
)
|
|
}
|
|
|
|
export function InlineCode({ className, children, ...props }: React.HTMLAttributes<HTMLElement>) {
|
|
return (
|
|
<code
|
|
className={cn("bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</code>
|
|
)
|
|
}
|
|
|
|
export function Lead({ className, children, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
|
|
return (
|
|
<p
|
|
className={cn("text-muted-foreground text-xl", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
export function Large({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div
|
|
className={cn("text-lg font-semibold", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function Small({ className, children, ...props }: React.HTMLAttributes<HTMLElement>) {
|
|
return (
|
|
<small
|
|
className={cn("text-sm leading-none font-medium", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</small>
|
|
)
|
|
}
|
|
|
|
export function Muted({ className, children, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
|
|
return (
|
|
<p
|
|
className={cn("text-muted-foreground text-sm", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</p>
|
|
)
|
|
} |