72 lines
1.4 KiB
TypeScript
72 lines
1.4 KiB
TypeScript
|
import Balance from "react-wrap-balancer";
|
||
|
|
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import React from "react";
|
||
|
|
import { Separator } from "./separator";
|
||
|
|
|
||
|
|
interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
||
|
|
separator?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const PageHeader: React.FC<PageHeaderProps> = ({
|
||
|
|
className,
|
||
|
|
separator,
|
||
|
|
children,
|
||
|
|
...props
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<div className={cn("flex flex-col items-start", className)} {...props}>
|
||
|
|
{children}
|
||
|
|
{separator && <Separator className="my-6" />}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
function PageHeaderTitle({
|
||
|
|
className,
|
||
|
|
...props
|
||
|
|
}: React.HTMLAttributes<HTMLHeadingElement>) {
|
||
|
|
return (
|
||
|
|
<h2
|
||
|
|
className={cn(
|
||
|
|
"flex text-xl font-semibold leading-tight tracking-tight whitespace-nowrap",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function PageHeaderMeta({
|
||
|
|
className,
|
||
|
|
...props
|
||
|
|
}: React.HTMLAttributes<HTMLHeadingElement>) {
|
||
|
|
return (
|
||
|
|
<p
|
||
|
|
className={cn(
|
||
|
|
"text-sm font-semibold text-muted-foreground leading-loose",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function PageHeaderDescription({
|
||
|
|
className,
|
||
|
|
...props
|
||
|
|
}: React.HTMLAttributes<HTMLParagraphElement>) {
|
||
|
|
return (
|
||
|
|
<Balance
|
||
|
|
as="p"
|
||
|
|
className={cn(
|
||
|
|
"max-w-[750px] text-base font-medium text-muted-foreground",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export { PageHeader, PageHeaderDescription, PageHeaderMeta, PageHeaderTitle };
|