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}`}>
-			<img src={`${base}/image/${props.ID}`} />
+		<A href={`/image/${props.ID}`} class="w-full h-full">
+			<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>
-			<h2>Recent</h2>
-			<For each={latestImages()}>
-				{(image) => <ImageComponent ID={image.ImageID} />}
-			</For>
+		<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
+			<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,24 +20,27 @@ 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">
-			<For each={Object.entries(categories())}>
-				{([category, group]) => (
-					<A
-						href={`/gallery/${category}`}
-						class={
-							"col-span-2 flex flex-col justify-center items-center rounded-lg p-4 border border-neutral-200 " +
-							"capitalize " +
-							CategoryColor[category as keyof typeof CategoryColor] +
-							" " +
-							(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
-						}
-					>
-						<p class="text-xl font-bold">{category}s</p>
-						<p class="text-lg">{group.length}</p>
-					</A>
-				)}
-			</For>
+		<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
+							href={`/gallery/${category}`}
+							class={
+								"col-span-2 flex flex-col justify-center items-center rounded-lg p-4 border border-neutral-200 " +
+								"capitalize " +
+								CategoryColor[category as keyof typeof CategoryColor] +
+								" " +
+								(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
+							}
+						>
+							<p class="text-xl font-bold">{category}s</p>
+							<p class="text-lg">{group.length}</p>
+						</A>
+					)}
+				</For>
+			</div>
 		</div>
 	);
 };