Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Onboarding Form #25

Merged
merged 10 commits into from
May 29, 2023
Merged

Onboarding Form #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
860abc4
fea: custom @apply classes
vitorschelb May 24, 2023
859c3b8
fea: Form questions
vitorschelb May 24, 2023
4af9b84
fea: @apply classes
vitorschelb May 24, 2023
3a61835
fea: Create onboardingUtils
vitorschelb May 24, 2023
8c05f3a
fix: Global CSS and Onboarding Select defaultValue
vitorschelb May 24, 2023
db06f12
ref: Create components for form elements
vitorschelb May 26, 2023
198aa7a
fix: text-area component for new form questions
vitorschelb May 26, 2023
5c5ae97
fea: Improve onbarding form
vitorschelb May 27, 2023
3d5bd18
ref: Remove coments
vitorschelb May 27, 2023
9399a5d
ref: Remove spaces
vitorschelb May 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
243 changes: 141 additions & 102 deletions src/components/OnboardingForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,162 +1,201 @@
import {
Input,
Label,
Select,
Form,
Title,
Textarea,
} from "@/shared/components";
import { genders, educationLevels } from "@/shared/onboarding";

export default function OnboardingForm() {
return (
<div className="absolute h-screen w-screen z-10 top-0 left-0 bg-slate-800 overflow-auto">
<form className="bg-[#5d417A] w-full md:w-9/12 mx-auto my-10 p-8 rounded-lg">
<Form>
<div className=" border-gray-900/10">
<h2 className="text-base font-semibold leading-7 text-white">
Personal Information
</h2>
<Title> Formulário de Inscrição</Title>

<div className="mt-10 grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-6">
<div className="sm:col-span-2">
<Label htmlFor="nome-social">Nome Social</Label>
<div className="mt-2">
<Input
id="nome-social"
name="nome-social"
type="text"
/>
</div>
</div>

<div className="sm:col-span-2">
<Label htmlFor="gender">Gênero</Label>
<div className="mt-2">
<Select
defaultValue={""}
id="gender"
name="gender"
>
{genders.map((gender) => (
<option key={gender} value={gender}>
{gender}
</option>
))}
<option value="">Selecione</option>
</Select>
</div>
</div>

<div className="sm:col-span-2">
<Label htmlFor="idade">Idade</Label>
<div className="mt-2">
<Input
id="idade"
name="idade"
type="text"
/>
</div>
</div>

<div className="sm:col-span-22">
<Label htmlFor="telefone">Telefone</Label>
<div className="mt-2">
<Input
className="placeholder-gray-400"
id="telefone"
name="telefone"
placeholder="(00) 00000-0000"
type="text"
/>
</div>
</div>

<div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div className="sm:col-span-3">
<label
className="block text-sm font-medium leading-6 text-white"
htmlFor="first-name"
>
First name
</label>
<div className="sm:col-span-22">
<Label htmlFor="pais">País</Label>
<div className="mt-2">
<input
autoComplete="given-name"
className="block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
id="first-name"
name="first-name"
<Input
id="pais"
name="pais"
type="text"
/>
</div>
</div>

<div className="sm:col-span-3">
<label
className="block text-sm font-medium leading-6 text-white"
htmlFor="last-name"
>
Last name
</label>
<div className="sm:col-span-2">
<Label htmlFor="cidade-estado">Cidade/Estado</Label>
<div className="mt-2">
<input
autoComplete="family-name"
className="block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
id="last-name"
name="last-name"
<Input
id="cidade-estado"
name="cidade-estado"
type="text"
/>
</div>
</div>

<div className="sm:col-span-4">
<label
className="block text-sm font-medium leading-6 text-white"
htmlFor="email"
>
Email address
</label>
<div className="sm:col-span-2">
<Label htmlFor="email">Email</Label>
<div className="mt-2">
<input
autoComplete="email"
className="block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
<Input
id="email"
name="email"
type="email"
/>
</div>
</div>

<div className="sm:col-span-3">
<label
className="block text-sm font-medium leading-6 text-white"
htmlFor="country"
>
Country
</label>
<div className="sm:col-span-2">
<Label htmlFor="education-level">Formação</Label>
<div className="mt-2">
<select
autoComplete="country-name"
className="block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6"
id="country"
name="country"
<Select
defaultValue=""
id="education-level"
name="education-level"
>
<option>United States</option>
<option>Canada</option>
<option>Mexico</option>
</select>
{educationLevels.map((level) => (
<option key={level} value={level}>
{level}
</option>
))}
<option value="">Selecione</option>
</Select>
</div>
</div>

<div className="col-span-full">
<label
className="block text-sm font-medium leading-6 text-white"
htmlFor="street-address"
>
Street address
</label>
<div className="sm:col-span-2">
<Label htmlFor="profissao">Profissão</Label>
<div className="mt-2">
<input
autoComplete="street-address"
className="block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
id="street-address"
name="street-address"
<Input
id="profissao"
name="profissao"
placeholder="Opcional"
type="text"
/>
</div>
</div>

<div className="sm:col-span-2 sm:col-start-1">
<label
className="block text-sm font-medium leading-6 text-white"
htmlFor="city"
>
City
</label>
<div className="sm:col-span-2">
<Label htmlFor="empresa-organizacao">Empresa/Organização</Label>
<div className="mt-2">
<input
autoComplete="address-level2"
className="block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
id="city"
name="city"
<Input
id="empresa-organizacao"
name="empresa-organizacao"
placeholder="Opcional"
type="text"
/>
</div>
</div>

<div className="sm:col-span-2">
<label
className="block text-sm font-medium leading-6 text-white"
htmlFor="region"
>
State / Province
</label>
<Label htmlFor="github-portifolio">GitHub/Portifólio</Label>
<div className="mt-2">
<input
autoComplete="address-level1"
className="block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
id="region"
name="region"
<Input
id="github-portifolio"
name="github-portifolio"
placeholder="Opcional"
type="text"
/>
</div>
</div>

<div className="sm:col-span-2">
<label
className="block text-sm font-medium leading-6 text-white"
htmlFor="postal-code"
>
ZIP / Postal code
</label>
<Label htmlFor="linkedin">LinkedIn</Label>
<div className="mt-2">
<input
autoComplete="postal-code"
className="block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
id="postal-code"
name="postal-code"
<Input
id="linkedin"
name="linkedin"
placeholder="Opcional"
type="text"
/>
</div>
</div>
</div>
</div>
</form>
</Form>

<Form>
<div className="sm:col-span-2">
<Label className="text-lg mb-8" htmlFor="q-one">
Estamos ansiosos para conhecê-lo melhor! Por favor, compartilhe um
pouco da sua experiência e nos conte quais são as áreas da
tecnologia que mais despertam o seu interesse.
</Label>
<div className="mt-2">
<Textarea id="q-one" rows={5} />
</div>
</div>
</Form>

<Form>
<div className="sm:col-span-2">
<Label className="text-lg mb-8" htmlFor="q-two">
Por favor, compartilhe conosco o motivo pelo qual você deseja
ingressar na PodCodar, o que espera aprender ou vivenciar
participando da comunidade?
</Label>
<div className="mt-2">
<Textarea id="q-two" rows={5} />
</div>
</div>
</Form>
</div>
);
}
54 changes: 54 additions & 0 deletions src/shared/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { classes } from "@/shared/tw";
import {
InputHTMLAttributes,
LabelHTMLAttributes,
SelectHTMLAttributes,
FormHTMLAttributes,
HTMLAttributes,
TextareaHTMLAttributes,
} from "react";

