feat: showing description on image page in frontend

frontend/src/pages/front/gallery.tsx

@@ -14,7 +14,6 @@ const CategoryColor: Record<
 	contact: "bg-orange-50",
 	location: "bg-red-50",
 	event: "bg-purple-50",
-	note: "bg-green-50",
 };
 
 const colors = [

frontend/src/pages/image/index.tsx

@@ -1,14 +1,21 @@
 import { ImageComponent } from "@components/image";
 import { SearchCard } from "@components/search-card/SearchCard";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
-import { base, UserImage } from "@network/index";
+import { UserImage } from "@network/index";
 import { useParams } from "@solidjs/router";
-import { For, Show, type Component } from "solid-js";
+import { createEffect, For, Show, type Component } from "solid-js";
+import SolidjsMarkdown from "solidjs-markdown";
 
 export const ImagePage: Component = () => {
 	const { imageId } = useParams<{ imageId: string }>();
 
-	const { imagesWithProperties } = useSearchImageContext();
+	const { imagesWithProperties, userImages } = useSearchImageContext();
+
+	const image = () => userImages().find((i) => i.ImageID === imageId);
+
+	createEffect(() => {
+		console.log(userImages());
+	});
 
 	const imageProperties = (): UserImage[] | undefined =>
 		Object.entries(imagesWithProperties()).find(([id]) => id === imageId)?.[1];
@@ -18,6 +25,10 @@ export const ImagePage: Component = () => {
 			<div class="w-full bg-white rounded-xl p-4">
 				<ImageComponent ID={imageId} />
 			</div>
+			<div>
+				<h2 class="font-bold text-xl">Description</h2>
+				<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>
+			</div>
 			<div class="w-full grid grid-cols-3 gap-2 grid-flow-row-dense p-4 bg-white rounded-xl">
 				<Show when={imageProperties()}>
 					{(image) => (