2a65cd0b95
This commit includes overall UI and styling improvements in different areas of the application. In particular, it refactors the font usage in the tailwind configuration and modifies the Heading import path in `heading.tsx`. The pricing table and line item details in the billing gateway had been extensively updated to provide better visual representation. Finally, changes were made to the marketing page to make it more straightforward and clear.
82 lines
1.7 KiB
TypeScript
82 lines
1.7 KiB
TypeScript
import { cn } from '../utils';
|
|
|
|
type Level = 1 | 2 | 3 | 4 | 5 | 6;
|
|
|
|
export function Heading({
|
|
level,
|
|
children,
|
|
className,
|
|
}: React.PropsWithChildren<{ level?: Level; className?: string }>) {
|
|
switch (level) {
|
|
case 1:
|
|
return (
|
|
<h1
|
|
className={cn(
|
|
`scroll-m-20 font-heading text-4xl font-bold tracking-tight dark:text-white`,
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</h1>
|
|
);
|
|
case 2:
|
|
return (
|
|
<h2
|
|
className={cn(
|
|
`scroll-m-20 pb-2 font-heading text-3xl font-semibold tracking-tight transition-colors first:mt-0`,
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</h2>
|
|
);
|
|
case 3:
|
|
return (
|
|
<h3
|
|
className={cn(
|
|
'scroll-m-20 font-heading text-2xl font-semibold tracking-tight',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</h3>
|
|
);
|
|
case 4:
|
|
return (
|
|
<h4
|
|
className={cn(
|
|
'scroll-m-20 font-heading text-xl font-semibold tracking-tight',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</h4>
|
|
);
|
|
case 5:
|
|
return (
|
|
<h5
|
|
className={cn(
|
|
'scroll-m-20 font-heading text-lg font-medium',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</h5>
|
|
);
|
|
case 6:
|
|
return (
|
|
<h6
|
|
className={cn(
|
|
'scroll-m-20 font-heading text-base font-medium',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</h6>
|
|
);
|
|
|
|
default:
|
|
return <Heading level={1}>{children}</Heading>;
|
|
}
|
|
}
|