143 lines
4.5 KiB
TypeScript
143 lines
4.5 KiB
TypeScript
import Link from "next/link";
|
|
import NavOption from "components/PanelComponents/NavOption";
|
|
import SVG from "components/SVG";
|
|
import { useRouter } from "next/router";
|
|
import Button from "components/Button";
|
|
import HorizontalLine from "components/HorizontalLine";
|
|
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
import Markdown from "markdown-to-jsx";
|
|
|
|
type Props = {
|
|
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
|
|
};
|
|
|
|
export default function MainPanel(props: Props): JSX.Element {
|
|
const langui = props.langui;
|
|
const router = useRouter();
|
|
return (
|
|
<div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] overflow-y-scroll border-r-[1px] border-black max-h-screen h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center">
|
|
<div className="">
|
|
<div className="grid place-items-center">
|
|
<Link href="/" passHref>
|
|
<div className="w-1/2 cursor-pointer transition-[filter] hover:colorize-dark">
|
|
<SVG
|
|
src={"/icons/accords.svg"}
|
|
alt={"Logo of Accord's Library"}
|
|
/>
|
|
</div>
|
|
</Link>
|
|
<div className="relative mt-5">
|
|
{router.locale ? (
|
|
<Button className="absolute right-0 top-[-1.3em] text-xs !py-0.5 !px-2.5">
|
|
{router.locale.toUpperCase()}
|
|
</Button>
|
|
) : (
|
|
""
|
|
)}
|
|
<h2 className="text-3xl">Accord’s Library</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<HorizontalLine />
|
|
|
|
<NavOption
|
|
url="/library"
|
|
icon="library_books"
|
|
title={langui.main_library}
|
|
subtitle={langui.main_library_description}
|
|
/>
|
|
|
|
<NavOption
|
|
url="/hubs"
|
|
icon="workspaces"
|
|
title={langui.main_hub}
|
|
subtitle={langui.main_hub_description}
|
|
/>
|
|
|
|
<NavOption
|
|
url="/chronicles"
|
|
icon="watch_later"
|
|
title="Chronicles"
|
|
subtitle="Experience all events in chronological order"
|
|
/>
|
|
|
|
<HorizontalLine />
|
|
|
|
<NavOption url="/news" icon="feed" title={langui.main_news} />
|
|
<NavOption url="/data" icon="travel_explore" title={langui.main_data} />
|
|
<NavOption url="/merch" icon="store" title={langui.main_merch} />
|
|
<NavOption
|
|
url="/gallery"
|
|
icon="collections"
|
|
title={langui.main_gallery}
|
|
/>
|
|
<NavOption
|
|
url="/archives"
|
|
icon="inventory"
|
|
title={langui.main_archives}
|
|
/>
|
|
<NavOption url="/about-us" icon="info" title={langui.main_about_us} />
|
|
|
|
<HorizontalLine />
|
|
|
|
<div className="text-center">
|
|
<p>
|
|
{langui.main_licensing ? (
|
|
<Markdown>{langui.main_licensing}</Markdown>
|
|
) : (
|
|
""
|
|
)}
|
|
</p>
|
|
<a
|
|
className="transition-[filter] hover:colorize-dark"
|
|
href="https://creativecommons.org/licenses/by-sa/4.0/"
|
|
>
|
|
<div className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1">
|
|
<SVG
|
|
className="w-6"
|
|
src={"/icons/creative-commons-brands.svg"}
|
|
alt={""}
|
|
/>
|
|
<SVG
|
|
className="w-6"
|
|
src={"/icons/creative-commons-by-brands.svg"}
|
|
alt={""}
|
|
/>
|
|
<SVG
|
|
className="w-6"
|
|
src={"/icons/creative-commons-sa-brands.svg"}
|
|
alt={""}
|
|
/>
|
|
</div>
|
|
</a>
|
|
<p>
|
|
{langui.main_copyright ? (
|
|
<Markdown>{langui.main_copyright}</Markdown>
|
|
) : (
|
|
""
|
|
)}
|
|
</p>
|
|
<div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
|
|
<a
|
|
className="transition-[filter] hover:colorize-dark"
|
|
href="https://github.com/Accords-Library"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<SVG className="w-10" src={"/icons/github-brands.svg"} alt={""} />
|
|
</a>
|
|
<a
|
|
className="transition-[filter] hover:colorize-dark"
|
|
href="/discord"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<SVG className="w-10" src={"/icons/discord-brands.svg"} alt={""} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|