58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { motion } from "framer-motion"
|
|
|
|
export interface CuisenaireRodProps {
|
|
value: number
|
|
color: string
|
|
length: number // in vw or px
|
|
draggable?: boolean
|
|
onDrop?: (value: number) => void
|
|
}
|
|
|
|
const rodColors: Record<number, string> = {
|
|
1: "#FFFFFF", // blanco
|
|
2: "#E74C3C", // rojo
|
|
3: "#2ECC71", // verde claro
|
|
4: "#E91E63", // rosa
|
|
5: "#F1C40F", // amarillo
|
|
6: "#1ABC9C", // verde oscuro
|
|
7: "#D35400", // naranja
|
|
8: "#3498DB", // azul
|
|
9: "#9B59B6", // púrpura
|
|
10: "#FF5733", // naranja
|
|
}
|
|
|
|
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) {
|
|
return (
|
|
<motion.div
|
|
className="rounded-lg border border-border/50 shadow-sm touch-target cursor-grab active:cursor-grabbing"
|
|
style={{
|
|
width: `${length}px`,
|
|
height: "40px",
|
|
backgroundColor: color,
|
|
borderColor: value === 1 ? "#ddd" : undefined,
|
|
}}
|
|
whileTap={{ scale: 1.05 }}
|
|
drag={draggable}
|
|
dragElastic={0.2}
|
|
dragConstraints={{ left: -200, right: 200, top: -200, bottom: 200 }}
|
|
/>
|
|
)
|
|
}
|