refactor: moving to components

frontend/src/components/app-wrapper/index.tsx

@@ -0,0 +1,7 @@
+import { Component, ParentProps } from "solid-js";
+
+export const AppWrapper: Component<ParentProps> = (props) => {
+	return (
+		<div class="flex w-full justify-center h-screen">{props.children}</div>
+	);
+};

frontend/src/components/dock/index.tsx

@@ -0,0 +1,33 @@
+import { A, useNavigate } from "@solidjs/router";
+import {
+	IconArrowLeft,
+	IconHome,
+	IconPhoto,
+	IconSearch,
+} from "@tabler/icons-solidjs";
+import { Component, ParentProps } from "solid-js";
+
+export const WithDock: Component<ParentProps> = (props) => {
+	const nav = useNavigate();
+
+	return (
+		<div class="w-full flex flex-col items-center">
+			{/* TODO: this should only show up when NOT on the home page. */}
+			<div class="cursor-pointer" onClick={() => nav(-1)}>
+				<IconArrowLeft />
+			</div>
+			{props.children}
+			<div class="w-full mt-auto h-16 bg-white flex justify-between m-4 rounded-xl">
+				<A href="/" class="w-full flex justify-center items-center">
+					<IconHome />
+				</A>
+				<A href="/" class="w-full flex justify-center items-center">
+					<IconSearch />
+				</A>
+				<A href="/" class="w-full flex justify-center items-center">
+					<IconPhoto />
+				</A>
+			</div>
+		</div>
+	);
+};