wip supermenu

superpage/src/components/FAQ.jsx

@@ -5,7 +5,7 @@ import {
 } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/24/solid'
 
-export function Example() {
+export function FAQ() {
   return (
     <>
       <ListItem defaultOpen={false}>
@@ -95,7 +95,7 @@ export function ListButton({ children }) {
 
 export function ListPanel({ children }) {
   return (
-    <DisclosurePanel className="text-sm/6 text-white/70 space-y-2 px-5 pb-3">
+    <DisclosurePanel className="text-sm/6 space-y-2 px-5 pb-3">
       {children}
     </DisclosurePanel>
   )

superpage/src/components/Menu.jsx

@@ -0,0 +1,65 @@
+import { ChevronDownIcon, XMarkIcon } from '@heroicons/react/24/solid'
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  PopoverBackdrop,
+  CloseButton,
+} from '@headlessui/react'
+import { Container } from './Container'
+
+export function Menu() {
+  return (
+    <Popover className="relative">
+      <PopoverButton className="text-black font-semibold cursor-pointer flex gap-1 hover:outline-2 rounded">
+        <div className="truncate max-lg:max-w-36">
+          NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
+        </div>
+        <ChevronDownIcon className="w-5 fill-black" />
+      </PopoverButton>
+
+      <PopoverPanel
+        anchor="bottom"
+        className="sticky z-20 -mt-11.5 w-full py-6 lg:py-24 bg-lime-400 rounded-b-2xl"
+      >
+        <Container className="text-black space-y-2.5 lg:space-y-6">
+          <div className="border-b border-black pb-2.5 lg:pb-6">
+            <span>Curso de formação</span>
+            <h1 className="text-2xl/8 lg:text-3xl">
+              NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
+            </h1>
+          </div>
+
+          <h6 className="font-semibold">
+            Conheça outros cursos da EDUSEG&reg;
+          </h6>
+
+          {/* <div class="flex gap-2.5">
+            <span class="bg-black text-white py-3 px-4 rounded font-semibold">
+              Cursos de formação
+            </span>
+            <span class="bg-black text-white py-3 px-4 rounded font-semibold">
+              Cursos de reciclagem
+            </span>
+          </div>
+
+          <h4>Formação</h4>
+          <ul>
+            <li>Lei Lucas</li>
+            <li>NR-18 PEMT Plataforma Móvel de Trabalho Aéreo</li>
+            <li>NR-35 Trabalho em Altura</li>
+            <li>NR-10 Básico</li>
+            <li>LOTO Lockout Tagout</li>
+          </ul>
+
+          <h4>Reciclagem</h4>
+          <ul>
+            <li>NR-12 Máquinas e Equipamentos</li>
+            <li>NR-18 PEMT Plataforma Elevatória Móvel de Trabalho</li>
+          </ul> */}
+        </Container>
+      </PopoverPanel>
+      <PopoverBackdrop className="fixed z-10 inset-0" />
+    </Popover>
+  )
+}

superpage/src/components/Select.jsx

@@ -1,54 +0,0 @@
-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>
-  )
-}