75 lines
2.1 KiB
TypeScript
75 lines
2.1 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="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-2">
|
|
<div className="flex items-center 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"
|
|
>
|
|
<Menu className="w-5 h-5" />
|
|
</Button>
|
|
)}
|
|
<div className="flex-1 min-w-0 pr-20 md:pr-0">
|
|
<h1 className="text-3xl md:text-4xl lg:text-5xl font-black text-foreground tracking-tight mb-2 leading-tight">
|
|
{title}
|
|
</h1>
|
|
{description && (
|
|
<div className="text-base md:text-lg text-muted-foreground/70 font-semibold">
|
|
{description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{(rightContent || actions) && (
|
|
<>
|
|
{isMobile ? (
|
|
<div className="absolute top-0 right-0 flex items-center gap-2">
|
|
{rightContent}
|
|
{actions && (
|
|
<div className="[&>button]:h-10 [&>button]:px-3 [&>button]:text-sm">
|
|
{actions}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
{rightContent}
|
|
{actions && (
|
|
<div className="flex gap-3">
|
|
{actions}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|