77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { ReactNode } from "react";
|
|
import Button from "./Button";
|
|
|
|
interface PageHeaderProps {
|
|
title: string;
|
|
description?: string;
|
|
primaryAction?: {
|
|
label: string;
|
|
onClick?: () => void;
|
|
icon?: ReactNode;
|
|
isLoading?: boolean;
|
|
};
|
|
secondaryAction?: {
|
|
label: string;
|
|
onClick?: () => void;
|
|
icon?: ReactNode;
|
|
};
|
|
children?: ReactNode;
|
|
}
|
|
|
|
export default function PageHeader({
|
|
title,
|
|
description,
|
|
primaryAction,
|
|
secondaryAction,
|
|
children
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
|
|
<div className="flex-1 min-w-0">
|
|
<h1 className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight truncate">
|
|
{title}
|
|
</h1>
|
|
{description && (
|
|
<p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{secondaryAction && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={secondaryAction.onClick}
|
|
className="bg-white dark:bg-zinc-900"
|
|
>
|
|
{secondaryAction.icon && (
|
|
<span className="mr-2">{secondaryAction.icon}</span>
|
|
)}
|
|
{secondaryAction.label}
|
|
</Button>
|
|
)}
|
|
|
|
{primaryAction && (
|
|
<Button
|
|
variant="primary"
|
|
onClick={primaryAction.onClick}
|
|
isLoading={primaryAction.isLoading}
|
|
className="shadow-lg shadow-brand-500/20"
|
|
style={{ background: 'var(--gradient)' }}
|
|
>
|
|
{primaryAction.icon && !primaryAction.isLoading && (
|
|
<span className="mr-2">{primaryAction.icon}</span>
|
|
)}
|
|
{primaryAction.label}
|
|
</Button>
|
|
)}
|
|
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|