46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
"use client";
|
|
import { Button } from "@/components/ui/button";
|
|
import SearchBar from "./SearchBar";
|
|
import { PlusIcon } from "lucide-react";
|
|
|
|
interface TopHeaderProps {
|
|
title?: string;
|
|
itemCount?: number;
|
|
onAddNew?: () => void;
|
|
addButtonText?: string;
|
|
}
|
|
|
|
const TopHeader = ({ title, itemCount, onAddNew, addButtonText = "Add New" }: TopHeaderProps) => {
|
|
return (
|
|
<div className="flex flex-col gap-4 p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-xl font-semibold tracking-tight">{title}</h2>
|
|
{itemCount !== undefined && (
|
|
<span className="flex items-center justify-center bg-secondary text-secondary-foreground min-w-[24px] h-[24px] px-2 text-xs font-bold rounded-full">
|
|
{itemCount}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{onAddNew && (
|
|
<Button
|
|
onClick={onAddNew}
|
|
size="sm"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<PlusIcon className="w-4 h-4" />
|
|
{addButtonText}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex w-full max-w-sm ml-auto">
|
|
<SearchBar />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TopHeader;
|