diff --git a/eduseg/src/components/Form.tsx b/eduseg/src/components/Form.tsx index 96674bf..4312f52 100644 --- a/eduseg/src/components/Form.tsx +++ b/eduseg/src/components/Form.tsx @@ -32,7 +32,7 @@ export function Form() { return (
{formState.isSubmitSuccessful && (

OK!

diff --git a/eduseg/src/components/Select.jsx b/eduseg/src/components/Select.jsx new file mode 100644 index 0000000..f946fb4 --- /dev/null +++ b/eduseg/src/components/Select.jsx @@ -0,0 +1,54 @@ +import { + Combobox, + ComboboxButton, + ComboboxInput, + ComboboxOption, + ComboboxOptions, +} from "@headlessui/react"; +import { CheckIcon, ChevronDownIcon } from "@heroicons/react/20/solid"; +import clsx from "clsx"; +import { useState } from "react"; + +const people = [ + { id: 1, name: "8 horas" }, + { id: 2, name: "40 horas" }, +]; + +export function Select() { + const [query, setQuery] = useState(""); + const [selected, setSelected] = useState(people[1]); + + const filteredPeople = + query === "" + ? people + : people.filter((person) => { + return person.name.toLowerCase().includes(query.toLowerCase()); + }); + + return ( + setSelected(value)} + onClose={() => setQuery("")} + > +
+ person?.name} + onChange={(event) => setQuery(event.target.value)} + /> + + + +
+ + + {filteredPeople.map((person) => ( + + +
{person.name}
+
+ ))} +
+
+ ); +} diff --git a/eduseg/src/layouts/Layout.astro b/eduseg/src/layouts/Layout.astro index 964c0c1..933844f 100644 --- a/eduseg/src/layouts/Layout.astro +++ b/eduseg/src/layouts/Layout.astro @@ -2,6 +2,7 @@ import "../styles/app.css"; import { Regular as Logo } from "@components/Logo"; import { Container } from "@components/Container"; +import { Select } from "@components/Select"; import { ArrowLeftStartOnRectangleIcon, AcademicCapIcon, @@ -32,19 +33,20 @@ import {
-
+
- +
-
- NR-18 PEMT Plataforma Móvel de Trabalho Aéreo +
+
+ NR-18 PEMT Plataforma Móvel de Trabalho Aéreo +
+