"use client"; import { AnimatePresence, motion } from "framer-motion"; import Image from "next/image"; import React from "react"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { cn } from "@/app/utils/cn"; const items = [ { title: "SPACE", city: "Orlando", state: "FL", image: "https://images.unsplash.com/photo-1541873676-a18131494184?q=80&w=1436&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, { title: "SPACE", city: "Leadville", state: "CO", image: "https://images.unsplash.com/photo-1614315517650-3771cf72d18a?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, { title: "SPACE", city: "Paradise", state: "WA", image: "https://images.unsplash.com/photo-1637958653605-4590ff5fc440?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, { title: "SPACE", city: "White Sulphur Springs", state: "MT", image: "https://images.unsplash.com/photo-1494022299300-899b96e49893?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, ]; function NavigationIndicator({ index }: { index: number }) { return (

{Array.from({ length: items.length }).map((_, i) => ( ))}

); } function NavButton({ direction, index, setIndex, setStatus, }: { direction: "next" | "previous"; index: number; setIndex: React.Dispatch>; setStatus: React.Dispatch>; }) { const handleClick = () => { if (direction === "previous" && index > 0) { setIndex((prev) => prev - 1); } else if (direction === "next" && index < items.length - 1) { setIndex((prev) => prev + 1); } }; const isPrevious = direction === "previous"; return ( ); } const PerspectiveContainer = ({ index, setIndex, status, setStatus, }: { index: number; setIndex: React.Dispatch>; status: string; setStatus: React.Dispatch>; }) => { const location = items[index]; const isPressingNext = status === "next"; const isPressingPrevious = status === "previous"; return (

{location.city}

{`lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur adipiscing elit. Sed sed diam nonum et justo utet dolor. Etiam`}

); }; const Perspective = () => { const [index, setIndex] = React.useState(2); const [status, setStatus] = React.useState("idle"); return ( ); }; export default Perspective;

Animated carousel

Expandable

Smooth Carousel

Dependencies

Animated carousel

Dependencies