feat: showing table on frontend for pages

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>
+	);
+};