a tool for shared writing and social publishing
leaflet.pub
update modal to have close button
cozylittle.house
+6
-3
components/Modal.tsx
+6
-3
components/Modal.tsx
···
1
import * as Dialog from "@radix-ui/react-dialog";
2
import React from "react";
3
4
export const Modal = ({
5
className,
···
26
<Dialog.Content
27
className={`
28
z-20 fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
29
-
overflow-y-scroll no-scrollbar w-max max-w-screen h-fit max-h-screen p-3
30
31
`}
32
>
33
<div
34
className={`
35
opaque-container p-3
36
-
flex flex-col gap-1
37
${className}`}
38
>
39
{title ? (
···
45
)}
46
<Dialog.Description>{children}</Dialog.Description>
47
</div>
48
-
<Dialog.Close />
49
</Dialog.Content>
50
</Dialog.Portal>
51
</Dialog.Root>
···
1
import * as Dialog from "@radix-ui/react-dialog";
2
import React from "react";
3
+
import { CloseTiny } from "./Icons/CloseTiny";
4
5
export const Modal = ({
6
className,
···
27
<Dialog.Content
28
className={`
29
z-20 fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
30
+
overflow-y-scroll no-scrollbar w-max max-w-screen h-fit max-h-screen p-3 flex flex-col
31
32
`}
33
>
34
+
<Dialog.Close className="bg-bg-page rounded-full -mb-3 mr-2 z-10 w-fit p-1 place-self-end border border-border-light text-tertiary">
35
+
<CloseTiny />
36
+
</Dialog.Close>
37
<div
38
className={`
39
opaque-container p-3
40
+
flex flex-col gap-1 rounded-lg!
41
${className}`}
42
>
43
{title ? (
···
49
)}
50
<Dialog.Description>{children}</Dialog.Description>
51
</div>
52
</Dialog.Content>
53
</Dialog.Portal>
54
</Dialog.Root>