feat: modify table design

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

@@ -21,26 +21,35 @@ const TopHeader = ({
   tableTools,
 }: TopHeaderProps) => {
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       {(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 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}>
-              <Plus className="mr-2 size-4" />
+            <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">
-          <div className="min-w-0 flex-1">{toolbar}</div>
+          {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">{tableTools}</div>
+            <div className="flex shrink-0 justify-end **:data-[slot=button]:shadow-none">
+              {tableTools}
+            </div>
           ) : null}
         </div>
       )}