refactor: refactor the color schema

src/components/data-table/Header/index.tsx

@@ -0,0 +1,45 @@
+"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;