Refactor AlbumCard and AlbumDetail components to use next/image for optimized image handling

- Replaced direct imports of Image from Mantine with next/image for better performance.
- Updated image properties in AlbumCard and AlbumDetail to include width and height attributes.
- Adjusted layout in HomePage to use responsive column settings for SimpleGrid.
- Enhanced styling for disclaimer text in HomePage for improved readability.

src/Components/AlbumCard.tsx

@@ -2,9 +2,10 @@
 
 import { getThemeColors } from "@/lib/themes";
 import type { Album } from "../lib/ListTypes";
-import { Box, Card, Image, Text, Badge, Group } from "@mantine/core";
+import { Box, Card, Text, Badge, Group } from "@mantine/core";
 import { Link } from "next-view-transitions";
 import { useState } from "react";
+import Image from "next/image";
 
 export default function AlbumCard({ album }: { album: Album }) {
 	const { label, releaseDate, image, tracks } = album;
@@ -62,7 +63,8 @@ export default function AlbumCard({ album }: { album: Album }) {
 						<Image
 							src={image}
 							alt={label}
-							radius="md"
+							width={450}
+							height={450}
 							className="aspect-square w-full object-cover transition-transform duration-500 group-hover:scale-110"
 						/>
 					</Box>

src/app/album/[albumId]/page.tsx

@@ -1,10 +1,10 @@
 import { notFound } from "next/navigation";
-import { Box, Container, Title, Text, Image, Stack, Grid, GridCol } from "@mantine/core";
+import { Box, Container, Title, Text, Stack, Grid, GridCol } from "@mantine/core";
 import { albums } from "../../../lib/list";
 import BackButton from "../../../Components/BackButton";
 import { getThemeColors } from "@/lib/themes";
 import TrackCard from "@/Components/TrackCard";
-
+import Image from "next/image";
 export function generateStaticParams() {
 	return albums.map((album) => ({
 		albumId: album.id,
@@ -64,12 +64,9 @@ export default async function AlbumDetail({ params }: { params: Promise<{ albumI
 							<Image
 								src={album.image}
 								alt={album.label}
-								h={200}
-								w={200}
-								className="aspect-square!"
-								style={{
-									borderRadius: "4px",
-								}}
+								width={200}
+								height={200}
+								className="aspect-square w-full object-cover transition-transform duration-500 group-hover:scale-110"
 							/>
 						</Box>
 					</GridCol>

src/app/api/favico/route.tsx

@@ -5,14 +5,11 @@ import { cookies } from "next/headers";
 // Absolute URL redirect is required by Next.js middleware & API routes
 export async function GET(request: NextRequest) {
 	const urlENV = process.env.URL;
-	console.log("🚀 ~ route.tsx:9 ~ GET ~ urlENV:", urlENV);
 
 	const url = new URL(request.url);
-	console.log("🚀 ~ route.tsx:8 ~ GET ~ url:", url);
 	const randParam = url.searchParams.get("rand");
 	const cookieStore = await cookies();
 	const lastImage = cookieStore.get("lastImage")?.value;
-	console.log("🚀 ~ route.tsx:12 ~ GET ~ lastImage:", lastImage);
 
 	// Get all available albums, excluding the previous image
 	const availableAlbums = lastImage ? albums.filter((album) => album.image !== lastImage) : albums;
@@ -25,16 +22,13 @@ export async function GET(request: NextRequest) {
 		randomIndex = Math.floor(Math.random() * availableAlbums.length);
 	}
 	const album = availableAlbums[randomIndex];
-	console.log("🚀 ~ route.tsx:25 ~ GET ~ album:", album);
 	cookieStore.set("lastImage", album.image);
 
 	// Ensure image path starts with a slash
 	const imagePath = album.image.startsWith("/") ? album.image : `/${album.image}`;
-	console.log("🚀 ~ route.tsx:29 ~ GET ~ imagePath:", imagePath);
 	// Build absolute URL for the redirect
 	const { nextUrl } = request;
 	const absoluteUrl = urlENV ? `${urlENV}${imagePath}` : `${nextUrl.protocol}//${nextUrl.host}${imagePath}`;
-	console.log("🚀 ~ route.tsx:33 ~ GET ~ absoluteUrl:", absoluteUrl);
 
 	return NextResponse.redirect(absoluteUrl, 307);
 }

src/app/page.tsx

@@ -20,7 +20,7 @@ export default function HomePage() {
 						</Text>
 					</Box>
 
-					<SimpleGrid cols={3} className="gap-8">
+					<SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} className="gap-8">
 						{albums.map((album) => (
 							<AlbumCard key={album.id} album={album} />
 						))}
@@ -29,7 +29,7 @@ export default function HomePage() {
 			</Box>
 			<Box className="bg-gray-900 pb-12">
 				<Center>
-					<Text size="sm" className="text-gray-400">
+					<Text size="sm" className="px-4 text-gray-400 sm:px-0">
 						Disclaimer: This website is not affiliated with Linkin Park or any of its members. <br />
 						All rights reserved to the respective owners. This website is a fan-made project and is not intended to be used
 						for commercial purposes.