feat: gallery page working for each individual entity

frontend/src/components/search-card/SearchCard.tsx

@@ -4,19 +4,27 @@ import { SearchCardEvent } from "./SearchCardEvent";
 import { SearchCardLocation } from "./SearchCardLocation";
 import { SearchCardNote } from "./SearchCardNote";
 
-export const SearchCard = (props: { item: UserImage }) => {
-    const { item } = props;
+const UnwrappedSearchCard = (props: { item: UserImage }) => {
+	const { item } = props;
 
-    switch (item.type) {
-        case "location":
-            return <SearchCardLocation item={item} />;
-        case "event":
-            return <SearchCardEvent item={item} />;
-        case "note":
-            return <SearchCardNote item={item} />;
-        case "contact":
-            return <SearchCardContact item={item} />;
-        default:
-            return null;
-    }
+	switch (item.type) {
+		case "location":
+			return <SearchCardLocation item={item} />;
+		case "event":
+			return <SearchCardEvent item={item} />;
+		case "note":
+			return <SearchCardNote item={item} />;
+		case "contact":
+			return <SearchCardContact item={item} />;
+		default:
+			return null;
+	}
+};
+
+export const SearchCard = (props: { item: UserImage }) => {
+	return (
+		<div class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl">
+			<UnwrappedSearchCard item={props.item} />
+		</div>
+	);
 };

frontend/src/gallery/index.tsx

@@ -1,5 +1,5 @@
 import { Component, For, Show } from "solid-js";
-import { useParams } from "@solidjs/router";
+import { A, useParams } from "@solidjs/router";
 import { union, literal, safeParse, InferOutput, parse } from "valibot";
 import { useSearchImageContext } from "../contexts/SearchImageContext";
 import { SearchCard } from "../components/search-card/SearchCard";
@@ -24,9 +24,9 @@ const EntityGallery: Component<{
 		images().filter((i) => i.type === props.entity);
 
 	return (
-		<div class="flex flex-col gap-4 capitalize">
-			<h2>{props.entity}s</h2>
-			<div class="grid grid-cols-3">
+		<div class="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>
@@ -44,6 +44,7 @@ export const Gallery: Component = () => {
 			when={validated.success}
 			fallback={<p>Sorry, this entity is not supported</p>}
 		>
+			<A href="/">Home</A>
 			<EntityGallery entity={validated.output as any} />
 		</Show>
 	);