53 lines
1.0 KiB
TypeScript
Executable File
53 lines
1.0 KiB
TypeScript
Executable File
import type { JSX } from "solid-js";
|
|
|
|
import "./tailwind.css";
|
|
|
|
import { Link } from "@/components/Link";
|
|
import logoUrl from "@/assets/logo.svg";
|
|
|
|
export default function LayoutDefault(props: { children?: JSX.Element }) {
|
|
return (
|
|
<div class={"flex max-w-5xl m-auto"}>
|
|
<Sidebar>
|
|
<Logo />
|
|
<Link href="/">Welcome</Link>
|
|
<Link href="/todo">Todo</Link>
|
|
<Link href="/star-wars">Data Fetching</Link>
|
|
{""}
|
|
</Sidebar>
|
|
<Content>{props.children}</Content>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Sidebar(props: { children: JSX.Element }) {
|
|
return (
|
|
<div
|
|
id="sidebar"
|
|
class={"p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"}
|
|
>
|
|
{props.children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Content(props: { children: JSX.Element }) {
|
|
return (
|
|
<div id="page-container">
|
|
<div id="page-content" class={"p-5 pb-12 min-h-screen"}>
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Logo() {
|
|
return (
|
|
<div class={"p-5 mb-2"}>
|
|
<a href="/">
|
|
<img src={logoUrl} height={64} width={64} alt="logo" />
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|