Change tabs list page

src/app/tags/page.tsx

@@ -1,4 +1,5 @@
-import TagTable from "@/components/tags/TagTable";
+import TagTabs from "@/components/tags/TagTabs";
+import { Button } from "@/components/ui/button";
 import { prisma } from "@/lib/prisma";
 import { PlusCircleIcon } from "lucide-react";
 import Link from "next/link";
@@ -15,17 +16,31 @@ export default async function ArtTagsPage() {
   });
 
   return (
-    <div>
-      <div className="flex gap-4 justify-between pb-8">
-        <h1 className="text-2xl font-bold mb-4">Art Tags</h1>
-        <Link href="/tags/new" className="flex gap-2 items-center cursor-pointer bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded">
-          <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" /> Add new tag
-        </Link>
-      </div>
+    <div className="mx-auto w-full max-w-7xl px-4 py-6">
+      <header className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div className="space-y-1">
+          <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
+            Art Tags
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            Manage tags, aliases, categories, and usage across artworks.
+          </p>
+        </div>
+
+        <Button asChild className="h-11 gap-2">
+          <Link href="/tags/new">
+            <PlusCircleIcon className="h-4 w-4" />
+            Add new tag
+          </Link>
+        </Button>
+      </header>
+
       {items.length > 0 ? (
-        <TagTable tags={items} />
+        <TagTabs tags={items} />
       ) : (
-        <p>There are no tags yet. Consider adding some!</p>
+        <p className="text-muted-foreground">
+          There are no tags yet. Consider adding some!
+        </p>
       )}
     </div>
   );