43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
import { ImageComponentFullHeight } from "@components/image";
|
|
import { StackCard } from "@components/stack-card";
|
|
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
|
import { useNavigate, useParams } from "@solidjs/router";
|
|
import { For, type Component } from "solid-js";
|
|
import SolidjsMarkdown from "solidjs-markdown";
|
|
|
|
export const ImagePage: Component = () => {
|
|
const { imageId } = useParams<{ imageId: string }>();
|
|
const nav = useNavigate();
|
|
|
|
const { userImages, stacks, onDeleteImage } = useSearchImageContext();
|
|
|
|
const image = () => userImages().find((i) => i.ID === imageId);
|
|
|
|
return (
|
|
<main class="flex flex-col items-center gap-4">
|
|
<div class="w-full bg-white rounded-xl p-4">
|
|
<ImageComponentFullHeight ID={imageId} onDelete={(id) => {
|
|
onDeleteImage(id);
|
|
nav("/");
|
|
}} />
|
|
</div>
|
|
<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
|
|
<h2 class="font-bold text-2xl">Stacks</h2>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<For each={image()?.ImageStacks}>
|
|
{(imageList) => (
|
|
<StackCard
|
|
stack={stacks().find((l) => l.ID === imageList.StackID)!}
|
|
/>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
<div class="w-full bg-white rounded-xl p-4">
|
|
<h2 class="font-bold text-2xl">Description</h2>
|
|
<SolidjsMarkdown>{image()?.Description}</SolidjsMarkdown>
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|