import { type Component, type JSXElement, Suspense } from "solid-js";

const App: Component<{ children: JSXElement }> = (props) => {
	return (
		<>
			<nav class="mx-auto bg-white text-gray-950 dark:bg-gray-800 dark:text-gray-50">
				<ul class="flex items-center">
					<li class="px-4 py-2">
						<span class="select-none font-bold font-mono italic">matted</span>
					</li>
				</ul>
			</nav>

			<main class="my-6 text-gray-950 text-sm dark:text-gray-50">
				<Suspense>{props.children}</Suspense>
			</main>
		</>
	);
};

export default App;