feat: showing the lists which an image is a part of

frontend/src/pages/image/index.tsx

@@ -1,13 +1,15 @@
 import { ImageComponent } from "@components/image";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
 import { useParams } from "@solidjs/router";
-import { type Component } from "solid-js";
+import { For, type Component } from "solid-js";
 import SolidjsMarkdown from "solidjs-markdown";
+import { List } from "../list";
+import { ListCard } from "@components/list-card";
 
 export const ImagePage: Component = () => {
 	const { imageId } = useParams<{ imageId: string }>();
 
-	const { userImages } = useSearchImageContext();
+	const { userImages, lists } = useSearchImageContext();
 
 	const image = () => userImages().find((i) => i.ImageID === imageId);
 
@@ -16,6 +18,18 @@ export const ImagePage: Component = () => {
 			<div class="w-full bg-white rounded-xl p-4">
 				<ImageComponent ID={imageId} />
 			</div>
+			<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
+				<h2 class="font-bold text-2xl">Description</h2>
+				<div class="grid grid-cols-3 gap-4">
+					<For each={image()?.Image.ImageLists}>
+						{(imageList) => (
+							<ListCard
+								list={lists().find((l) => l.ID === imageList.ListID)!}
+							/>
+						)}
+					</For>
+				</div>
+			</div>
 			<div class="w-full bg-white rounded-xl p-4">
 				<h2 class="font-bold text-2xl">Description</h2>
 				<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>