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

dropdown

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-05-06 13:46:41 -03:00
parent e274760106
commit 907177b281
4 changed files with 218 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
superpage/src/components/Course/BuyDropdown.astro
View File

@@ -6,47 +6,111 @@ const currency = new Intl.NumberFormat("pt-BR", {
}).format(course.unit_price);
---
<details class:list={["group relative group", Astro.props.class]}>
<details class:list={["group", Astro.props.class]}>
<summary
class="flex bg-black hover:bg-white hover:text-black group-open:text-black group-open:bg-white font-semibold py-2.5 px-3 rounded-md cursor-pointer transition"
>
Contratar agora
</summary>
<div
class="absolute right-0 top-full translate-y-1 bg-stone-900 border border-white/15 min-w-78 rounded-lg shadow drop-shadow p-2.5"
class="absolute inset-x-2.5 top-full translate-y-1.5 md:inset-auto md:right-2.5 2xl:right-0 md:w-auto md:min-w-96 bg-stone-900 border border-white/15 rounded-xl shadow-lg"
>
<strong>Selecione a opção:</strong>
<ul>
<li
class="p-2.5 hover:bg-white/10 rounded-lg flex gap-2.5 items-center"
>
<input
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
/>
<span class="uppercase">EDUSEG&reg; Flexível</span>
</li>
<li class="p-2.5 hover:bg-white/10 rounded-lg">
<input
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
/>
<span class="uppercase">EDUSEG&reg; In-Company</span>
</li>
<li class="p-2.5 hover:bg-white/10 rounded-lg">
<input
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
/>
<span class="uppercase">EDUSEG&reg; Conteúdo</span>
</li>
<li class="p-2.5 hover:bg-white/10 rounded-lg">
<input
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
/>
<span>Contratar {currency} p/ matrícula</span>
<h6
class="p-2.5 lg:px-5 lg:py-3.5 font-semibold border-b border-white/10 bg-white/5"
>
Selecione uma opção
</h6>
<ul class="p-3">
<li>
<label
class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
>
<input
class="box-content size-1.5 border-5 border-black bg-black appearance-none rounded-full ring-1 ring-white/15 checked:border-lime-400 checked:ring-lime-400 mt-1.5"
name="selected"
type="radio"
checked
/>
<div>
<p class="uppercase font-semibold">
Matrícula única <span
class="px-0.5 text-black bg-lime-400"
>{currency}</span
>
</p>
<p class="text-sm text-white/50">
Contratação rápida e sem burocracia
</p>
</div>
</label>
</li>
</ul>
<button
class="p-2.5 bg-lime-400 rounded-lg w-full text-black text-semibold"
>Continuar</button
>
<h6 class="px-5 font-semibold">Modelos de contratação</h6>
<ul class="p-3 space-y-0.5">
<li>
<label
class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
>
<input
class="box-content size-1.5 border-5 border-black bg-black appearance-none rounded-full ring-1 ring-white/15 checked:border-lime-400 checked:ring-lime-400 mt-1.5"
name="selected"
type="radio"
/>
<div>
<p class="uppercase font-semibold">
EDUSEG&reg; Flexível
</p>
<p class="text-sm text-white/50">
Catálogo completo sempre à sua disposição
</p>
</div>
</label>
</li>
<li>
<label
class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
>
<input
class="box-content size-1.5 border-5 border-black bg-black appearance-none rounded-full ring-1 ring-white/15 checked:border-lime-400 checked:ring-lime-400 mt-1.5"
name="selected"
type="radio"
/>
<div>
<p class="uppercase font-semibold">
EDUSEG&reg; In-Company
</p>
<p class="text-sm text-white/50">
Treinamento presencial na sua empresa
</p>
</div>
</label>
</li>
<li>
<label
class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
>
<input
class="box-content size-1.5 border-5 border-black bg-black appearance-none rounded-full ring-1 ring-white/15 checked:border-lime-400 checked:ring-lime-400 mt-1.5"
name="selected"
type="radio"
/>
<div>
<p class="uppercase font-semibold">
EDUSEG&reg; Conteúdo
</p>
<p class="text-sm text-white/50">
Leve nosso conteúdo para sua plataforma
</p>
</div>
</label>
</li>
</ul>
<div class="p-2.5 lg:p-5 border-t border-white/10">
<button
class="p-3 bg-lime-400 rounded-lg w-full text-black font-semibold cursor-pointer hover:bg-white hover:text-black transition"
>
Continuar
</button>
</div>
</div>
</details>