const focusStyles = "focus:ring-2 focus:ring-inset focus:ring-indigo-600";

export const Textarea = (
props: TextareaHTMLAttributes<HTMLTextAreaElement>
) => {
const styles = "w-full rounded-lg border-gray-200 p-3 text-sm";
return <textarea {...props} className={classes(styles, props.className)} />;
};

export const Title = (props: HTMLAttributes<HTMLHeadingElement>) => {
const styles = `text-base text-lg text-center font-semibold leading-7 text-white
`;
return <h2 {...props} className={classes(styles, props.className)} />;
};

export const Form = (props: FormHTMLAttributes<HTMLFormElement>) => {
const styles = `
bg-pod-purple w-full mx-auto my-10 p-8 rounded-lg
md:w-9/12`;
return <form {...props} className={classes(styles, props.className)} />;
};

export const Select = (props: SelectHTMLAttributes<HTMLSelectElement>) => {
const styles = `
block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300
sm:max-w-xs sm:text-sm sm:leading-6
${focusStyles}
`;
return <select {...props} className={classes(styles, props.className)} />;
};

export const Label = (props: LabelHTMLAttributes<HTMLLabelElement>) => {
const styles = "block text-sm font-medium leading-6 text-white text-justify";
return <label {...props} className={classes(styles, props.className)} />;
};

export const Input = (props: InputHTMLAttributes<HTMLInputElement>) => {
const styles = `
block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300
placeholder:text-gray-400 sm:text-sm sm:leading-6
${focusStyles}
`;
return <input {...props} className={classes(styles, props.className)} />;
};
28 changes: 28 additions & 0 deletions src/shared/onboarding.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
export const educationLevels = [
"Ensino Fundamental Incompleto",
"Ensino Fundamental Completo",
"Ensino Médio Incompleto",
"Ensino Médio Completo",
"Ensino Técnico Incompleto",
"Ensino Técnico Completo",
"Graduação Incompleta",
"Graduação Completa",
"Pós-graduação Incompleta",
"Pós-graduação Completa",
"Mestrado Incompleto",
"Mestrado Completo",
"Doutorado Incompleto",
"Doutorado Completo",
"Outro (especifique)",
];

export const genders = [
"Masculino",
"Feminino",
"Não-binário",
"Gênero fluido",
"Agênero",
"Transgênero",
];

genders.sort();
4 changes: 3 additions & 1 deletion src/shared/tw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
export function classes(...classes: string[]) {
type Optional<T> = T | null | undefined;

export function classes(...classes: Optional<string>[]) {
return classes.filter(Boolean).join(" ");
}

Expand Down
Loading