幻灯片缩放

// npm install motion
"use client";

import { useState } from "react";
import Image from "next/image";
import { AnimatePresence, motion } from "motion/react";

const thumbs = [
    "https://cdn.pixabay.com/photo/2023/05/08/08/41/ai-7977960_1280.jpg",
    "https://cdn.pixabay.com/photo/2020/04/20/18/10/cinema-5069314_1280.jpg",
    "https://cdn.pixabay.com/photo/2016/03/11/02/08/speedometer-1249610_1280.jpg",
    "https://cdn.pixabay.com/photo/2018/05/08/08/44/artificial-intelligence-3382507_1280.jpg",
];

export default function Page() {
    const [active, setActive] = useState<string | null>(null);
    return (
        <div className="flex min-h-screen items-center justify-center">
            <div className="grid grid-cols-2 gap-3">
                {thumbs.map((src) => (
                    <motion.button
                        key={src}
                        layoutId={src}
                        onClick={() => setActive(src)}
                        whileHover={{ scale: 1.03 }}
                        className="relative h-32 w-44 overflow-hidden"
                    >
                        <Image src={src} alt="" fill className="pointer-events-none object-cover" />
                    </motion.button>
                ))}
            </div>
            <AnimatePresence>
                {active && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        onClick={() => setActive(null)}
                        className="fixed inset-0 flex cursor-zoom-out items-center justify-center bg-black/80 p-8"
                    >
                        <motion.div
                            layoutId={active}
                            className="relative aspect-[4/3] w-full max-w-2xl overflow-hidden"
                        >
                            <Image src={active} alt="" fill className="object-cover" />
                        </motion.div>
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
}