52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Plus } from 'lucide-react';
|
|
|
|
interface TopHeaderProps {
|
|
title?: string;
|
|
itemCount?: number;
|
|
onAddNew?: () => void;
|
|
addButtonText?: string;
|
|
toolbar?: React.ReactNode;
|
|
tableTools?: React.ReactNode;
|
|
}
|
|
|
|
const TopHeader = ({
|
|
title,
|
|
itemCount,
|
|
onAddNew,
|
|
addButtonText = 'Add New',
|
|
toolbar,
|
|
tableTools,
|
|
}: TopHeaderProps) => {
|
|
return (
|
|
<div className="space-y-4">
|
|
{(title || onAddNew) && (
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
{title ? <h2>{title}</h2> : null}
|
|
<p className="text-muted-foreground">Total {itemCount ?? 0}</p>
|
|
</div>
|
|
{onAddNew ? (
|
|
<Button onClick={onAddNew}>
|
|
<Plus className="mr-2 size-4" />
|
|
{addButtonText}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
{(toolbar || tableTools) && (
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div className="min-w-0 flex-1">{toolbar}</div>
|
|
{tableTools ? (
|
|
<div className="flex shrink-0 justify-end">{tableTools}</div>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TopHeader;
|