add select

eduseg/src/components/Form.tsx

@@ -32,7 +32,7 @@ export function Form() {
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="flex flex-col gap-2.5 lg:gap-5"
+      className="flex flex-col gap-3 lg:gap-6"
     >
       {formState.isSubmitSuccessful && (
         <p className="bg-green-700 text-white p-2.5 rounded-lg">OK!</p>

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 (
+    <Combobox
+      value={selected}
+      onChange={(value) => setSelected(value)}
+      onClose={() => setQuery("")}
+    >
+      <div className="relative">
+        <ComboboxInput
+          displayValue={(person) => person?.name}
+          onChange={(event) => setQuery(event.target.value)}
+        />
+        <ComboboxButton className="group absolute inset-y-0 right-0 px-2.5">
+          <ChevronDownIcon className="size-4 fill-white/60 group-data-[hover]:fill-white" />
+        </ComboboxButton>
+      </div>
+
+      <ComboboxOptions anchor="bottom" transition className="bg-black w-42">
+        {filteredPeople.map((person) => (
+          <ComboboxOption key={person.id} value={person}>
+            <CheckIcon className="invisible size-4 fill-white group-data-[selected]:visible" />
+            <div className="text-sm/6 text-white">{person.name}</div>
+          </ComboboxOption>
+        ))}
+      </ComboboxOptions>
+    </Combobox>
+  );
+}

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 {
 
         <section class="bg-lime-400 sticky top-0 z-10">
             <Container className="flex items-center py-3 max-lg:px-3">
-                <div class="flex gap-1 lg:gap-3 items-center">
+                <div class="flex gap-1.5 lg:gap-3 items-center">
                     <div class="bg-black p-1.5 lg:p-3 rounded-lg lg:rounded-xl">
-                        <AcademicCapIcon className="w-5 lg:w-6 fill-lime-400" />
+                        <AcademicCapIcon className="w-5 fill-lime-400" />
                     </div>
 
-                    <div class="text-black truncate max-lg:max-w-36">
+                    <div class="flex gap-1.5">
-                        NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
+                        <div class="text-black truncate max-lg:max-w-36">
+                            NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
+                        </div>
+                        <Select client:load />
                     </div>
                 </div>
 
-                <div
+                <div class="ml-auto">
-                    class="ml-auto flex max-lg:flex-col items-center gap-1 lg:gap-2.5"
-                >
                     <button
                         class="bg-black p-2.5 rounded-md cursor-pointer text-sm"
                     >

eduseg/src/pages/index.astro

@@ -69,7 +69,7 @@ import Layout from "@layouts/Layout.astro";
                 </div>
             </div>
 
-            <Card color="yellow" className="rounded-xl p-5">
+            <Card color="yellow" className="rounded-xl p-4">
                 <Form client:load />
             </Card>
         </section>