96 lines
3.6 KiB
JavaScript
96 lines
3.6 KiB
JavaScript
import {
|
|
ChevronDownIcon,
|
|
XMarkIcon,
|
|
MagnifyingGlassIcon,
|
|
} from '@heroicons/react/24/solid'
|
|
import {
|
|
Popover,
|
|
PopoverButton,
|
|
PopoverPanel,
|
|
PopoverBackdrop,
|
|
Field,
|
|
Select,
|
|
Label,
|
|
CloseButton,
|
|
} from '@headlessui/react'
|
|
import { Container } from './Container'
|
|
|
|
export function Menu({ recentCourses }) {
|
|
return (
|
|
<Popover className="relative">
|
|
<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>
|
|
|
|
<PopoverPanel
|
|
// static={true}
|
|
anchor="bottom"
|
|
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 relative xl:w-10/12 2xl:w-5xl">
|
|
<CloseButton
|
|
className="absolute border border-black -top-3.5 2xl:-top-20 right-2.5 2xl:right-0 rounded-full p-px cursor-pointer"
|
|
title="Fechar"
|
|
aria-hidden={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-xl lg:text-2xl">
|
|
NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
|
|
<h6 className="font-medium text-xl lg:text-2xl">
|
|
Conheça outros cursos da EDUSEG®
|
|
</h6>
|
|
|
|
<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 bg-white/20 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 bg-white/20">
|
|
<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 className="list-disc list-inside font-medium *:*:hover:underline *:*:cursor-pointer max-lg:*:truncate">
|
|
{recentCourses.map(({ data: { title, slug } }, idx) => {
|
|
return (
|
|
<li key={idx}>
|
|
<a href={`/${slug}`}>{title}</a>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</Container>
|
|
</PopoverPanel>
|
|
<PopoverBackdrop className="fixed z-10 inset-0" />
|
|
</Popover>
|
|
)
|
|
}
|