Disclosure

---
import Disclosure from "@/components/ui/disclosure.astro"
---

<Disclosure title="Ejemplo de título">
	Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus assumenda
	qui fugiat explicabo deleniti ab voluptates omnis quod atque, consequuntur
	incidunt cumque maxime!
</Disclosure>

Instalación

Copie el siguiente codigo, cree un archivo en src/components/ui/disclosure.astro y peguelo ahí.

---
import type { HTMLAttributes } from "astro/types"
interface Props extends HTMLAttributes<"details"> {
	title: string
}

const { title, ...rest } = Astro.props
---

<details
	class="group mx-4 w-full rounded-md border border-neutral-800 px-6 py-4 text-sm open:transition-all open:duration-200 open:ease-in-out focus:outline-none"
	{...rest}>
	<summary class="cursor-pointer list-none select-none">
		<div class="flex items-center justify-between">
			<span class="text-neutral-900 dark:text-neutral-100">{title}</span>
			<div
				class="px-2 py-1 transition-transform duration-200 ease-in-out group-open:rotate-180">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke-width="1.5"
					stroke="currentColor"
					class="size-5">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
				</svg>
			</div>
		</div>
	</summary>
	<p class="text-pretty text-neutral-400">
		<slot />
	</p>
</details>

Importación

---
import Disclosure from "@/components/ui/disclosure.astro"
---

Para usar los alias ”@/” configure su archivo ts.config.json Mirar como configurar aquí

Component API

Disclosure