87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
import { getTranslations } from "next-intl/server";
|
|
import Link from "next/link";
|
|
import type { ReactNode } from "react";
|
|
|
|
const RADIO_SIDEBAR_LINKS = [
|
|
{ key: "schedule", href: "/radio/schedule", icon: "🗓️" },
|
|
{ key: "shouts", href: "/radio/shouts", icon: "📣" },
|
|
{ key: "requests", href: "/radio/requests", icon: "🎵" },
|
|
{ key: "apply", href: "/radio/apply", icon: "🎤" },
|
|
{ key: "leaderboard", href: "/radio/leaderboard", icon: "🏆" },
|
|
] as const;
|
|
|
|
export default async function RadioLayout({ children }: { children: ReactNode }) {
|
|
const t = await getTranslations("pages.radio");
|
|
|
|
return (
|
|
<div className="radio-layout" style={{ display: "flex", gap: "1.5rem", alignItems: "flex-start" }}>
|
|
<aside
|
|
className="radio-sidebar"
|
|
style={{
|
|
flex: "none",
|
|
width: "200px",
|
|
position: "sticky",
|
|
top: "5rem",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "0.25rem",
|
|
}}
|
|
>
|
|
<Link
|
|
href="/radio"
|
|
className="radio-sidebar-head"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.5rem",
|
|
padding: "0.55rem 0.75rem",
|
|
fontWeight: 700,
|
|
fontSize: "1rem",
|
|
color: "var(--color-text-readable, var(--color-text))",
|
|
textDecoration: "none",
|
|
borderBottom: "1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent)",
|
|
marginBottom: "0.25rem",
|
|
}}
|
|
>
|
|
<span aria-hidden style={{ fontSize: "1.2rem" }}>
|
|
📻
|
|
</span>
|
|
Radio
|
|
</Link>
|
|
{RADIO_SIDEBAR_LINKS.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="radio-sidebar-link"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.5rem",
|
|
padding: "0.5rem 0.75rem",
|
|
borderRadius: "8px",
|
|
color: "var(--color-text-readable, var(--color-text))",
|
|
textDecoration: "none",
|
|
fontSize: "0.9rem",
|
|
transition: "background 0.15s",
|
|
}}
|
|
>
|
|
<span aria-hidden style={{ flex: "none", fontSize: "1rem" }}>
|
|
{link.icon}
|
|
</span>
|
|
{link.key === "schedule"
|
|
? t("linkSchedule")
|
|
: link.key === "shouts"
|
|
? t("linkShouts")
|
|
: link.key === "requests"
|
|
? t("linkRequests")
|
|
: link.key === "apply"
|
|
? t("linkApply")
|
|
: t("linkLeaderboard")}
|
|
</Link>
|
|
))}
|
|
</aside>
|
|
<section style={{ flex: 1, minWidth: 0 }}>{children}</section>
|
|
</div>
|
|
);
|
|
}
|