59 lines
1.9 KiB
Text
59 lines
1.9 KiB
Text
|
---
|
||
|
|
const { id, collapseId, heading, content, first } = Astro.props;
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
id: string;
|
||
|
|
collapseId: string;
|
||
|
|
heading: string;
|
||
|
|
content: string;
|
||
|
|
first?: boolean;
|
||
|
|
}
|
||
|
|
---
|
||
|
|
|
||
|
|
<div
|
||
|
|
class=`${first ? "hs-accordion pb-3 active" : "hs-accordion pt-6 pb-3"}`
|
||
|
|
id={id}
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
class="hs-accordion-toggle group inline-flex w-full items-center justify-between gap-x-3 rounded-lg pb-3 text-start font-semibold text-neutral-800 outline-none ring-zinc-500 transition hover:text-neutral-500 focus-visible:ring dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:outline-none md:text-lg"
|
||
|
|
aria-controls={collapseId}
|
||
|
|
>
|
||
|
|
{heading}
|
||
|
|
<svg
|
||
|
|
class="block h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:hidden dark:text-neutral-400"
|
||
|
|
width="24"
|
||
|
|
height="24"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
class="hidden h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:block dark:text-neutral-400"
|
||
|
|
width="24"
|
||
|
|
height="24"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg
|
||
|
|
>
|
||
|
|
</button>
|
||
|
|
<div
|
||
|
|
aria-labelledby={id}
|
||
|
|
class=`${first
|
||
|
|
? "hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
|
||
|
|
: "hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"}`
|
||
|
|
id={collapseId}
|
||
|
|
class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
|
||
|
|
aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one"
|
||
|
|
>
|
||
|
|
<p class="text-neutral-600 dark:text-neutral-400">
|
||
|
|
{content}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|