wip supermenu

2025-04-16 12:39:59 -03:00
parent 41a18afd2e
commit 68e1d10b12
6 changed files with 117 additions and 107 deletions
--- a/superpage/src/components/Menu.jsx
+++ b/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>
+  )
+}