'use client'; import React, { createContext, useContext, useId, useRef, useState } from 'react'; import { motion, useMotionValue, useSpring, useTransform, useVelocity, PanInfo, } from 'framer-motion'; import { type ClassValue, clsx } from 'clsx'; import { twMerge } from 'tailwind-merge'; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } interface PolaroidContextValue { containerRef: React.RefObject; bringToFront: (id: string) => void; getZIndex: (id: string) => number; enableConstraints: boolean; } const PolaroidContext = createContext(null); function usePolaroid() { const context = useContext(PolaroidContext); if (!context) { throw new Error('Polaroid components must be used within a '); } return context; } export interface PolaroidGalleryProps extends React.HTMLAttributes { children: React.ReactNode; enableConstraints?: boolean; } export const PolaroidGallery = React.forwardRef( ({ children, className, enableConstraints = true, ...props }, ref) => { const internalRef = useRef(null); const containerRef = (ref as React.RefObject) || internalRef; const [cardOrder, setCardOrder] = useState([]); const bringToFront = (id: string) => { setCardOrder((prev) => [...prev.filter((cardId) => cardId !== id), id]); }; const getZIndex = (id: string) => { const index = cardOrder.indexOf(id); return index === -1 ? 10 : 10 + index; }; return (

{children}

); } ); PolaroidGallery.displayName = 'PolaroidGallery'; export interface PolaroidArenaProps extends React.HTMLAttributes { children: React.ReactNode; } export const PolaroidArena = React.forwardRef( ({ children, className, ...props }, ref) => { return (

{children}

); } ); PolaroidArena.displayName = 'PolaroidArena'; export interface PolaroidCardProps { id?: string; src: string; alt?: string; caption?: string; aspectRatio?: 'square' | 'portrait' | 'classic' | 'landscape'; rotate?: number; initialX?: number; initialY?: number; textColor?: string; size?: 'sm' | 'md' | 'lg'; showTape?: boolean; showPin?: boolean; className?: string; } export const PolaroidCard: React.FC = ({ id, src, alt = 'عکس پولاروید', caption, aspectRatio = 'square', rotate = 0, initialX = 0, initialY = 0, textColor, size = 'md', showTape = false, showPin = false, className, }) => { // `useId` instead of a random string in a ref: the random call ran on every // render even though only the first was kept, and a random id differs between // the server render and the client, while `useId` is stable and unique per // instance on both. const generatedId = useId(); const cardId = id || generatedId; const { containerRef, bringToFront, getZIndex, enableConstraints } = usePolaroid(); const [isDragging, setIsDragging] = useState(false); const x = useMotionValue(initialX); const y = useMotionValue(initialY); const xVelocity = useVelocity(x); const rawTilt = useTransform(xVelocity, [-2000, 0, 2000], [-18, 0, 18]); const smoothTilt = useSpring(rawTilt, { stiffness: 350, damping: 25 }); const dynamicRotate = useTransform(smoothTilt, (v) => (isDragging ? rotate + v : rotate)); const handleDragStart = () => { setIsDragging(true); bringToFront(cardId); }; const handleDragEnd = (_e: MouseEvent | TouchEvent | PointerEvent, _info: PanInfo) => { setIsDragging(false); }; const sizeClasses = { sm: 'w-[230px] p-2.5 pb-9', md: 'w-[280px] p-3 pb-12', lg: 'w-[330px] p-3.5 pb-14', }[size]; const aspectClasses = { square: 'aspect-square', portrait: 'aspect-[3/4]', classic: 'aspect-[4/5]', landscape: 'aspect-[4/3]', }[aspectRatio]; const captionSizes = { sm: 'text-xl', md: 'text-2xl', lg: 'text-3xl', }[size]; return (

bringToFront(cardId)} className={cn( 'relative rounded-[2px] bg-white cursor-grab active:cursor-grabbing select-none border border-neutral-100/60 transition-shadow duration-300', sizeClasses, isDragging ? 'shadow-[0_30px_60px_-12px_rgba(0,0,0,0.22),0_18px_36px_-18px_rgba(0,0,0,0.18)]' : 'shadow-[0_10px_30px_rgba(0,0,0,0.06),0_4px_12px_rgba(0,0,0,0.03)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.1)]', className )} > {showTape && (

)} {showPin && (

)}

{caption && (

{caption}

)}

); }; export default function PolaroidDrag() { return ( ); }