sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-23 10:05:58 -03:00
parent 270a9c6e68
commit 2794934520
21 changed files with 1083 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
superpage/src/components/Accordion/Accordion.astro Normal file
View File

@@ -0,0 +1,3 @@
<div class="space-y-2.5">
<slot />
</div>

7
superpage/src/components/Accordion/Body.astro Normal file
View File

@@ -0,0 +1,7 @@
<div
x-show="open"
class="text-sm/6 text-white/70 space-y-2.5 px-5 pb-3 [&_ul]:list-disc [&_ul]:list-inside"
style="display: none;"
>
<slot />
</div>

15
superpage/src/components/Accordion/Header.astro Normal file
View File

@@ -0,0 +1,15 @@
---
import { Icon } from "astro-icon/components";
---
<div
class="cursor-pointer flex items-center justify-between px-5 py-3"
x-on:click="open = !open"
>
<slot />
<Icon
name="chevron-down"
class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0"
:class="{'-rotate-180': open === true}"
/>
</div>

7
superpage/src/components/Accordion/Item.astro Normal file
View File

@@ -0,0 +1,7 @@
<div
x-data="{ open: false }"
class="bg-white/10 rounded-lg w-full"
:class="{'bg-white/15': open === true}"
>
<slot />
</div>

4
superpage/src/components/Accordion/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export { default as Accordion } from "./Accordion.astro";
export { default as Item } from "./Item.astro";
export { default as Header } from "./Header.astro";
export { default as Body } from "./Body.astro";

45
superpage/src/components/HeaderNav.astro
View File

@@ -1,9 +1,12 @@
---
import { Icon } from 'astro-icon/components'
import Container from './Container.astro'
import { Icon } from "astro-icon/components";
import Container from "./Container.astro";
import { getCollection } from 'astro:content'
const courses = await getCollection('courses', ({ data }) => data.draft != true)
import { getCollection } from "astro:content";
const courses = await getCollection(
"courses",
({ data }) => data.draft != true,
);
---
<nav
@@ -18,8 +21,10 @@ const courses = await getCollection('courses', ({ data }) => data.draft != true)
x-on:click="open = true"
aria-haspopup="true"
>
<div class="truncate max-w-36 sm:max-w-72 md:max-w-124">NR-18 PEMT Plataforma Móvel de Trabalho</div>
<Icon name="chevron" aria-hidden="true" class="size-4" />
<div class="truncate max-w-36 sm:max-w-72 md:max-w-124">
NR-18 PEMT Plataforma Móvel de Trabalho
</div>
<Icon name="chevron-down" aria-hidden="true" class="size-4" />
</button>
<button
@@ -56,16 +61,22 @@ const courses = await getCollection('courses', ({ data }) => data.draft != true)
<div class="border-b border-black pb-6 lg:pb-12 mb-6 lg:mb-12">
<span>Curso de formação</span>
<h1 class="text-xl lg:text-2xl">NR-18 PEMT Plataforma Elevatória Móvel de Trabalho</h1>
<h1 class="text-xl lg:text-2xl">
NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
</h1>
</div>
<div class="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
<h6 class="font-medium text-xl lg:text-2xl">Conheça outros cursos da EDUSEG&reg;</h6>
<h6 class="font-medium text-xl lg:text-2xl">
Conheça outros cursos da EDUSEG&reg;
</h6>
<div class="flex max-lg:flex-col gap-0.5 lg:gap-4">
<!-- Search -->
<label class="flex gap-1 items-center">
<span class="text-nowrap max-lg:w-2/5 text-right">Buscar por</span>
<span class="text-nowrap max-lg:w-2/5 text-right"
>Buscar por</span
>
<div
class="flex items-center 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"
>
@@ -77,7 +88,9 @@ const courses = await getCollection('courses', ({ data }) => data.draft != true)
<!-- Filter -->
<label class="flex gap-1 items-center">
<span class="text-nowrap max-lg:w-2/5 text-right">Exibir apenas</span>
<span class="text-nowrap max-lg:w-2/5 text-right"
>Exibir apenas</span
>
<div class="relative w-full lg:w-30 bg-white/20">
<select
class="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 lowercase"
@@ -85,7 +98,10 @@ const courses = await getCollection('courses', ({ data }) => data.draft != true)
<option value="formacao">Formação</option>
<option value="reciclagem">Reciclagem</option>
</select>
<Icon name="chevron" class="absolute top-2.5 right-2.5 pointer-events-none size-3.5" />
<Icon
name="chevron-down"
class="absolute top-2.5 right-2.5 pointer-events-none size-3.5"
/>
</div>
</label>
<!-- Filder End -->
@@ -97,11 +113,14 @@ const courses = await getCollection('courses', ({ data }) => data.draft != true)
courses.map(({ data: { title, slug } }) => {
return (
<li>
<a href={`/${slug}`} class="font-bold hover:underline">
<a
href={`/${slug}`}
class="font-bold hover:underline"
>
{title}
</a>
</li>
)
);
})
}
</ul>