chore: using ts aliases

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