troylusty.com/src/components/Accordion.astro
Troy 90ef859c50
upgrade to tailwind v4.0 (#33)
* begin switching to tailwind v4

* remove old tw config file

* convert colors back to hex

* move all content out of tw config

* fixed colors

* better match colors

* remove abnormally large margins
2025-01-23 18:48:20 +00:00

38 lines
1,020 B
Text

---
import { Icon } from "astro-icon/components";
type Props = {
institution: String;
qualification: String;
grades: Array<String>;
isOpen?: boolean;
};
const { institution, qualification, grades, isOpen = false } = Astro.props;
---
<div class="grid">
<details open={isOpen === true ? "open" : null} class="group">
<summary
class="flex cursor-pointer items-center justify-between py-3 font-bold"
>
<p class="text-secondary m-0 font-semibold text-balance">
{qualification}
</p>
<span class="transition group-open:rotate-180">
<Icon
name="mdi:chevron-down"
class="text-secondary group-open:text-tertiary h-6 w-auto transition-colors"
/>
</span>
</summary>
<div class="p-4">
<p class="text-tertiary my-0 mb-2 font-semibold">
{institution}
</p>
<ol class="list-inside list-disc">
{grades.map((grade) => <li class="text-tertiary">{grade}</li>)}
</ol>
</div>
</details>
</div>