66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { ArrowLeftIcon } from "@radix-ui/react-icons"
|
||
|
|
import Link from "next/link"
|
||
|
|
import { usePathname } from "next/navigation"
|
||
|
|
|
||
|
|
const TEXT_DICT = {
|
||
|
|
"/about": {
|
||
|
|
headline: "Sharing community news on the open, user-owned web you deserve.",
|
||
|
|
tagline: "Learn about our community"
|
||
|
|
},
|
||
|
|
"/donate": {
|
||
|
|
headline: "We think people should have free access to information no matter how they choose to access it.",
|
||
|
|
tagline: "Help us break the pattern"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
||
|
|
const pathname = usePathname();
|
||
|
|
const text = TEXT_DICT[pathname! as '/about' | '/donate']
|
||
|
|
return (
|
||
|
|
<section className="w-full">
|
||
|
|
<header className="text-white mt-10 pb-3 border-b-2 border-primary">
|
||
|
|
<h2>{text.headline}</h2>
|
||
|
|
</header>
|
||
|
|
<Link href="/">
|
||
|
|
<button className="my-4 -ml-3 px-3 py-2 text-gray-400 hover:bg-gray-800 hover:text-white rounded">
|
||
|
|
<ArrowLeftIcon className="w-4 h-4 inline mr-2 -mt-1" />
|
||
|
|
Back to Home
|
||
|
|
</button>
|
||
|
|
</Link>
|
||
|
|
<div className="flex flex-row mt-6">
|
||
|
|
<aside className="w-1/3">
|
||
|
|
<h3 className="text-white mb-5">{text.tagline}</h3>
|
||
|
|
<nav className="sticky top-3">
|
||
|
|
<ol>
|
||
|
|
<AsideItem href="/about" title="About Web3News" />
|
||
|
|
<AsideItem href="/donate" title="Donate" />
|
||
|
|
</ol>
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
<section className="w-full">{children}</section>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const AsideItem = ({ title, href }: { title: string; href: string }) => {
|
||
|
|
const pathname = usePathname()
|
||
|
|
return (
|
||
|
|
<Link href={href}>
|
||
|
|
<li>
|
||
|
|
<button
|
||
|
|
className={`w-[calc(100%-20px)] mb-3 p-8 text-gray-500 bg-gray-800 text-start ${
|
||
|
|
pathname === href
|
||
|
|
? "border border-primary text-primary bg-transparent"
|
||
|
|
: "hover:bg-gray-800/70"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{title}
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
</Link>
|
||
|
|
)
|
||
|
|
}
|