Kirubel-Kibru-Yaltopia
89440985f1
Some checks failed
Deploy to Cloudflare Workers / deploy (push) Has been cancelled
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
|
|
export function PageHeader({
|
|
title,
|
|
description,
|
|
actions,
|
|
tabs,
|
|
activeTab,
|
|
onTabChange,
|
|
}: {
|
|
title: string;
|
|
description?: string;
|
|
actions?: React.ReactNode;
|
|
tabs?: { id: string; label: string }[];
|
|
activeTab?: string;
|
|
onTabChange?: (id: string) => void;
|
|
}) {
|
|
return (
|
|
<div className="mb-6 space-y-4">
|
|
<div className="flex flex-wrap items-end justify-between gap-4">
|
|
<div>
|
|
<h1 className="font-display text-2xl font-black uppercase tracking-tight md:text-3xl">
|
|
{title}
|
|
</h1>
|
|
{description && (
|
|
<p className="mt-1 text-sm text-muted-foreground">{description}</p>
|
|
)}
|
|
</div>
|
|
{actions && (
|
|
<div className="flex flex-wrap items-center gap-2">{actions}</div>
|
|
)}
|
|
</div>
|
|
{tabs && tabs.length > 0 && (
|
|
<Tabs
|
|
value={activeTab ?? tabs[0].id}
|
|
onValueChange={onTabChange}
|
|
className="w-full"
|
|
>
|
|
<TabsList>
|
|
{tabs.map((t) => (
|
|
<TabsTrigger key={t.id} value={t.id}>
|
|
{t.label}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|