import { resources } from "@lib/resources.ts";
import { Emoji } from "@components/Emoji.tsx";
import KMenuButton from "@islands/KMenuButton.tsx";
import { PageProps } from "fresh";
import { define } from "../utils.ts";

export default define.layout(function ({ Component }: PageProps) {
  return (
    <div
      class="md:grid mx-auto"
      style={{ gridTemplateColumns: "200px 1fr", maxWidth: "1024px" }}
    >
      <aside class="p-4 hidden md:block">
        <nav class="min-h-fit rounded-3xl p-3 grid gap-3 fixed t-0">
          {Object.values(resources).map((m) => {
            return (
              <a
                href={m.link}
                class="flex items-center gap-2 text-white data-current:bg-white data-current:text-black p-3 text-xl w-full rounded-2xl"
              >
                <Emoji class="w-6 h-6" name={m.emoji} /> {m.name}
              </a>
            );
          })}
        </nav>
      </aside>
      <main class="py-5">
        <Component />
      </main>
      <KMenuButton />
    </div>
  );
});