60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { ReactNode } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Menu } from "lucide-react";
|
|
import { useSidebarContext } from "@/components/layout/sidebar-context";
|
|
import { useIsMobile } from "@/hooks/use-mobile";
|
|
|
|
interface PageHeaderProps {
|
|
title: string;
|
|
description?: string | ReactNode;
|
|
actions?: ReactNode;
|
|
rightContent?: ReactNode;
|
|
}
|
|
|
|
export function PageHeader({
|
|
title,
|
|
description,
|
|
actions,
|
|
rightContent,
|
|
}: PageHeaderProps) {
|
|
const { setOpen } = useSidebarContext();
|
|
const isMobile = useIsMobile();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 mb-2">
|
|
<div className="flex items-start gap-4 flex-1 min-w-0">
|
|
{isMobile && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setOpen(true)}
|
|
className="shrink-0 rounded-xl hover:bg-muted/60 mt-1"
|
|
>
|
|
<Menu className="w-5 h-5" />
|
|
</Button>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-2 mb-2">
|
|
<h1 className="text-2xl md:text-4xl lg:text-5xl font-black text-foreground tracking-tight leading-tight flex-1 min-w-0">
|
|
{title}
|
|
</h1>
|
|
{rightContent && <div className="shrink-0">{rightContent}</div>}
|
|
</div>
|
|
{description && (
|
|
<div className="text-base md:text-lg text-muted-foreground/70 font-semibold">
|
|
{description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{actions && (
|
|
<div className="flex items-center gap-3 flex-wrap justify-end">
|
|
{actions}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|