t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
tsiry-sandratraina.com
1import { useSearch } from "@tanstack/react-router";
2import { Tab, Tabs } from "baseui/tabs-motion";
3import { HeadingSmall } from "baseui/typography";
4import _ from "lodash";
5import { Key, useEffect, useState } from "react";
6import RecentTracks from "../overview/recenttracks";
7import TopArtists from "../overview/topartists";
8import TopTracks from "../overview/toptracks";
9import Albums from "./albums";
10
11export type LibraryProps = {
12 activeKey?: string;
13};
14
15function Library(props: LibraryProps) {
16 const [activeKey, setActiveKey] = useState<Key>(
17 _.get(props, "activeKey", "0"),
18 );
19 const { tab } = useSearch({ strict: false });
20 console.log("tab", tab);
21
22 useEffect(() => {
23 if (!tab) {
24 return;
25 }
26
27 setActiveKey(tab);
28 }, [tab]);
29
30 return (
31 <>
32 <HeadingSmall className="!text-[var(--color-text)]">Library</HeadingSmall>
33 <Tabs
34 activeKey={activeKey}
35 onChange={({ activeKey }) => {
36 setActiveKey(activeKey);
37 }}
38 overrides={{
39 TabHighlight: {
40 style: {
41 backgroundColor: "var(--color-purple)",
42 },
43 },
44 TabBorder: {
45 style: {
46 display: "none",
47 },
48 },
49 }}
50 activateOnFocus
51 >
52 <Tab
53 title="Scrobbles"
54 overrides={{
55 Tab: {
56 style: {
57 color: "var(--color-text)",
58 backgroundColor: "var(--color-background) !important",
59 },
60 },
61 }}
62 >
63 <RecentTracks showTitle={false} size={50} showPagination />
64 </Tab>
65 <Tab
66 title="Artists"
67 overrides={{
68 Tab: {
69 style: {
70 color: "var(--color-text)",
71 backgroundColor: "var(--color-background) !important",
72 },
73 },
74 }}
75 >
76 <TopArtists showTitle={false} size={50} showPagination />
77 </Tab>
78 <Tab
79 title="Albums"
80 overrides={{
81 Tab: {
82 style: {
83 color: "var(--color-text)",
84 backgroundColor: "var(--color-background) !important",
85 },
86 },
87 }}
88 >
89 <Albums size={50} />
90 </Tab>
91 <Tab
92 title="Tracks"
93 overrides={{
94 Tab: {
95 style: {
96 color: "var(--color-text)",
97 backgroundColor: "var(--color-background) !important",
98 },
99 },
100 }}
101 >
102 <TopTracks showTitle={false} size={50} showPagination />
103 </Tab>
104 </Tabs>
105 </>
106 );
107}
108
109export default Library;