66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { ArrowLeftIcon } from "@radix-ui/react-icons";
|
|
import { Link, Outlet, useLocation } from "@remix-run/react";
|
|
|
|
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() {
|
|
const { pathname } = useLocation();
|
|
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 to="/">
|
|
<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 Web3.News" />
|
|
<AsideItem href="/donate" title="Donate" />
|
|
</ol>
|
|
</nav>
|
|
</aside>
|
|
<section className="w-full">
|
|
<Outlet />
|
|
</section>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
const AsideItem = ({ title, href }: { title: string; href: string }) => {
|
|
const { pathname } = useLocation();
|
|
return (
|
|
<Link to={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>
|
|
);
|
|
};
|