57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|