veryroundbird.house
forked from
haetae.tngl.sh/fanfic-atproto
personal fork for experimenting
1---
2import X from "@lucide/astro/icons/x";
3
4interface Props {
5 id: string;
6 title: string;
7 class?: string;
8 alert?: boolean;
9}
10
11const { id, title, class: className, alert = false } = Astro.props;
12---
13<dialog
14 {id}
15 class:list={[
16 "modal modal-bottom sm:modal-middle",
17 className,
18 ]}
19 role={alert ? "alertdialog" : undefined}
20 closedby="any"
21>
22 <div class="modal-box">
23 <header class="modal-header">
24 <h1 class="text-lg leading-none flex-1 pl-2">{title}</h1>
25 <form method="dialog">
26 <button aria-label="close" class="btn btn-error">
27 <X />
28 </button>
29 </form>
30 </header>
31
32 <div class="mt-14">
33 <slot />
34 </div>
35 </div>
36</dialog>
37
38<style>
39 @reference "../assets/styles/global.css";
40
41 .modal-header {
42 @apply absolute top-0 left-0 flex items-center justify-between p-2 container bg-accent text-accent-content;
43 }
44</style>