finxol.io
A very simple bookmarking webapp
bookmarker.finxol.deno.net/
feat: add dialog
+56
+24
src/components/BookmarkEditModal.css
+24
src/components/BookmarkEditModal.css
···
1
+
.bookmark-edit-modal {
2
+
position: fixed;
3
+
inset: 0;
4
+
margin: auto;
5
+
width: min(90vw, 32rem);
6
+
max-height: min(80vh, 600px);
7
+
padding: 1.5rem;
8
+
border: none;
9
+
border-radius: 0.75rem;
10
+
background: var(--page-bg);
11
+
color: var(--primary-text);
12
+
flex-direction: column;
13
+
gap: 1rem;
14
+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
15
+
16
+
&:popover-open {
17
+
display: flex;
18
+
}
19
+
20
+
&::backdrop {
21
+
background: rgba(0, 0, 0, 0.5);
22
+
backdrop-filter: blur(4px);
23
+
}
24
+
}
+28
src/components/BookmarkEditModal.tsx
+28
src/components/BookmarkEditModal.tsx
···
1
+
import { PencilIcon, XIcon } from "lucide-solid"
2
+
import "./BookmarkEditModal.css"
3
+
4
+
export function BookmarkEditModal(props: { id: string }) {
5
+
return (
6
+
<>
7
+
<button
8
+
type="button"
9
+
command="show-modal"
10
+
commandfor={`edit-${props.id}`}
11
+
class="bookmark-edit button-icon button-ghost"
12
+
>
13
+
<PencilIcon size={16} />
14
+
</button>
15
+
<dialog id={`edit-${props.id}`} class="bookmark-edit-modal">
16
+
<button
17
+
type="button"
18
+
commandfor={`edit-${props.id}`}
19
+
command="close"
20
+
class="button-ghost button-icon"
21
+
>
22
+
<XIcon size={16} />
23
+
</button>
24
+
Edit
25
+
</dialog>
26
+
</>
27
+
)
28
+
}
+4
src/routes/index.tsx
+4
src/routes/index.tsx
···
11
11
} from "lucide-solid"
12
12
import "../components/ui/button.css"
13
13
import "./index.css"
14
+
import { BookmarkEditModal } from "../components/BookmarkEditModal.tsx"
14
15
15
16
export const Route = createFileRoute("/")({
16
17
component: Index,
···
153
154
>
154
155
<ExternalLinkIcon size={16} />
155
156
</a>
157
+
<BookmarkEditModal
158
+
id={String(bookmark.id)}
159
+
/>
156
160
<button
157
161
type="button"
158
162
class="button-icon button-ghost button-danger"