menu
This commit is contained in:
@@ -1,5 +1,8 @@
|
||||
import { ChevronDownIcon } from '@heroicons/react/24/solid'
|
||||
import { clsx } from 'clsx'
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
XMarkIcon,
|
||||
MagnifyingGlassIcon,
|
||||
} from '@heroicons/react/24/solid'
|
||||
import {
|
||||
Popover,
|
||||
PopoverButton,
|
||||
@@ -8,16 +11,16 @@ import {
|
||||
Field,
|
||||
Select,
|
||||
Label,
|
||||
Description,
|
||||
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
|
||||
<PopoverButton className="text-black font-semibold cursor-pointer flex gap-1 hover:outline-2 rounded focus:outline-none">
|
||||
<div className="truncate max-w-36 sm:max-w-72 md:max-w-124">
|
||||
NR-18 PEMT Plataforma Móvel de Trabalho
|
||||
</div>
|
||||
<ChevronDownIcon className="w-5 fill-black" />
|
||||
</PopoverButton>
|
||||
@@ -25,66 +28,73 @@ export function Menu() {
|
||||
<PopoverPanel
|
||||
// static={true}
|
||||
anchor="bottom"
|
||||
className="sticky z-20 -mt-11.5 w-full py-6 lg:py-24 bg-lime-400 rounded-b-2xl"
|
||||
className="sticky z-20 -mt-11.5 w-full py-6 2xl:py-24 bg-lime-400 rounded-b-2xl drop-shadow-sm transition duration-150 ease-linear data-[closed]:opacity-0"
|
||||
transition
|
||||
>
|
||||
<Container className="text-black">
|
||||
<Container className="text-black relative xl:w-10/12 2xl:w-5xl">
|
||||
<CloseButton
|
||||
className="absolute bg-black -top-3.5 2xl:-top-20 right-2.5 2xl:right-0 text-white rounded-full p-px cursor-pointer"
|
||||
title="Fechar"
|
||||
aria-hiden={true}
|
||||
>
|
||||
<XMarkIcon className="size-3.5" />
|
||||
</CloseButton>
|
||||
|
||||
<div className="border-b border-black pb-6 lg:pb-12 mb-6 lg:mb-12">
|
||||
<span>Curso de formação</span>
|
||||
<h1 className="text-2xl/8 lg:text-3xl">
|
||||
<h1 className="text-xl lg:text-2xl">
|
||||
NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex max-lg:flex-col lg:gap-2.5 justify-between mb-2.5">
|
||||
<h6 className="font-semibold text-lg">
|
||||
<h6 className="font-medium text-xl lg:text-2xl">
|
||||
Conheça outros cursos da EDUSEG®
|
||||
</h6>
|
||||
<Field className="flex gap-1 items-center">
|
||||
<Label>Exibir apenas</Label>
|
||||
<div className="relative flex border items-center justify-between gap-0.5 border-black rounded px-1">
|
||||
<Select className="appearance-none focus:outline-none">
|
||||
<option value="formacao">Formação</option>
|
||||
<option value="reciclagem">Reciclagem</option>
|
||||
</Select>
|
||||
<ChevronDownIcon
|
||||
className="pointer-events-none size-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<div className="flex max-lg:flex-col gap-0.5 lg:gap-4">
|
||||
{/* Search */}
|
||||
<label className="flex gap-1 items-center">
|
||||
<span className="text-nowrap">Buscar por</span>
|
||||
<div className="flex border rounded px-1.5 py-0.5 lg:px-2 lg:py-1 focus-within:bg-white w-full transition duration-150">
|
||||
<input className="outline-none w-full" />
|
||||
<MagnifyingGlassIcon className="w-5" />
|
||||
</div>
|
||||
</label>
|
||||
{/* Filter */}
|
||||
<Field className="flex gap-1 items-center">
|
||||
<Label className="text-nowrap">Exibir apenas</Label>
|
||||
<div className="relative w-full lg:w-30">
|
||||
<Select className="flex border items-center justify-between gap-0.5 border-black rounded px-1.5 py-0.5 lg:px-2 lg:py-1 appearance-none focus:outline-none w-full">
|
||||
<option value="formacao">Formação</option>
|
||||
<option value="reciclagem">Reciclagem</option>
|
||||
</Select>
|
||||
<ChevronDownIcon
|
||||
className="absolute top-2.5 right-2.5 pointer-events-none size-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 className="list-disc list-inside font-medium *:*:hover:underline *:*:cursor-pointer max-lg:*:truncate">
|
||||
<li>
|
||||
<a hreg="#">Lei Lucas</a>
|
||||
</li>
|
||||
<li>
|
||||
<a hreg="#">NR-18 PEMT Plataforma Móvel de Trabalho Aéreo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a hreg="#">NR-35 Trabalho em Altura</a>
|
||||
</li>
|
||||
<li>
|
||||
<a hreg="#">NR-10 Básico</a>
|
||||
</li>
|
||||
<li>
|
||||
<a hreg="#">LOTO Lockout Tagout</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* <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" />
|
||||
|
||||
Reference in New Issue
Block a user