add alphine

This commit is contained in:
2025-04-21 14:58:39 -03:00
parent f970c079e0
commit 013bf8cda0
6 changed files with 35 additions and 6 deletions

View File

@@ -0,0 +1,6 @@
import type { Alpine } from 'alpinejs'
import collapse from '@alpinejs/collapse'
export default (Alpine: Alpine) => {
Alpine.plugin(collapse)
}

3
superpage/src/env.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
interface Window {
Alpine: import('alpinejs').Alpine
}

View File

@@ -179,15 +179,27 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
<div class="lg:col-span-2 flex flex-col gap-1.5">
{
data.course.modules.map((summary) => (
<details class="bg-white/10 rounded-lg w-full px-5 py-3 open:bg-white/15 open:[&_svg]:-rotate-180">
<summary class="cursor-pointer flex items-center justify-between marker:content-['']">
<div
x-data="{expanded: false}"
class="bg-white/10 rounded-lg w-full px-5 py-3"
:class="{'bg-white/15': expanded === true}"
>
<div
@click="expanded = ! expanded"
class="cursor-pointer flex items-center justify-between"
>
<span>{summary}</span>
<Icon
name="chevron"
class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0"
:class="{'-rotate-180': expanded === true}"
/>
</summary>
<div class="text-sm/6 text-white/70 space-y-2 mt-2">
</div>
<div
x-show="expanded"
class="text-sm/6 text-white/70 space-y-2 mt-2"
style="display: none;"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque id
libero semper vulputate a ut ex. Pellentesque semper ultrices mi in efficitur.
@@ -198,7 +210,7 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
sed consequat augue convallis et.
</p>
</div>
</details>
</div>
))
}
</div>