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