From 68e1d10b12d8e1bb02ddf9fe8173320359a4a0a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?= Date: Wed, 16 Apr 2025 12:39:59 -0300 Subject: [PATCH] wip supermenu --- superpage/astro.config.mjs | 2 +- .../src/components/{List.jsx => FAQ.jsx} | 4 +- superpage/src/components/Menu.jsx | 65 +++++++++++++++++++ superpage/src/components/Select.jsx | 54 --------------- superpage/src/layouts/Layout.astro | 35 ++++------ superpage/src/pages/index.astro | 64 ++++++++++-------- 6 files changed, 117 insertions(+), 107 deletions(-) rename superpage/src/components/{List.jsx => FAQ.jsx} (96%) create mode 100644 superpage/src/components/Menu.jsx delete mode 100644 superpage/src/components/Select.jsx diff --git a/superpage/astro.config.mjs b/superpage/astro.config.mjs index 767600b..935ed54 100644 --- a/superpage/astro.config.mjs +++ b/superpage/astro.config.mjs @@ -13,6 +13,6 @@ export default defineConfig({ }, server: { host: '0.0.0.0', - allowedHosts: ['7aaa-187-57-7-239.ngrok-free.app'], + allowedHosts: ['macos.sergio.run'], }, }) diff --git a/superpage/src/components/List.jsx b/superpage/src/components/FAQ.jsx similarity index 96% rename from superpage/src/components/List.jsx rename to superpage/src/components/FAQ.jsx index 90e8c8c..9ec382c 100644 --- a/superpage/src/components/List.jsx +++ b/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 ( <> @@ -95,7 +95,7 @@ export function ListButton({ children }) { export function ListPanel({ children }) { return ( - + {children} ) diff --git a/superpage/src/components/Menu.jsx b/superpage/src/components/Menu.jsx new file mode 100644 index 0000000..1d1dbbc --- /dev/null +++ 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 ( + + +
+ NR-18 PEMT Plataforma Móvel de Trabalho Aéreo +
+ + + + + +
+ Curso de formação +

+ NR-18 PEMT Plataforma Elevatória Móvel de Trabalho +

+
+ +
+ Conheça outros cursos da EDUSEG® +
+ + {/*
+ + Cursos de formação + + + Cursos de reciclagem + +
+ +

Formação

+
    +
  • Lei Lucas
    • +
  • NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
    • +
  • NR-35 Trabalho em Altura
    • +
  • NR-10 Básico
    • +
  • LOTO Lockout Tagout
    • +
+ +

Reciclagem

+
    +
  • NR-12 Máquinas e Equipamentos
    • +
  • NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
    • +
*/} + + + + + ) +} diff --git a/superpage/src/components/Select.jsx b/superpage/src/components/Select.jsx deleted file mode 100644 index 2c5e916..0000000 --- a/superpage/src/components/Select.jsx +++ /dev/null @@ -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 ( - setSelected(value)} - onClose={() => setQuery('')} - > -
- person?.name} - onChange={(event) => setQuery(event.target.value)} - /> - - - -
- - - {filteredPeople.map((person) => ( - - -
{person.name}
- - ))} - - - ) -} diff --git a/superpage/src/layouts/Layout.astro b/superpage/src/layouts/Layout.astro index 25ed17b..c5c3905 100644 --- a/superpage/src/layouts/Layout.astro +++ b/superpage/src/layouts/Layout.astro @@ -2,11 +2,8 @@ import '../styles/app.css' import { Regular as Logo } from '@components/Logo' import { Container } from '@components/Container' -import { - ArrowLeftStartOnRectangleIcon, - AcademicCapIcon, - ChevronDownIcon, -} from '@heroicons/react/24/solid' +import { Menu } from '@components/Menu' +import { ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/solid' --- @@ -24,7 +21,10 @@ import {
- + <>Entrar @@ -33,24 +33,13 @@ import {
-
-
-
- NR-18 PEMT Plataforma Móvel de Trabalho Aéreo -
- -
-
+ -
- -
+
diff --git a/superpage/src/pages/index.astro b/superpage/src/pages/index.astro index dfa9ab1..1854f0e 100644 --- a/superpage/src/pages/index.astro +++ b/superpage/src/pages/index.astro @@ -1,10 +1,10 @@ --- -import { Image } from 'astro:assets' +import Layout from '@layouts/Layout.astro' +import { Picture } from 'astro:assets' import { Card } from '@components/Card' import { Container } from '@components/Container' import { Form } from '@components/Form' -import Layout from '@layouts/Layout.astro' -import { Example } from '@components/List' +import { FAQ } from '@components/FAQ' import { AcademicCapIcon, GlobeAmericasIcon, @@ -21,15 +21,16 @@ import homemdenegocios from './homem-de-negocios.png' -
Curso de formação -

+

NR-18 PEMT Plataforma Móvel de Trabalho Aéreo

@@ -59,7 +60,10 @@ import homemdenegocios from './homem-de-negocios.png' > Contratar agora - +

4.7
@@ -144,25 +156,23 @@ import homemdenegocios from './homem-de-negocios.png'

- +
- -
    +

    Quem é o instrutor?