From ccb9f64a8efcec0f2fe23e9d22ac897106328a2f Mon Sep 17 00:00:00 2001 From: DhairyaSood Date: Wed, 19 Aug 2026 01:18:04 +0530 Subject: [PATCH 01/10] basic skeleton for Dino/feedback --- src/components/FeedbackForm.tsx | 323 ++++++++++++++++++++++++++++++++ src/pages/feedback.tsx | 40 ++++ 2 files changed, 363 insertions(+) create mode 100644 src/components/FeedbackForm.tsx create mode 100644 src/pages/feedback.tsx diff --git a/src/components/FeedbackForm.tsx b/src/components/FeedbackForm.tsx new file mode 100644 index 0000000..474c6e9 --- /dev/null +++ b/src/components/FeedbackForm.tsx @@ -0,0 +1,323 @@ +import { useState } from "react"; + +const branches = [ + "Aerospace Engineering", + "Bachelor of Design (B.Des)", + "Civil Engineering", + "Computer Science & Engineering", + "Computer Science & Engineering (AI)", + "Computer Science & Engineering (DS)", + "Electrical Engineering", + "Electronics & Communication Engineering", + "Electronics Engineering (VLSI)", + "Materials and Metallurgical Engineering", + "Mathematics and Computing", + "Mechanical Engineering", + "Production & Industrial Engineering", +]; + +export interface FeedbackData { + name: string; + sid: string; + branch: string; + rating: number; + review: string; +} + +interface FeedbackFormProps { + onContinue?: (data: FeedbackData) => void; +} + +export default function FeedbackForm({ + onContinue, +}: FeedbackFormProps) { + const [name, setName] = useState(""); + const [sid, setSid] = useState(""); + const [branch, setBranch] = useState(""); + const [rating, setRating] = useState(0); + const [review, setReview] = useState(""); + + const [error, setError] = useState(""); + + const handleSubmit = ( + event: React.FormEvent + ) => { + event.preventDefault(); + + setError(""); + + const trimmedName = name.trim(); + const trimmedSid = sid.trim(); + const trimmedReview = review.trim(); + + if ( + !trimmedName || + !trimmedSid || + !branch || + rating === 0 + ) { + setError( + "Please fill in all the required fields." + ); + return; + } + + if (!/^\d{8}$/.test(trimmedSid)) { + setError( + "SID must be exactly 8 digits." + ); + return; + } + + const feedbackData: FeedbackData = { + name: trimmedName, + sid: trimmedSid, + branch, + rating, + review: trimmedReview, + }; + + /* + * For now, simply pass the form data forward. + * + * Later this can be connected to the Dino game/session + * without changing the form validation itself. + */ + if (onContinue) { + onContinue(feedbackData); + } else { + console.log( + "Feedback submitted:", + feedbackData + ); + } + }; + + return ( +
+ {/* Header */} +
+

+ Feedback Form +

+ +

+ A tiny surprise awaits 👀 +

+
+ + {/* Personal Information */} +
+
+ {/* Name + SID */} +
+
+ + + + setName( + event.target.value + ) + } + placeholder="Enter your full name" + autoComplete="name" + className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none transition focus:ring-2 focus:ring-primary/20" + /> +
+ +
+ + + + setSid( + event.target.value.replace( + /\D/g, + "" + ) + ) + } + placeholder="8-digit SID" + autoComplete="off" + className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none transition focus:ring-2 focus:ring-primary/20" + /> +
+
+ + {/* Branch */} +
+ + + +
+
+
+ + {/* Rating */} +
+
+
+ + +

+ Your feedback helps us make the next + orientation even better. +

+
+ +
+ {[1, 2, 3, 4, 5].map( + (value) => ( + + ) + )} + + {rating > 0 && ( + + {rating}/5 + + )} +
+
+
+ + {/* Review */} +
+
+ + +