base con autenticacion, registro, modulo encuestas

apps/web/feactures/surveys/components/admin/question-toolbox.tsx

@@ -0,0 +1,88 @@
+// 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>
+  );
+}