mirror of
https://github.com/PinkSheep27/SBU-Hackathon.git
synced 2026-10-11 00:40:25 -04:00
PawelC4
294 lines
13 KiB
TypeScript
294 lines
13 KiB
TypeScript
// "use client";
|
|
|
|
// import React, { useState } from "react";
|
|
|
|
// import {
|
|
// FormData,
|
|
// PROFICIENCY_LEVELS
|
|
// } from './formTypes'; // Ensure path is correct
|
|
|
|
// interface FormPageProps {
|
|
// onFormSubmit: (data: FormData) => void;
|
|
// }
|
|
|
|
// const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
|
|
// const [formData, setFormData] = useState<FormData>({
|
|
// Hackathon: '',
|
|
// mainTheme: '',
|
|
// tracksStack: [''],
|
|
// students: [{
|
|
// studentName: '',
|
|
// skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }]
|
|
// }],
|
|
// });
|
|
|
|
// const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
// setFormData({
|
|
// ...formData,
|
|
// [event.target.name]: event.target.value,
|
|
// });
|
|
// };
|
|
|
|
// const handleTracksChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
|
|
// const newTracksStack = [...formData.tracksStack];
|
|
// newTracksStack[index] = event.target.value;
|
|
|
|
// setFormData({
|
|
// ...formData,
|
|
// tracksStack: newTracksStack,
|
|
// });
|
|
// };
|
|
|
|
// const handleAddTracks = () => {
|
|
// setFormData({
|
|
// ...formData,
|
|
// tracksStack: [...formData.tracksStack, ''],
|
|
// });
|
|
// };
|
|
|
|
// const handleRemoveTracks = (index: number) => {
|
|
// const newTracksStack = formData.tracksStack.filter((_, i) => i !== index);
|
|
// setFormData({
|
|
// ...formData,
|
|
// tracksStack: newTracksStack,
|
|
// });
|
|
// };
|
|
|
|
// const handleStudentNameChange = (e: React.ChangeEvent<HTMLInputElement>, studentIndex: number) => {
|
|
// const newStudents = [...formData.students];
|
|
// newStudents[studentIndex].studentName = e.target.value;
|
|
// setFormData({ ...formData, students: newStudents });
|
|
// };
|
|
|
|
// const handleAddStudent = () => {
|
|
// setFormData({
|
|
// ...formData,
|
|
// students: [...formData.students, { studentName: '', skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] }]
|
|
// });
|
|
// };
|
|
|
|
// const handleRemoveStudent = (studentIndex: number) => {
|
|
// const newStudents = formData.students.filter((_, i) => i !== studentIndex);
|
|
// setFormData({ ...formData, students: newStudents });
|
|
// };
|
|
|
|
// const handleSkillChange = (
|
|
// e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
|
|
// studentIndex: number,
|
|
// skillIndex: number
|
|
// ) => {
|
|
// const newStudents = [...formData.students];
|
|
// const targetName = e.target.name;
|
|
// const targetValue = e.target.value;
|
|
|
|
// if (targetName === 'skillName') {
|
|
// newStudents[studentIndex].skills[skillIndex].skillName = targetValue;
|
|
// } else if (targetName === 'proficiency') {
|
|
// newStudents[studentIndex].skills[skillIndex].proficiency = targetValue;
|
|
// }
|
|
|
|
// setFormData({ ...formData, students: newStudents });
|
|
// };
|
|
|
|
// const handleAddSkill = (studentIndex: number) => {
|
|
// const newStudents = [...formData.students];
|
|
// newStudents[studentIndex].skills.push({ skillName: '', proficiency: PROFICIENCY_LEVELS[1] });
|
|
// setFormData({ ...formData, students: newStudents });
|
|
// };
|
|
|
|
// const handleRemoveSkill = (studentIndex: number, skillIndex: number) => {
|
|
// const newStudents = [...formData.students];
|
|
// newStudents[studentIndex].skills = newStudents[studentIndex].skills.filter((_, i) => i !== skillIndex);
|
|
// setFormData({ ...formData, students: newStudents });
|
|
// };
|
|
|
|
// const handleSubmit = (event: React.FormEvent) => {
|
|
// event.preventDefault();
|
|
// onFormSubmit(formData); // Call the prop function with formData
|
|
// };
|
|
|
|
// return (
|
|
// <div className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
|
|
// <div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
|
|
// <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-8 tracking-tight">
|
|
// Generate Project Idea
|
|
// </h1>
|
|
|
|
// <form className="space-y-8" onSubmit={handleSubmit}>
|
|
// <div className="space-y-6 border-b pb-6 border-gray-200">
|
|
// <h2 className="text-xl font-bold text-gray-700">Project Context</h2>
|
|
// <div>
|
|
// <label htmlFor="hackathonName" className="block text-sm font-medium text-gray-700 mb-1">
|
|
// Hackathon Name
|
|
// </label>
|
|
// <input
|
|
// id="hackathonName"
|
|
// required
|
|
// type="text"
|
|
// placeholder="e.g., Google Code Jam"
|
|
// name="Hackathon"
|
|
// value={formData.Hackathon}
|
|
// onChange={handleChange}
|
|
// className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
|
|
// />
|
|
// </div>
|
|
|
|
// <div>
|
|
// <label htmlFor="mainTheme" className="block text-sm font-medium text-gray-700 mb-1">
|
|
// Main Theme
|
|
// </label>
|
|
// <input
|
|
// id="mainTheme"
|
|
// required
|
|
// type="text"
|
|
// placeholder="e.g., Sustainability or AI Ethics"
|
|
// name="mainTheme"
|
|
// value={formData.mainTheme}
|
|
// onChange={handleChange}
|
|
// className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
|
|
// />
|
|
// </div>
|
|
// </div>
|
|
|
|
// <div className="space-y-4 border-b pb-6 border-gray-200">
|
|
// <label className="block text-xl font-bold text-gray-700">
|
|
// Tracks Stack
|
|
// </label>
|
|
// <div className="space-y-3">
|
|
// {formData.tracksStack.map((tracks, index) => (
|
|
// <div key={index} className="flex gap-2 items-center">
|
|
// <input
|
|
// type="text"
|
|
// required
|
|
// placeholder={`Tracks #${index + 1}`}
|
|
// name={`tracksStack-${index}`}
|
|
// value={tracks}
|
|
// onChange={(e) => handleTracksChange(e, index)}
|
|
// className="flex-grow px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 transition duration-150"
|
|
// />
|
|
// {formData.tracksStack.length > 1 && (
|
|
// <button
|
|
// type="button"
|
|
// onClick={() => handleRemoveTracks(index)}
|
|
// className="text-sm px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition duration-150 flex-shrink-0"
|
|
// aria-label={`Remove tracks ${index + 1}`}
|
|
// >
|
|
// Remove
|
|
// </button>
|
|
// )}
|
|
// </div>
|
|
// ))}
|
|
// </div>
|
|
|
|
// <button
|
|
// type="button"
|
|
// onClick={handleAddTracks}
|
|
// className="flex items-center justify-center gap-1 py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150"
|
|
// >
|
|
// <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
|
|
// Add Tracks
|
|
// </button>
|
|
// </div>
|
|
|
|
// <div className="space-y-4">
|
|
// <h2 className="text-xl font-bold text-gray-700">Team Members and Skills</h2>
|
|
|
|
// <div className="space-y-6">
|
|
// {formData.students.map((student, studentIndex) => (
|
|
// <div key={studentIndex} className="p-4 border-2 border-indigo-200 rounded-lg bg-indigo-50 shadow-inner space-y-4">
|
|
|
|
// <div className="flex justify-between items-center pb-2 border-b border-indigo-300">
|
|
// <h4 className="text-lg font-semibold text-indigo-700">Student #{studentIndex + 1}</h4>
|
|
// {formData.students.length > 1 && (
|
|
// <button
|
|
// type="button"
|
|
// onClick={() => handleRemoveStudent(studentIndex)}
|
|
// className="text-xs px-2 py-1 bg-red-400 text-white rounded-md hover:bg-red-500 transition duration-150"
|
|
// >
|
|
// Remove Student
|
|
// </button>
|
|
// )}
|
|
// </div>
|
|
|
|
// <div>
|
|
// <label className="block text-sm font-medium text-indigo-700 mb-1">Student Name</label>
|
|
// <input
|
|
// type="text"
|
|
// required
|
|
// placeholder="Student Name"
|
|
// value={student.studentName}
|
|
// onChange={(e) => handleStudentNameChange(e, studentIndex)}
|
|
// className="w-full px-4 py-2 border border-indigo-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
|
// />
|
|
// </div>
|
|
|
|
// <div className="space-y-3 p-3 bg-white rounded-lg border border-indigo-100">
|
|
// <h5 className="text-md font-medium text-indigo-700">Skills</h5>
|
|
// {student.skills.map((skill, skillIndex) => (
|
|
// <div key={skillIndex} className="flex gap-2 items-center">
|
|
// <input
|
|
// type="text"
|
|
// required
|
|
// name="skillName"
|
|
// placeholder="Skill (e.g., React, Python)"
|
|
// value={skill.skillName}
|
|
// onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
|
|
// className="flex-grow px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500"
|
|
// />
|
|
// <select
|
|
// name="proficiency"
|
|
// value={skill.proficiency}
|
|
// onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
|
|
// className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500 w-1/3"
|
|
// >
|
|
// {PROFICIENCY_LEVELS.map(level => (
|
|
// <option key={level} value={level}>{level}</option>
|
|
// ))}
|
|
// </select>
|
|
// {student.skills.length > 1 && (
|
|
// <button
|
|
// type="button"
|
|
// onClick={() => handleRemoveSkill(studentIndex, skillIndex)}
|
|
// className="text-xs px-2 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition duration-150 flex-shrink-0"
|
|
// >
|
|
// X
|
|
// </button>
|
|
// )}
|
|
// </div>
|
|
// ))}
|
|
// <button
|
|
// type="button"
|
|
// onClick={() => handleAddSkill(studentIndex)}
|
|
// className="mt-2 text-xs flex items-center gap-1 py-1 px-3 border border-transparent rounded-lg text-white bg-purple-600 hover:bg-purple-700 transition duration-150"
|
|
// >
|
|
// + Add Skill
|
|
// </button>
|
|
// </div>
|
|
// </div>
|
|
// ))}
|
|
// </div>
|
|
|
|
// <button
|
|
// type="button"
|
|
// onClick={handleAddStudent}
|
|
// className="mt-4 w-full flex items-center justify-center gap-2 py-2 px-4 border border-transparent rounded-lg shadow-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150"
|
|
// >
|
|
// <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>
|
|
// Add Team Member
|
|
// </button>
|
|
// </div>
|
|
|
|
// <button
|
|
// type="submit"
|
|
// className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 mt-6"
|
|
// >
|
|
// Generate Idea
|
|
// </button>
|
|
// </form>
|
|
|
|
// </div>
|
|
// </div>
|
|
// );
|
|
// };
|
|
|
|
// export default FormPage;
|