88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
// Caja de herramientas con tipos de preguntas disponibles
|
|
// Funcionalidades:
|
|
// - Lista de elementos arrastrables
|
|
// - Tipos disponibles: Título, Pregunta Simple, Opción Múltiple, Opción Única, Selección
|
|
// - Cada elemento es arrastrable al área de construcción
|
|
'use client';
|
|
|
|
import { Card, CardContent } from '@repo/shadcn/card';
|
|
import { QuestionType } from '../../schemas/survey';
|
|
import { useDraggable } from '@dnd-kit/core';
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
|
|
const questionTypes = [
|
|
{
|
|
type: QuestionType.TITLE,
|
|
label: 'Título',
|
|
icon: '📝',
|
|
},
|
|
{
|
|
type: QuestionType.SIMPLE,
|
|
label: 'Pregunta Simple',
|
|
icon: '✏️',
|
|
},
|
|
{
|
|
type: QuestionType.MULTIPLE_CHOICE,
|
|
label: 'Opción Múltiple',
|
|
icon: '☑️',
|
|
},
|
|
{
|
|
type: QuestionType.SINGLE_CHOICE,
|
|
label: 'Opción Única',
|
|
icon: '⭕',
|
|
},
|
|
{
|
|
type: QuestionType.SELECT,
|
|
label: 'Selección',
|
|
icon: '📋',
|
|
},
|
|
];
|
|
|
|
function DraggableItem({ type, label, icon }: { type: string; label: string; icon: string }) {
|
|
const { attributes, listeners, setNodeRef, transform } = useDraggable({
|
|
id: type,
|
|
data: {
|
|
type,
|
|
isTemplate: true,
|
|
},
|
|
});
|
|
|
|
const style = transform ? {
|
|
transform: CSS.Translate.toString(transform),
|
|
} : undefined;
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
{...listeners}
|
|
{...attributes}
|
|
className="p-3 bg-background border rounded-lg cursor-move hover:bg-accent touch-none"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span>{icon}</span>
|
|
<span>{label}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function QuestionToolbox() {
|
|
return (
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<h3 className="font-semibold mb-4">Elementos Disponibles</h3>
|
|
<div className="space-y-2">
|
|
{questionTypes.map((item) => (
|
|
<DraggableItem
|
|
key={item.type}
|
|
type={item.type}
|
|
label={item.label}
|
|
icon={item.icon}
|
|
/>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |