Initial release v1.0.0

frontend/features/library/components/LibraryTabs.tsx

@@ -0,0 +1,56 @@
+import { Tab } from "../types";
+import { cn } from "@/utils/cn";
+
+interface LibraryTabsProps {
+  activeTab: Tab;
+  onTabChange: (tab: Tab) => void;
+}
+
+export function LibraryTabs({ activeTab, onTabChange }: LibraryTabsProps) {
+  return (
+    <div data-tv-section="library-tabs" className="flex gap-2 mb-4">
+      <button
+        data-tv-card
+        data-tv-card-index={0}
+        tabIndex={0}
+        onClick={() => onTabChange("artists")}
+        className={cn(
+          "px-3 py-1.5 text-sm font-medium rounded-full transition-all",
+          activeTab === "artists"
+            ? "bg-white text-black"
+            : "bg-white/10 text-white hover:bg-white/15"
+        )}
+      >
+        Artists
+      </button>
+      <button
+        data-tv-card
+        data-tv-card-index={1}
+        tabIndex={0}
+        onClick={() => onTabChange("albums")}
+        className={cn(
+          "px-3 py-1.5 text-sm font-medium rounded-full transition-all",
+          activeTab === "albums"
+            ? "bg-white text-black"
+            : "bg-white/10 text-white hover:bg-white/15"
+        )}
+      >
+        Albums
+      </button>
+      <button
+        data-tv-card
+        data-tv-card-index={2}
+        tabIndex={0}
+        onClick={() => onTabChange("tracks")}
+        className={cn(
+          "px-3 py-1.5 text-sm font-medium rounded-full transition-all",
+          activeTab === "tracks"
+            ? "bg-white text-black"
+            : "bg-white/10 text-white hover:bg-white/15"
+        )}
+      >
+        Songs
+      </button>
+    </div>
+  );
+}