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
10 return (
11 <div className="min-h-screen bg-zinc-950 text-zinc-300 font-mono">
12 <div className="max-w-4xl mx-auto px-6 py-12">
13 <div className="mb-12 flex items-end justify-between border-b border-zinc-800 pb-6">
14 <div>
15 <h1 className="text-xs font-medium uppercase tracking-wider text-zinc-500">Listening History</h1>
16 <p className="text-xs text-zinc-600 mt-1">fm.teal.alpha.feed.play</p>
17 </div>
18
19 <div className="flex gap-4 text-xs">
20 <Link
21 to="/"
22 className={`px-2 py-1 transition-colors ${
23 location.pathname === "/"
24 ? "text-zinc-400"
25 : "text-zinc-500 hover:text-zinc-300"
26 }`}
27 >
28 Recent
29 </Link>
30 <Link
31 to="/tracks"
32 className={`px-2 py-1 transition-colors ${
33 location.pathname === "/tracks"
34 ? "text-zinc-400"
35 : "text-zinc-500 hover:text-zinc-300"
36 }`}
37 >
38 Top Tracks
39 </Link>
40 <Link
41 to="/albums"
42 className={`px-2 py-1 transition-colors ${
43 location.pathname === "/albums"
44 ? "text-zinc-400"
45 : "text-zinc-500 hover:text-zinc-300"
46 }`}
47 >
48 Top Albums
49 </Link>
50 </div>
51 </div>
52
53 {children}
54 </div>
55 </div>
56 );
57}