indexx.dev
forked from
chadtmiller.com/slices-teal-relay
Teal.fm frontend powered by slices.network
tealfm-slices.wisp.place
tealfm
slices
1import { Link, useLocation } from "react-router-dom";
2
3interface LayoutProps {
4 children: React.ReactNode;
5}
6
7export default function Layout({ children }: LayoutProps) {
8 const location = useLocation();
9 const isTracksPage = location.pathname.startsWith("/tracks");
10 const isAlbumsPage = location.pathname.startsWith("/albums");
11
12 return (
13 <div className="min-h-screen bg-zinc-950 text-zinc-300 font-mono">
14 <div className="max-w-4xl mx-auto px-6 py-12">
15 <div className="mb-4 border-b border-zinc-800 pb-4">
16 <div className="flex items-end justify-between">
17 <div>
18 <h1 className="text-xs font-medium uppercase tracking-wider text-zinc-500">Listening History</h1>
19 <p className="text-xs text-zinc-600 mt-1">fm.teal.alpha.feed.play</p>
20 </div>
21
22 <div className="flex gap-4 text-xs">
23 <Link
24 to="/"
25 className={`px-2 py-1 transition-colors ${
26 location.pathname === "/"
27 ? "text-zinc-400"
28 : "text-zinc-500 hover:text-zinc-300"
29 }`}
30 >
31 Recent
32 </Link>
33 <Link
34 to="/tracks"
35 className={`px-2 py-1 transition-colors ${
36 isTracksPage
37 ? "text-zinc-400"
38 : "text-zinc-500 hover:text-zinc-300"
39 }`}
40 >
41 Top Tracks
42 </Link>
43 <Link
44 to="/albums"
45 className={`px-2 py-1 transition-colors ${
46 isAlbumsPage
47 ? "text-zinc-400"
48 : "text-zinc-500 hover:text-zinc-300"
49 }`}
50 >
51 Top Albums
52 </Link>
53 </div>
54 </div>
55 </div>
56
57 {isTracksPage && (
58 <div className="flex gap-3 text-xs mb-8 pb-4 border-b border-zinc-800">
59 <Link
60 to="/tracks"
61 className={`px-2 py-1 transition-colors ${
62 location.pathname === "/tracks"
63 ? "text-zinc-300"
64 : "text-zinc-600 hover:text-zinc-400"
65 }`}
66 >
67 All Time
68 </Link>
69 <Link
70 to="/tracks/daily"
71 className={`px-2 py-1 transition-colors ${
72 location.pathname === "/tracks/daily"
73 ? "text-zinc-300"
74 : "text-zinc-600 hover:text-zinc-400"
75 }`}
76 >
77 Daily
78 </Link>
79 <Link
80 to="/tracks/weekly"
81 className={`px-2 py-1 transition-colors ${
82 location.pathname === "/tracks/weekly"
83 ? "text-zinc-300"
84 : "text-zinc-600 hover:text-zinc-400"
85 }`}
86 >
87 Weekly
88 </Link>
89 <Link
90 to="/tracks/monthly"
91 className={`px-2 py-1 transition-colors ${
92 location.pathname === "/tracks/monthly"
93 ? "text-zinc-300"
94 : "text-zinc-600 hover:text-zinc-400"
95 }`}
96 >
97 Monthly
98 </Link>
99 </div>
100 )}
101
102 {isAlbumsPage && (
103 <div className="flex gap-3 text-xs mb-8 pb-4 border-b border-zinc-800">
104 <Link
105 to="/albums"
106 className={`px-2 py-1 transition-colors ${
107 location.pathname === "/albums"
108 ? "text-zinc-300"
109 : "text-zinc-600 hover:text-zinc-400"
110 }`}
111 >
112 All Time
113 </Link>
114 <Link
115 to="/albums/daily"
116 className={`px-2 py-1 transition-colors ${
117 location.pathname === "/albums/daily"
118 ? "text-zinc-300"
119 : "text-zinc-600 hover:text-zinc-400"
120 }`}
121 >
122 Daily
123 </Link>
124 <Link
125 to="/albums/weekly"
126 className={`px-2 py-1 transition-colors ${
127 location.pathname === "/albums/weekly"
128 ? "text-zinc-300"
129 : "text-zinc-600 hover:text-zinc-400"
130 }`}
131 >
132 Weekly
133 </Link>
134 <Link
135 to="/albums/monthly"
136 className={`px-2 py-1 transition-colors ${
137 location.pathname === "/albums/monthly"
138 ? "text-zinc-300"
139 : "text-zinc-600 hover:text-zinc-400"
140 }`}
141 >
142 Monthly
143 </Link>
144 </div>
145 )}
146
147 {!isTracksPage && !isAlbumsPage && <div className="mb-8"></div>}
148
149 {children}
150 </div>
151 </div>
152 );
153}