feat: frontend page images

frontend/src/components/image/index.tsx

@@ -4,8 +4,11 @@ import { A } from "@solidjs/router";
 
 export const ImageComponent: Component<{ ID: string }> = (props) => {
 	return (
-		<A href={`/image/${props.ID}`}>
+		<A href={`/image/${props.ID}`} class="w-full h-full">
-			<img src={`${base}/image/${props.ID}`} />
+			<img
+				class="w-full h-full object-contain"
+				src={`${base}/image/${props.ID}`}
+			/>
 		</A>
 	);
 };

frontend/src/pages/front/Recent.tsx

@@ -14,11 +14,13 @@ export const Recent: Component = () => {
 			.slice(0, 10);
 
 	return (
-		<div>
+		<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
-			<h2>Recent</h2>
+			<h2 class="text-xl font-bold">Recent Screenshots</h2>
+			<div class="grid grid-cols-3 place-items-center">
 				<For each={latestImages()}>
 					{(image) => <ImageComponent ID={image.ImageID} />}
 				</For>
 			</div>
+		</div>
 	);
 };

frontend/src/pages/front/gallery.tsx

@@ -20,7 +20,9 @@ export const Categories: Component = () => {
 	const { categories } = useSearchImageContext();
 
 	return (
-		<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 rounded-xl bg-white p-4">
+		<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
+			<h2 class="text-xl font-bold">Entities</h2>
+			<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4">
 				<For each={Object.entries(categories())}>
 					{([category, group]) => (
 						<A
@@ -39,5 +41,6 @@ export const Categories: Component = () => {
 					)}
 				</For>
 			</div>
+		</div>
 	);
 };