componentized code, delted email / password

HackAtUCI · Dec 13, 2023 · c592f42 · c592f42
1 parent 3b8d11d
commit c592f42
Show file tree

Hide file tree

Showing 10 changed files with 320 additions and 318 deletions.
diff --git a/apps/site/src/app/apply/sections/Components/DropdownSelect.tsx b/apps/site/src/app/apply/sections/Components/DropdownSelect.tsx
@@ -9,27 +9,25 @@ interface SelectProps {
 	name: string;
 	labelText: string;
 	values: Array<{ value: string; text: string }>;
+	containerClass: string;
 }
 
 interface OtherProps {
 	value: string;
 	name: string;
 }
 
-const OtherPopup = (props: OtherProps) => {
-	if (props.value == "other") {
+const OtherPopup = ({ value, name }: OtherProps) => {
+	if (value == "other") {
 		return (
 			<div className="mt-2 flex gap-2">
-				<label
-					htmlFor={`${props.name}-other-input`}
-					className="text-lg"
-				>
+				<label htmlFor={`${name}-other-input`} className="text-lg">
 					Other: <RequiredAsterisk />
 				</label>
 				<input
 					type="text"
-					name={`${props.name}-other-input`}
-					id={`${props.name}-other-input`}
+					name={`${name}-other-input`}
+					id={`${name}-other-input`}
 					className="border-b-2 p-1 h-6 border-black w-6/12"
 					required
 				/>
@@ -38,28 +36,35 @@ const OtherPopup = (props: OtherProps) => {
 	}
 };
 
-export default function DropdownSelect(props: SelectProps) {
+export default function DropdownSelect({
+	labelStyle,
+	inputStyle,
+	name,
+	labelText,
+	values,
+	containerClass
+}: SelectProps) {
 	const [value, setValue] = useState("");
 
 	return (
-		<>
-			<label className={`${props.labelStyle}`} htmlFor={props.name}>
-				{props.labelText} <RequiredAsterisk />
+		<div className={containerClass}>
+			<label className={`${labelStyle}`} htmlFor={name}>
+				{labelText} <RequiredAsterisk />
 			</label>
 			<select
-				className={`${props.inputStyle}`}
-				name={props.name}
+				className={`${inputStyle}`}
+				name={name}
 				onChange={(e) => setValue(e.target.value)}
 			>
-				{props.values.map((item, i) => {
+				{values.map((item, i) => {
 					return (
 						<option key={`option-${i}`} value={item.value}>
 							{item.text}
 						</option>
 					);
 				})}
 			</select>
-			<OtherPopup value={value} name={props.name} />
-		</>
+			<OtherPopup value={value} name={name} />
+		</div>
 	);
 }
diff --git a/apps/site/src/app/apply/sections/Components/PasswordEye.tsx b/apps/site/src/app/apply/sections/Components/PasswordEye.tsx
diff --git a/apps/site/src/app/apply/sections/Components/RadioSelect.tsx b/apps/site/src/app/apply/sections/Components/RadioSelect.tsx
@@ -7,6 +7,7 @@ interface RadioInputs {
 	labelText: string;
 	IdentifierId: string;
 	values: Array<{ value: string; text: string }>;
+	containerClass: string;
 }
 
 interface IsChecked {
@@ -30,25 +31,31 @@ const OtherInput = ({ isChecked, id }: IsChecked) => {
 	);
 };
 
-export default function RadioSelect(props: RadioInputs) {
+export default function RadioSelect({
+	name,
+	labelText,
+	IdentifierId,
+	values,
+	containerClass,
+}: RadioInputs) {
 	const [isOtherChecked, setIsOtherChecked] = useState(false);
 
 	return (
-		<>
+		<div className={containerClass}>
 			<p className="m-0 text-lg mb-4">
-				{props.labelText} <span className="text-[#FF2222]">*</span>
+				{labelText} <span className="text-[#FF2222]">*</span>
 			</p>
 			<div className="w-10/12 flex flex-col gap-2">
-				{props.values.map((item, i) => {
-					const keyandId = `${props.IdentifierId}-${i}`;
+				{values.map((item, i) => {
+					const keyandId = `${IdentifierId}-${i}`;
 					if (item.value == "other") {
 						return (
 							<div key={keyandId} className="flex gap-2">
 								<input
 									id={keyandId}
 									type="radio"
 									key={`option-${i}`}
-									name={props.name}
+									name={name}
 									value={item.value}
 									onChange={(e) =>
 										setIsOtherChecked(e.target.checked)
@@ -60,7 +67,7 @@ export default function RadioSelect(props: RadioInputs) {
 								</label>
 								<OtherInput
 									isChecked={isOtherChecked}
-									id={props.IdentifierId}
+									id={IdentifierId}
 								/>
 							</div>
 						);
@@ -71,7 +78,7 @@ export default function RadioSelect(props: RadioInputs) {
 								id={keyandId}
 								type="radio"
 								key={`option-${i}`}
-								name={props.name}
+								name={name}
 								value={item.value}
 								onChange={() => setIsOtherChecked(false)}
 								required
@@ -83,6 +90,6 @@ export default function RadioSelect(props: RadioInputs) {
 					);
 				})}
 			</div>
-		</>
+		</div>
 	);
 }
diff --git a/apps/site/src/app/apply/sections/Components/SimpleRadio.tsx b/apps/site/src/app/apply/sections/Components/SimpleRadio.tsx
@@ -0,0 +1,62 @@
+import RequiredAsterisk from "./RequiredAsterisk";
+
+interface TextfieldProps {
+	name: string;
+	values: Array<{
+		id: string;
+		labelText: string;
+		inputValue: string;
+	}>;
+	title: string;
+	titleClass: string;
+	containerClassTotal: string;
+	containerClassInputLabels: string;
+	containerClassValues: string;
+	labelClass: string;
+	isRequired: boolean;
+}
+
+export default function SimpleRadio({
+	name,
+	values,
+	title,
+	titleClass,
+	containerClassTotal,
+	containerClassInputLabels,
+	containerClassValues,
+	labelClass,
+	isRequired,
+}: TextfieldProps) {
+	return (
+		<div className={containerClassTotal}>
+			<p className={titleClass}>
+				{`${title} `}
+				{isRequired ? <RequiredAsterisk /> : <></>}
+			</p>
+			<div className={containerClassValues}>
+				{values.map((value, i) => {
+					return (
+						<div
+							key={`${name}-${i}`}
+							className={containerClassInputLabels}
+						>
+							<input
+								type="radio"
+								id={value.id}
+								name={name}
+								value={value.inputValue}
+								required={isRequired}
+							/>
+							<label
+								htmlFor={value.inputValue}
+								className={labelClass}
+							>
+								{value.labelText}
+							</label>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/site/src/app/apply/sections/Components/TextInput.tsx b/apps/site/src/app/apply/sections/Components/TextInput.tsx
@@ -0,0 +1,39 @@
+import RequiredAsterisk from "./RequiredAsterisk";
+
+interface TextProps {
+	name: string;
+	labelClass: string;
+	labelText: string;
+	inputClass: string;
+	containerClass: string;
+	type: string;
+	placeholder: string;
+	isRequired: boolean;
+}
+
+export default function TextInput({
+	name,
+	labelClass,
+	labelText,
+	inputClass,
+	containerClass,
+	placeholder,
+	type,
+	isRequired,
+}: TextProps) {
+	return (
+		<div className={containerClass}>
+			<label className={labelClass} htmlFor={name}>
+				{`${labelText} `} {isRequired ? <RequiredAsterisk /> : <></>}
+			</label>
+			<input
+				className={inputClass}
+				type={type}
+				name={name}
+				id={name}
+				required={isRequired}
+				placeholder={placeholder}
+			/>
+		</div>
+	);
+}
diff --git a/apps/site/src/app/apply/sections/Components/Textfield.tsx b/apps/site/src/app/apply/sections/Components/Textfield.tsx
@@ -0,0 +1,31 @@
+import RequiredAsterisk from "./RequiredAsterisk";
+
+interface TextfieldProps {
+	name: string;
+	labelClass: string;
+	labelText: string;
+	inputClass: string;
+	containerClass: string;
+	isRequired: boolean;
+}
+
+export default function Textfield({
+	name,
+	labelClass,
+	labelText,
+	inputClass,
+	containerClass,
+	isRequired,
+}: TextfieldProps) {
+	return (
+		<div className={containerClass}>
+			<div className="flex flex-col w-full">
+				<label className={labelClass} htmlFor={name}>
+					{`${labelText} `}
+					{isRequired ? <RequiredAsterisk /> : <></>}
+				</label>
+				<textarea className={inputClass} id={name} name={name} required={isRequired}/>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/site/src/app/apply/sections/Form/AgeInformation.tsx b/apps/site/src/app/apply/sections/Form/AgeInformation.tsx
@@ -1,4 +1,18 @@
 import RequiredAsterisk from "../Components/RequiredAsterisk";
+import SimpleRadio from "../Components/SimpleRadio";
+
+const yesNoOptions = [
+	{
+		id: "minor-yes",
+		labelText: "Yes",
+		inputValue: "Yes",
+	},
+	{
+		id: "minor-no",
+		labelText: "No",
+		inputValue: "No",
+	},
+];
 
 export default function AgeInformation() {
 	return (
@@ -16,41 +30,17 @@ export default function AgeInformation() {
 				</p>
 			</div>
 
-			<div className="flex flex-col gap-1 w-full items-center">
-				<p className="text-xl font-bold m-0">
-					Will you be 18 years or older by January 26th, 2024?{" "}
-					<RequiredAsterisk />
-				</p>
-				<div className="flex gap-5">
-					<div className="flex gap-2 items-center">
-						<input
-							type="radio"
-							id="minor-yes"
-							name="minor-check"
-							value="Yes"
-							required
-						/>
-						<label
-							htmlFor="minor-yes"
-							className="font-bold text-xl"
-						>
-							Yes
-						</label>
-					</div>
-					<div className="flex gap-2 items-center">
-						<input
-							type="radio"
-							id="minor-no"
-							name="minor-check"
-							value="No"
-							required
-						/>
-						<label htmlFor="minor-no" className="font-bold text-xl">
-							No
-						</label>
-					</div>
-				</div>
-			</div>
+			<SimpleRadio
+				name="minor-check"
+				values={yesNoOptions}
+				title="Will you be 18 years or older by January 26th, 2024?"
+				titleClass="text-xl font-bold m-0"
+				containerClassTotal="flex flex-col gap-1 w-full items-center"
+				isRequired={true}
+				labelClass="font-bold text-xl"
+				containerClassInputLabels="flex gap-2 items-center"
+				containerClassValues="flex gap-5"
+			/>
 		</div>
 	);
 }