chore: using ts aliases

frontend/src/pages/front/Recent.tsx

@@ -0,0 +1,24 @@
+import { Component, For } from "solid-js";
+import { ImageComponent } from "@components/image";
+import { useSearchImageContext } from "@contexts/SearchImageContext";
+
+export const Recent: Component = () => {
+	const { userImages } = useSearchImageContext();
+
+	const latestImages = () =>
+		userImages()
+			.sort(
+				(a, b) =>
+					new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
+			)
+			.slice(0, 10);
+
+	return (
+		<div>
+			<h2>Recent</h2>
+			<For each={latestImages()}>
+				{(image) => <ImageComponent ID={image.ImageID} />}
+			</For>
+		</div>
+	);
+};

frontend/src/pages/front/gallery.tsx

@@ -0,0 +1,43 @@
+import { Component, For } from "solid-js";
+import { A } from "@solidjs/router";
+import {
+	SearchImageStore,
+	useSearchImageContext,
+} from "@contexts/SearchImageContext";
+
+// TODO: lots of stuff to do with Entities, this could be seperated into a centralized place.
+const CategoryColor: Record<
+	keyof ReturnType<SearchImageStore["categories"]>,
+	string
+> = {
+	contact: "bg-orange-50",
+	location: "bg-red-50",
+	event: "bg-purple-50",
+	note: "bg-green-50",
+};
+
+export const Categories: Component = () => {
+	const { categories } = useSearchImageContext();
+
+	return (
+		<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 rounded-xl bg-white p-4">
+			<For each={Object.entries(categories())}>
+				{([category, group]) => (
+					<A
+						href={`/gallery/${category}`}
+						class={
+							"col-span-2 flex flex-col justify-center items-center rounded-lg p-4 border border-neutral-200 " +
+							"capitalize " +
+							CategoryColor[category as keyof typeof CategoryColor] +
+							" " +
+							(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
+						}
+					>
+						<p class="text-xl font-bold">{category}s</p>
+						<p class="text-lg">{group.length}</p>
+					</A>
+				)}
+			</For>
+		</div>
+	);
+};

frontend/src/pages/front/index.tsx

@@ -0,0 +1 @@
+export * from "./page";

frontend/src/pages/front/page.tsx

@@ -0,0 +1,11 @@
+import { Categories } from "./gallery";
+import { Recent } from "./Recent";
+
+export const FrontPage = () => {
+	return (
+		<main class="container pt-2">
+			<Categories />
+			<Recent />
+		</main>
+	);
+};

frontend/src/pages/gallery/index.tsx

@@ -0,0 +1,50 @@
+import { Component, For, Show } from "solid-js";
+import { useParams } from "@solidjs/router";
+import { union, literal, safeParse, InferOutput, parse } from "valibot";
+import { useSearchImageContext } from "@contexts/SearchImageContext";
+import { SearchCard } from "@components/search-card/SearchCard";
+
+const entityValidator = union([
+	literal("event"),
+	literal("note"),
+	literal("location"),
+	literal("contact"),
+]);
+
+const EntityGallery: Component<{
+	entity: InferOutput<typeof entityValidator>;
+}> = (props) => {
+	// Just to be doubly sure.
+	parse(entityValidator, props.entity);
+
+	// These names are being silly. Entity or Category?
+	const { images } = useSearchImageContext();
+
+	const filteredCategories = () =>
+		images().filter((i) => i.type === props.entity);
+
+	return (
+		<div class="w-full flex flex-col gap-4 capitalize bg-white container p-4">
+			<h2 class="font-bold text-xl">{props.entity}s</h2>
+			<div class="grid grid-cols-3 gap-4">
+				<For each={filteredCategories()}>
+					{(category) => <SearchCard item={category} />}
+				</For>
+			</div>
+		</div>
+	);
+};
+
+export const Gallery: Component = () => {
+	const params = useParams();
+	const validated = safeParse(entityValidator, params.entity);
+
+	return (
+		<Show
+			when={validated.success}
+			fallback={<p>Sorry, this entity is not supported</p>}
+		>
+			<EntityGallery entity={validated.output as any} />
+		</Show>
+	);
+};

frontend/src/pages/image/index.tsx

@@ -0,0 +1,29 @@
+import { SearchCard } from "@components/search-card/SearchCard";
+import { useSearchImageContext } from "@contexts/SearchImageContext";
+import { base, UserImage } from "@network/index";
+import { useParams } from "@solidjs/router";
+import { For, Show, type Component } from "solid-js";
+
+export const ImagePage: Component = () => {
+	const { imageId } = useParams<{ imageId: string }>();
+
+	const { imagesWithProperties } = useSearchImageContext();
+
+	const imageProperties = (): UserImage[] | undefined =>
+		Object.entries(imagesWithProperties()).find(([id]) => id === imageId)?.[1];
+
+	return (
+		<main class="flex flex-col items-center">
+			<img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} />
+			<div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
+				<Show when={imageProperties()}>
+					{(image) => (
+						<For each={image()}>
+							{(property) => <SearchCard item={property} />}
+						</For>
+					)}
+				</Show>
+			</div>
+		</main>
+	);
+};

frontend/src/pages/index.ts

@@ -0,0 +1,3 @@
+export * from "./front";
+export * from "./gallery";
+export * from "./image";