switch to parcel building
This commit is contained in:
WillJeynes
@@ -0,0 +1,226 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { InputWrapper } from "@/components/ui/input_wrapper";
|
||||
import Section from "@/components/ui/section";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import { getRandomThirdPartyCount, getRandomUsername } from "@/lib/utils";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Apply() {
|
||||
const [password, setPassword] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [email2, setEmail2] = useState("");
|
||||
const [email3, setEmail3] = useState("");
|
||||
const [hours, setHours] = useState("");
|
||||
const [experience, setExperience] = useState("");
|
||||
const [graduationYear, setGraduationYear] = useState("");
|
||||
const [digitOfPi, setDigitOfPi] = useState("");
|
||||
const [submitSpinner, setSubmitSpinner] = useState(false);
|
||||
|
||||
const isValidPassword = password.length >= 8
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center min-h-screen gap-6 mt-8 mb-8">
|
||||
<h1 className="text-3xl mb-3">Apply to The Last Tech Job</h1>
|
||||
|
||||
<form className="flex flex-col gap-10">
|
||||
|
||||
<Section>
|
||||
<div>
|
||||
<p className="text-lg">Enter your personal details</p>
|
||||
<p className="text-md text-gray-700">All fields are required. All details will be shared with our {getRandomThirdPartyCount()} third parties.</p>
|
||||
</div>
|
||||
|
||||
<InputWrapper name="Name">
|
||||
<Input type="text" placeholder="First Name" />
|
||||
<Input type="text" placeholder="Last Name" />
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper name="Email">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper
|
||||
name="Confirm Email"
|
||||
error={email !== email2 ? "Emails do not match" : ""}
|
||||
>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
value={email2}
|
||||
onChange={(e) => setEmail2(e.target.value)}
|
||||
/>
|
||||
</InputWrapper>
|
||||
|
||||
{email === email2 && email !== "" ? (
|
||||
<InputWrapper
|
||||
name="Are you 100% sure that's your email?"
|
||||
error={email !== email2 || email !== email3 ? "Emails do not match" : ""}
|
||||
>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
value={email3}
|
||||
onChange={(e) => setEmail3(e.target.value)}
|
||||
/>
|
||||
</InputWrapper>
|
||||
) : null}
|
||||
|
||||
<InputWrapper name="Phone Number">
|
||||
<Input type="tel" placeholder="Phone Number" />
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper
|
||||
name="Password"
|
||||
error={isValidPassword ? "Password already taken by " + getRandomUsername() : ""}>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper name="Bank Details">
|
||||
<Input type="text" placeholder="Card Number" />
|
||||
<Input type="text" placeholder="Expiration Date" />
|
||||
<Input type="text" placeholder="CVV" />
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper name="Discord Username">
|
||||
<Input type="text" placeholder="Username" />
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper name="Home Address">
|
||||
<Input type="text" placeholder="Address" />
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper name="Date of Birth">
|
||||
<Input type="date" placeholder="Date of Birth" />
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper name="Pet Names">
|
||||
<Input type="textarea" placeholder="Sheldon, Casper, Benny, ..." />
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper name="Favorite Color">
|
||||
<Input type="color" placeholder="Favorite Color" />
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper name="Who did you vote for in the previous election?">
|
||||
<Select>
|
||||
<SelectTrigger className="w-full max-w-48 override">
|
||||
<SelectValue placeholder="Select a party" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Party Name</SelectLabel>
|
||||
<SelectItem value="capitalists">Filthy Capitalists</SelectItem>
|
||||
<SelectItem value="communists">Dirty Communists</SelectItem>
|
||||
<SelectItem value="centrists">Boring Centrists</SelectItem>
|
||||
<SelectItem value="greens">Tree Huggers</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper
|
||||
name="How many hours do you have in Counter Strike and League of Legends?"
|
||||
error={Number(hours) < 1 ? "" : "Must be less than 1"}
|
||||
>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="No. of hours"
|
||||
value={hours}
|
||||
onChange={(e) => setHours(e.target.value)}
|
||||
/>
|
||||
</InputWrapper>
|
||||
</Section>
|
||||
|
||||
|
||||
<Section>
|
||||
<p className="text-lg">Education and Work history</p>
|
||||
<p className="text-md">All fields are required. Answer with honesty, we already know everything :)</p>
|
||||
|
||||
<InputWrapper name="University/College" description="Only acceptable universities are selectable">
|
||||
<div>
|
||||
<input id="cambridge" name="university" type="radio" value="Cambridge" />
|
||||
<label htmlFor="cambridge"> Cambridge </label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input id="oxford" name="university" type="radio" value="Oxford" />
|
||||
<label htmlFor="oxford"> Oxford </label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input id="tau" name="university" type="radio" value="TAU" />
|
||||
<label htmlFor="tau"> Tel Aviv University</label>
|
||||
</div>
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper
|
||||
name="How many years of experience do you have?"
|
||||
error={Number(experience) >= 30 || experience == "" ? "" : "Must be at least 30 years"}
|
||||
>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Years of experience"
|
||||
value={experience}
|
||||
onChange={(e) => setExperience(e.target.value)}
|
||||
/>
|
||||
</InputWrapper>
|
||||
|
||||
<InputWrapper
|
||||
name="What year did you graduate?"
|
||||
error={Number(graduationYear) < 2025 && graduationYear != "" ? "Must have graduated within the last 12 months." : ""}
|
||||
>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Year of graduation"
|
||||
value={graduationYear}
|
||||
onChange={(e) => setGraduationYear(e.target.value)}
|
||||
/>
|
||||
</InputWrapper>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<p className="text-lg">Additional Questions</p>
|
||||
|
||||
{/* <InputWrapper
|
||||
name="As an Evil.AI employee, what is the first country you will visit?"
|
||||
error="Must pick another country."
|
||||
>
|
||||
<Input type="text" placeholder="Israel"/>
|
||||
</InputWrapper> */}
|
||||
|
||||
<InputWrapper
|
||||
name="What is the 16,331st digit of pi?"
|
||||
description={digitOfPi == "8" ? "Correct!" : ""}
|
||||
>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Type your answer here"
|
||||
value={digitOfPi}
|
||||
onChange={(e) => setDigitOfPi(e.target.value)}
|
||||
/>
|
||||
</InputWrapper>
|
||||
</Section>
|
||||
|
||||
<Button type="submit" className="self-center text-4xl p-6">
|
||||
<a href="#submitted" onClick={() => setSubmitSpinner(true)}>Submit Application</a>
|
||||
{submitSpinner && <Spinner data-icon="inline-start" />}
|
||||
</Button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user