mirror of
https://github.com/sern-handler/website
synced 2026-06-14 03:42:20 +00:00
43 lines
1.3 KiB
Plaintext
43 lines
1.3 KiB
Plaintext
---
|
|
import { Icon } from "@astrojs/starlight/components";
|
|
|
|
interface Props {
|
|
title: string;
|
|
button: string;
|
|
icon: Parameters<typeof Icon>[0]["name"];
|
|
}
|
|
|
|
const { title, icon, button } = Astro.props;
|
|
const modalId = `modal-${Math.random().toString(36).slice(2)}`;
|
|
---
|
|
|
|
<div>
|
|
<label
|
|
for={modalId}
|
|
class="flex cursor-pointer items-center justify-center rounded-lg bg-accent-600 px-4 py-2 text-white dark:bg-accent-200 dark:text-gray-900"
|
|
>
|
|
<b>{button}</b>
|
|
<Icon name={icon} class="h-6 w-6" />
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input
|
|
type="checkbox"
|
|
id={modalId}
|
|
class="peer fixed appearance-none opacity-0"
|
|
/>
|
|
|
|
<label
|
|
for={modalId}
|
|
class="pointer-events-none invisible fixed inset-0 z-50 flex cursor-pointer items-center justify-center overflow-hidden overscroll-contain bg-white/70 opacity-0 backdrop-blur-md transition-all duration-200 ease-in-out peer-checked:pointer-events-auto peer-checked:visible peer-checked:opacity-100 dark:bg-gray-800/70 peer-checked:[&>*]:translate-y-0 peer-checked:[&>*]:scale-100"
|
|
>
|
|
<div
|
|
class="w-5/6 -translate-y-4 scale-95 transform border border-gray-300 bg-white p-4 shadow-lg transition-all duration-200 ease-in-out dark:border-gray-700 dark:bg-gray-900"
|
|
>
|
|
<h2 class="mb-4 text-xl font-bold">{title}</h2>
|
|
<slot />
|
|
</div>
|
|
</label>
|
|
</div>
|