feat: tutorial for adding mii

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

@@ -11,6 +11,7 @@ import Carousel from "@/components/carousel";
 import LikeButton from "@/components/like-button";
 import ImageViewer from "@/components/image-viewer";
 import DeleteMiiButton from "@/components/delete-mii";
+import ScanTutorialButton from "@/components/tutorial/scan";
 
 interface Props {
 	params: Promise<{ slug: string }>;
@@ -161,16 +162,21 @@ export default async function MiiPage({ params }: Props) {
 								From: <span className="text-right">{mii.islandName} Island</span>
 							</li>
 							<li>
-								Copying: <input type="checkbox" checked={mii.allowedCopying} disabled className="checkbox !cursor-auto" />
+								Allowed Copying: <input type="checkbox" checked={mii.allowedCopying} disabled className="checkbox !cursor-auto" />
 							</li>
 						</ul>
 					</section>
-
 					<div className="flex gap-1 text-4xl justify-end text-orange-400">
-						<Link href={`/edit/${mii.id}`} title="Edit Mii">
+						{Number(session?.user.id) === mii.userId && (
+							<>
+								<Link href={`/edit/${mii.id}`} title="Edit Mii" className="aspect-square">
 									<Icon icon="mdi:pencil" />
 								</Link>
 								<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} />
+							</>
+						)}
+
+						<ScanTutorialButton />
 					</div>
 				</div>
 			</div>

src/components/delete-mii.tsx

@@ -49,7 +49,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes }: Props) {
 
 	return (
 		<>
-			<button onClick={() => setIsOpen(true)} title="Delete Mii" className="cursor-pointer">
+			<button onClick={() => setIsOpen(true)} title="Delete Mii" className="cursor-pointer aspect-square">
 				<Icon icon="mdi:trash" />
 			</button>
 

src/components/tutorial/scan.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import useEmblaCarousel from "embla-carousel-react";
+import { Icon } from "@iconify/react";
+
+import TutorialPage from "./page";
+
+export default function ScanTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
+	const [selectedIndex, setSelectedIndex] = useState(0);
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+			setSelectedIndex(0);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	useEffect(() => {
+		if (!emblaApi) return;
+		emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
+	}, [emblaApi]);
+
+	return (
+		<>
+			{/* todo: maybe make it an icon? */}
+			<button
+				type="button"
+				onClick={() => setIsOpen(true)}
+				className="text-3xl aspect-square flex justify-center items-center cursor-pointer underline-offset-2 hover:underline"
+			>
+				<Icon icon="fa:question-circle" />
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-[var(--header-height)] flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						/>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg w-full max-w-md h-[30rem] transition-discrete duration-300 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2 p-6 pb-0">
+								<h2 className="text-xl font-bold">Tutorial</h2>
+								<button onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<div className="flex flex-col min-h-0 h-full">
+								<div className="overflow-hidden h-full" ref={emblaRef}>
+									<div className="flex h-full">
+										<TutorialPage text="1. Enter the town hall" imageSrc="/tutorial/step1.png" />
+										<TutorialPage text="2. Go into 'QR Code'" imageSrc="/tutorial/adding-mii/step2.png" />
+										<TutorialPage text="3. Press 'Scan QR Code'" imageSrc="/tutorial/adding-mii/step3.png" />
+										<TutorialPage text="4. Press next on the image carousel" imageSrc="/tutorial/adding-mii/step4.gif" />
+										<TutorialPage text="5. Click the QR code image" imageSrc="/tutorial/adding-mii/step5.gif" />
+										<TutorialPage text="6. Scan with your 3DS" imageSrc="/tutorial/adding-mii/step6.png" />
+										<TutorialPage carouselIndex={selectedIndex} finishIndex={6} />
+									</div>
+								</div>
+
+								<div className="flex justify-between items-center mt-2 px-6 pb-6">
+									<button onClick={() => emblaApi?.scrollPrev()} className="pill button !p-1 aspect-square text-2xl">
+										<Icon icon="tabler:chevron-left" />
+									</button>
+
+									<span className="text-sm">Adding Mii to Island</span>
+
+									<button onClick={() => emblaApi?.scrollNext()} className="pill button !p-1 aspect-square text-2xl">
+										<Icon icon="tabler:chevron-right" />
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>,
+					document.body
+				)}
+		</>
+	);
+}