import React, { useEffect, useState } from 'react' import { motion, useAnimate } from "framer-motion" import { cn } from '../../lib/utils' type SelectCard = { id: string, title: string, img: string, } const MOCKUP_CARDS: SelectCard[] = [{ id: "paris", title: "Paris", img: "/countries/paris.jpeg" }, { id: "london", title: "London", img: "/countries/london.jpeg" }, { id: "berlin", title: "Berlin", img: "/countries/berlin.jpeg" }, ] const CARD_WIDTH = 256 const CARDS_GAP = 16 const ImageCardSelectorExample = () => { const data = MOCKUP_CARDS const [scope, animate] = useAnimate() const [activeSelectedCard, setActiveSelectedCard] = useState(data[0]) const lineWidth = CARD_WIDTH * data.length + CARDS_GAP * (data.length - 1) useEffect(() => { if (!activeSelectedCard) return const indexOfActiveSelectedCard = data.indexOf(activeSelectedCard) var lineX = 0 if (indexOfActiveSelectedCard !== 0) { lineX = CARD_WIDTH * indexOfActiveSelectedCard + ((CARDS_GAP) * indexOfActiveSelectedCard) } animate(scope.current, { x: lineX }) }, [activeSelectedCard]) return (

{data.map(card => )}

{activeSelectedCard && }

) } type SelectCardProps = { selectCard: SelectCard, activeSelectedCard: SelectCard | null, setActiveSelectedCard: React.Dispatch> } const SelectCard = ({ selectCard, activeSelectedCard, setActiveSelectedCard }: SelectCardProps) => { const isSelected = selectCard.id === activeSelectedCard?.id function handleClick() { if (isSelected) { setActiveSelectedCard(null) return } setActiveSelectedCard(selectCard) } return (

{selectCard.title}

) } export default ImageCardSelectorExample

Select

Image Card Selector

Tab Selector