114 lines
2.0 KiB
JavaScript
114 lines
2.0 KiB
JavaScript
import { clsx } from 'clsx'
|
|
|
|
export function Heading({ as: Component = 'h1', className, children, ...props }) {
|
|
return (
|
|
<Component
|
|
className={clsx(
|
|
'text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Component>
|
|
)
|
|
}
|
|
|
|
export function H2({ className, children, ...props }) {
|
|
return (
|
|
<h2
|
|
className={clsx(
|
|
'mt-8 text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</h2>
|
|
)
|
|
}
|
|
|
|
export function H3({ className, children, ...props }) {
|
|
return (
|
|
<h3
|
|
className={clsx(
|
|
'mt-8 text-xl font-medium tracking-tight text-bg-darkbrown lg:text-2xl',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</h3>
|
|
)
|
|
}
|
|
|
|
export function H4({ className, children, ...props }) {
|
|
return (
|
|
<h4
|
|
className={clsx(
|
|
'text-base font-medium tracking-tight text-bg-darkbrown lg:text-lg',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</h4>
|
|
)
|
|
}
|
|
|
|
export function P({ className, children, ...props }) {
|
|
return (
|
|
<p
|
|
className={clsx(
|
|
'mt-4 text-lg/8 text-gray-700 font-extralight leading-tight',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
export function PS({ className, children, ...props }) {
|
|
return (
|
|
<p
|
|
className={clsx(
|
|
'text-base text-gray-700 font-extralight leading-snug',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
export function PXS({ className, children, ...props }) {
|
|
return (
|
|
<p
|
|
className={clsx(
|
|
'text-base/8 text-gray-700 font-extralight leading-snug',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
export function Subheading({ className, children, ...props }) {
|
|
return (
|
|
<h3
|
|
className={clsx(
|
|
'text-lg font-medium text-gray-900',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</h3>
|
|
)
|
|
}
|