feat: image carousels

package.json

@@ -12,6 +12,7 @@
 	"dependencies": {
 		"@auth/prisma-adapter": "2.7.2",
 		"@prisma/client": "^6.5.0",
+		"embla-carousel-react": "^8.5.2",
 		"next": "15.2.4",
 		"next-auth": "5.0.0-beta.25",
 		"react": "^19.0.0",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@prisma/client':
         specifier: ^6.5.0
         version: 6.5.0(prisma@6.5.0(typescript@5.8.2))(typescript@5.8.2)
+      embla-carousel-react:
+        specifier: ^8.5.2
+        version: 8.5.2(react@19.0.0)
       next:
         specifier: 15.2.4
         version: 15.2.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -962,6 +965,19 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  embla-carousel-react@8.5.2:
+    resolution: {integrity: sha512-Tmx+uY3MqseIGdwp0ScyUuxpBgx5jX1f7od4Cm5mDwg/dptEiTKf9xp6tw0lZN2VA9JbnVMl/aikmbc53c6QFA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.5.2:
+    resolution: {integrity: sha512-QC8/hYSK/pEmqEdU1IO5O+XNc/Ptmmq7uCB44vKplgLKhB/l0+yvYx0+Cv0sF6Ena8Srld5vUErZkT+yTahtDg==}
+    peerDependencies:
+      embla-carousel: 8.5.2
+
+  embla-carousel@8.5.2:
+    resolution: {integrity: sha512-xQ9oVLrun/eCG/7ru3R+I5bJ7shsD8fFwLEY7yPe27/+fDHCNj0OT5EoG5ZbFyOxOcG6yTwW8oTz/dWyFnyGpg==}
+
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
@@ -2766,6 +2782,18 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  embla-carousel-react@8.5.2(react@19.0.0):
+    dependencies:
+      embla-carousel: 8.5.2
+      embla-carousel-reactive-utils: 8.5.2(embla-carousel@8.5.2)
+      react: 19.0.0
+
+  embla-carousel-reactive-utils@8.5.2(embla-carousel@8.5.2):
+    dependencies:
+      embla-carousel: 8.5.2
+
+  embla-carousel@8.5.2: {}
+
   emoji-regex@9.2.2: {}
 
   enhanced-resolve@5.18.1:

src/app/components/carousel.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	images: string[];
+	className?: string;
+}
+
+export default function Carousel({ images, className }: Props) {
+	const [emblaRef, emblaApi] = useEmblaCarousel();
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+	useEffect(() => {
+		if (!emblaApi) return;
+		setScrollSnaps(emblaApi.scrollSnapList());
+		emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
+	}, [emblaApi]);
+
+	const scrollTo = useCallback((index: number) => emblaApi && emblaApi.scrollTo(index), [emblaApi]);
+	const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi]);
+	const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
+
+	return (
+		<div className="relative max-w-lg">
+			<div className={`overflow-hidden rounded-xl bg-zinc-300 border-2 border-zinc-300 ${className}`} ref={emblaRef}>
+				<div className="flex">
+					{images.map((src, index) => (
+						<div key={index} className="flex-[0_0_100%]">
+							<img src={src} alt="" className="w-full h-auto" />
+						</div>
+					))}
+				</div>
+			</div>
+
+			<button onClick={scrollPrev} className="absolute left-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl cursor-pointer">
+				<Icon icon="ic:round-chevron-left" />
+			</button>
+			<button onClick={scrollNext} className="absolute right-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl cursor-pointer">
+				<Icon icon="ic:round-chevron-right" />
+			</button>
+
+			<div className="flex justify-center gap-2 absolute left-1/2 -translate-x-1/2 bottom-2">
+				{scrollSnaps.map((_, index) => (
+					<button
+						key={index}
+						onClick={() => scrollTo(index)}
+						className={`size-1.5 rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}

src/app/components/mii-list.tsx

@@ -1,10 +1,11 @@
+import Link from "next/link";
 import { Prisma } from "@prisma/client";
 
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 
+import Carousel from "./carousel";
 import LikeButton from "./like-button";
-import Link from "next/link";
 
 interface Props {
 	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
@@ -120,9 +121,8 @@ export default async function MiiList({ searchParams, userId }: Props) {
 						key={mii.id}
 						className="flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3 transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600"
 					>
-						<Link href={`/mii/${mii.id}`}>
+						<Carousel images={["https://placehold.co/600x400", "https://placehold.co/600x400", "https://placehold.co/600x400"]} />
-							<img src="https://placehold.co/600x400" alt="mii" className="rounded-xl border-2 border-zinc-300" />
+
-						</Link>
 						<div className="p-4 flex flex-col gap-1 h-full">
 							<Link href={`/mii/${mii.id}`} className="font-bold text-2xl overflow-hidden text-ellipsis line-clamp-2" title={mii.name}>
 								{mii.name}

src/app/mii/[slug]/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 
+import Carousel from "@/app/components/carousel";
 import LikeButton from "@/app/components/like-button";
 
 interface Props {
@@ -38,7 +39,8 @@ export default async function ProfilePage({ params }: Props) {
 
 	return (
 		<div className="flex gap-2 max-sm:flex-col">
-			<img src="https://placehold.co/400x300" alt="mii" className="rounded-xl border-2 border-zinc-300 shadow-lg" />
+			<Carousel images={["https://placehold.co/600x400", "https://placehold.co/600x400", "https://placehold.co/600x400"]} className="shadow-lg" />
+
 			<div className="flex flex-col gap-1 p-4">
 				<h1 className="text-5xl font-extrabold break-words">{mii?.name}</h1>
 				<div id="tags" className="flex gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">