2023-07-26 13:47:01 +02:00
|
|
|
import { ComponentChildren } from "preact";
|
2023-08-06 17:47:26 +02:00
|
|
|
import { resources } from "@lib/resources.ts";
|
2023-08-06 00:33:06 +02:00
|
|
|
import { CSS, KATEX_CSS } from "https://deno.land/x/gfm@0.2.5/mod.ts";
|
2023-08-02 17:21:03 +02:00
|
|
|
import { Head } from "$fresh/runtime.ts";
|
2023-08-06 00:33:06 +02:00
|
|
|
import Search, { RedirectSearchHandler } from "@islands/Search.tsx";
|
2023-08-06 18:06:09 +02:00
|
|
|
import { KMenu } from "@islands/KMenu.tsx";
|
2023-08-09 15:20:14 +02:00
|
|
|
import { Emoji } from "@components/Emoji.tsx";
|
2023-08-10 16:59:18 +02:00
|
|
|
import { SearchResult } from "@lib/types.ts";
|
2023-07-26 13:47:01 +02:00
|
|
|
|
|
|
|
|
export type Props = {
|
|
|
|
|
children: ComponentChildren;
|
|
|
|
|
title?: string;
|
|
|
|
|
name?: string;
|
2023-07-30 21:43:09 +02:00
|
|
|
url: URL;
|
2023-07-26 13:47:01 +02:00
|
|
|
description?: string;
|
2023-08-06 00:33:06 +02:00
|
|
|
context?: { type: string };
|
2023-08-10 16:59:18 +02:00
|
|
|
searchResults?: SearchResult;
|
2023-07-26 13:47:01 +02:00
|
|
|
};
|
|
|
|
|
|
2023-08-10 16:59:18 +02:00
|
|
|
export const MainLayout = (
|
|
|
|
|
{ children, url, title, context, searchResults }: Props,
|
|
|
|
|
) => {
|
2023-08-06 00:33:06 +02:00
|
|
|
const hasSearch = url.search.includes("q=");
|
|
|
|
|
|
2023-07-26 13:47:01 +02:00
|
|
|
return (
|
2023-07-31 17:21:17 +02:00
|
|
|
<div
|
|
|
|
|
class="md:grid mx-auto"
|
|
|
|
|
style={{ gridTemplateColumns: "200px 1fr", maxWidth: "1024px" }}
|
|
|
|
|
>
|
2023-08-02 17:21:03 +02:00
|
|
|
<Head>
|
|
|
|
|
<style>{CSS}</style>
|
|
|
|
|
<style>{KATEX_CSS}</style>
|
2023-08-04 22:38:09 +02:00
|
|
|
{title &&
|
|
|
|
|
<title>{title}</title>}
|
2023-08-02 17:21:03 +02:00
|
|
|
</Head>
|
2023-07-30 21:43:09 +02:00
|
|
|
<aside class="p-4 hidden md:block">
|
2023-08-17 21:38:08 +02:00
|
|
|
<nav class="min-h-fit rounded-3xl p-3 grid gap-3 fixed t-0">
|
2023-08-06 17:47:26 +02:00
|
|
|
{Object.values(resources).map((m) => {
|
2023-07-30 21:43:09 +02:00
|
|
|
return (
|
|
|
|
|
<a
|
|
|
|
|
href={m.link}
|
2023-08-09 15:20:14 +02:00
|
|
|
class={`flex items-center gap-2 ${
|
2023-07-30 21:43:09 +02:00
|
|
|
m.link === url.pathname ? "bg-white text-black" : "text-white"
|
|
|
|
|
} p-3 text-xl w-full rounded-2xl`}
|
|
|
|
|
>
|
2023-08-09 15:20:14 +02:00
|
|
|
{<Emoji class="w-6 h-6" name={m.emoji} />} {m.name}
|
2023-07-30 21:43:09 +02:00
|
|
|
</a>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</nav>
|
|
|
|
|
</aside>
|
2023-07-26 13:47:01 +02:00
|
|
|
<main
|
2023-07-30 21:43:09 +02:00
|
|
|
class="py-5"
|
2023-07-26 13:47:01 +02:00
|
|
|
style={{ fontFamily: "Work Sans" }}
|
|
|
|
|
>
|
2023-08-10 16:59:18 +02:00
|
|
|
{hasSearch && (
|
|
|
|
|
<Search
|
|
|
|
|
q={url.searchParams.get("q")}
|
|
|
|
|
{...context}
|
|
|
|
|
results={searchResults}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
2023-08-06 00:33:06 +02:00
|
|
|
{!hasSearch && children}
|
2023-07-26 13:47:01 +02:00
|
|
|
</main>
|
2023-07-30 21:43:09 +02:00
|
|
|
</div>
|
2023-07-26 13:47:01 +02:00
|
|
|
);
|
|
|
|
|
};
|
