feat: showing table on frontend for pages

frontend/src/pages/front/gallery.tsx

@@ -60,7 +60,7 @@ export const Categories: Component = () => {
 				<For each={lists()}>
 					{(list) => (
 						<A
-							href="/"
+							href={`/list/${list.ID}`}
 							class={
 								"flex flex-col p-4 border border-neutral-200 rounded-lg " +
 								colors[

frontend/src/pages/index.ts

@@ -6,3 +6,4 @@ export * from "./login";
 export * from "./entity";
 export * from "./search";
 export * from "./all-images";
+export * from "./list";

frontend/src/pages/list/index.tsx

@@ -0,0 +1,43 @@
+import { ImageComponent } from "@components/image";
+import { useSearchImageContext } from "@contexts/SearchImageContext";
+import { useParams } from "@solidjs/router";
+import { Component, For, Show } from "solid-js";
+
+export const List: Component = () => {
+	const { listId } = useParams();
+
+	const { lists } = useSearchImageContext();
+
+	const list = () => lists().find((l) => l.ID === listId);
+
+	return (
+		<Show when={list()} fallback="List could not be found">
+			{(l) => (
+				<table>
+					<thead>
+						<tr>
+							<th>Image</th>
+							<For each={l().Schema.SchemaItems}>
+								{(item) => <th>{item.Item}</th>}
+							</For>
+						</tr>
+					</thead>
+					<tbody>
+						<For each={l().Images}>
+							{(image) => (
+								<tr>
+									<td>
+										<ImageComponent ID={image.ImageID} />
+									</td>
+									<For each={image.Items}>
+										{(item) => <td>{item.Value}</td>}
+									</For>
+								</tr>
+							)}
+						</For>
+					</tbody>
+				</table>
+			)}
+		</Show>
+	);
+};