61 lines
1.8 KiB
TypeScript
61 lines
1.8 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-3">
|
|
{(title || onAddNew) && (
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<div className="min-w-0">
|
|
{title ? <h2 className="text-lg font-semibold">{title}</h2> : null}
|
|
<p className="text-sm text-muted-foreground">
|
|
Total {itemCount ?? 0}
|
|
</p>
|
|
</div>
|
|
{onAddNew ? (
|
|
<Button onClick={onAddNew} size="sm" className="w-fit">
|
|
<Plus className="size-4" />
|
|
{addButtonText}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
|
|
{(toolbar || tableTools) && (
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
{toolbar ? (
|
|
<div className="min-w-0 flex-1 **:data-[slot=input-group]:border-border [&_[data-slot=input-group]]:bg-background [&_[data-slot=input-group]]:shadow-none [&_[data-slot=select-trigger]]:border-border [&_[data-slot=select-trigger]]:bg-background [&_[data-slot=select-trigger]]:shadow-none">
|
|
{toolbar}
|
|
</div>
|
|
) : null}
|
|
{tableTools ? (
|
|
<div className="flex shrink-0 justify-end **:data-[slot=button]:shadow-none">
|
|
{tableTools}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TopHeader;
|