JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

showing a full height image in image page

Browse Source
This commit is contained in:
John Costa
2025-08-25 14:34:55 +01:00
parent 61d2b81e8c
commit 6523b10699
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/image/index.tsx
View File

@ -12,3 +12,14 @@ export const ImageComponent: Component<{ ID: string }> = (props) => {
</A> </A>
); );
}; };
export const ImageComponentFullHeight: Component<{ ID: string }> = (props) => {
return (
<A href={`/image/${props.ID}`} class="w-full flex justify-center">
<img
class="flex w-full object-cover rounded-xl"
src={`${base}/images/${props.ID}`}
/>
</A>
);
};

4
frontend/src/pages/image/index.tsx
View File

@ -1,4 +1,4 @@
import { ImageComponent } from "@components/image"; import { ImageComponentFullHeight } from "@components/image";
import { useSearchImageContext } from "@contexts/SearchImageContext"; import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useParams } from "@solidjs/router"; import { useParams } from "@solidjs/router";
import { For, type Component } from "solid-js"; import { For, type Component } from "solid-js";
@ -15,7 +15,7 @@ export const ImagePage: Component = () => {
return ( return (
<main class="flex flex-col items-center gap-4"> <main class="flex flex-col items-center gap-4">
<div class="w-full bg-white rounded-xl p-4"> <div class="w-full bg-white rounded-xl p-4">
<ImageComponent ID={imageId} /> <ImageComponentFullHeight ID={imageId} />
</div> </div>
<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4"> <div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
<h2 class="font-bold text-2xl">Description</h2> <h2 class="font-bold text-2xl">Description</h2>