first commit

2026-02-21 17:34:29 +07:00
commit fc7b96daf6
29 changed files with 7364 additions and 0 deletions
@@ -0,0 +1,104 @@
+import {
+  Calendar,
+  ChevronDown,
+  Star,
+} from "lucide-react"
+import type { Question } from "@/lib/dummy-data"
+
+interface QuestionPreviewProps {
+  question: Question
+  index: number
+}
+
+export function QuestionPreview({ question, index }: QuestionPreviewProps) {
+  return (
+    <div className="rounded-xl border border-border bg-card p-5 shadow-sm">
+      {/* Question header */}
+      <div className="mb-4 flex items-start gap-3">
+        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-xs font-semibold text-primary">
+          {index + 1}
+        </span>
+        <div className="flex-1">
+          <h3 className="text-sm font-semibold leading-snug text-foreground">
+            {question.title}
+            {question.required && (
+              <span className="ml-1 text-destructive">*</span>
+            )}
+          </h3>
+          <p className="mt-1 text-xs capitalize text-muted-foreground">
+            {question.type.replace("_", " ")}
+          </p>
+        </div>
+      </div>
+
+      {/* Read-only field preview */}
+      <div className="pl-10">
+        {question.type === "short_text" && (
+          <div className="rounded-lg border border-input bg-muted/50 px-3.5 py-2.5 text-sm text-muted-foreground">
+            Short answer text
+          </div>
+        )}
+
+        {question.type === "long_text" && (
+          <div className="min-h-[80px] rounded-lg border border-input bg-muted/50 px-3.5 py-2.5 text-sm text-muted-foreground">
+            Long answer text
+          </div>
+        )}
+
+        {question.type === "multiple_choice" && question.options && (
+          <div className="flex flex-col gap-2.5">
+            {question.options.map((option) => (
+              <label
+                key={option}
+                className="flex items-center gap-2.5 text-sm text-foreground"
+              >
+                <span className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-input" />
+                {option}
+              </label>
+            ))}
+          </div>
+        )}
+
+        {question.type === "checkbox" && question.options && (
+          <div className="flex flex-col gap-2.5">
+            {question.options.map((option) => (
+              <label
+                key={option}
+                className="flex items-center gap-2.5 text-sm text-foreground"
+              >
+                <span className="flex h-4 w-4 shrink-0 items-center justify-center rounded border-2 border-input" />
+                {option}
+              </label>
+            ))}
+          </div>
+        )}
+
+        {question.type === "dropdown" && (
+          <div className="flex items-center justify-between rounded-lg border border-input bg-muted/50 px-3.5 py-2.5 text-sm text-muted-foreground">
+            <span>Select an option</span>
+            <ChevronDown className="h-4 w-4" />
+          </div>
+        )}
+
+        {question.type === "date" && (
+          <div className="flex items-center gap-2 rounded-lg border border-input bg-muted/50 px-3.5 py-2.5 text-sm text-muted-foreground">
+            <Calendar className="h-4 w-4" />
+            <span>mm / dd / yyyy</span>
+          </div>
+        )}
+
+        {question.type === "rating" && (
+          <div className="flex gap-1.5">
+            {[1, 2, 3, 4, 5].map((star) => (
+              <Star
+                key={star}
+                className="h-6 w-6 text-input"
+                strokeWidth={1.5}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}