feat: image carousels

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}`}>
-							<img src="https://placehold.co/600x400" alt="mii" className="rounded-xl border-2 border-zinc-300" />
-						</Link>
+						<Carousel images={["https://placehold.co/600x400", "https://placehold.co/600x400", "https://placehold.co/600x400"]} />
+
 						<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">