59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { motion } from "framer-motion"
|
|
|
|
export interface CuisenaireRodProps {
|
|
value: number
|
|
color: string
|
|
length: number
|
|
draggable?: boolean
|
|
onDrop?: (value: number) => void
|
|
}
|
|
|
|
const rodColors: Record<number, string> = {
|
|
1: "#FFFFFF",
|
|
2: "#E74C3C",
|
|
3: "#2ECC71",
|
|
4: "#E91E63",
|
|
5: "#F1C40F",
|
|
6: "#1ABC9C",
|
|
7: "#2C3E50",
|
|
8: "#3498DB",
|
|
9: "#9B59B6",
|
|
10: "#E67E22",
|
|
}
|
|
|
|
const rodLengths: Record<number, number> = {
|
|
1: 20, 2: 40, 3: 60, 4: 80, 5: 100,
|
|
6: 120, 7: 140, 8: 160, 9: 180, 10: 200,
|
|
}
|
|
|
|
export { rodColors, rodLengths }
|
|
|
|
export function CuisenaireRod({ value, color, length, draggable = false }: CuisenaireRodProps) {
|
|
const [isDragging, setIsDragging] = useState(false)
|
|
|
|
return (
|
|
<motion.div
|
|
className={`rounded-lg border border-border/50 shadow-sm touch-target select-none ${
|
|
draggable ? "cursor-grab" : ""
|
|
} ${isDragging ? "cursor-grabbing z-10" : ""}`}
|
|
style={{
|
|
width: `${length}px`,
|
|
minWidth: `${length}px`,
|
|
height: "40px",
|
|
backgroundColor: color,
|
|
borderColor: value === 1 ? "#ddd" : undefined,
|
|
}}
|
|
whileTap={draggable ? { scale: 1.08 } : undefined}
|
|
drag={draggable}
|
|
dragElastic={0.1}
|
|
dragMomentum={false}
|
|
onDragStart={() => setIsDragging(true)}
|
|
onDragEnd={() => setIsDragging(false)}
|
|
dragConstraints={{ left: -400, right: 400, top: -300, bottom: 300 }}
|
|
/>
|
|
)
|
|
}
|