Public
Script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/** @jsx jsx */
/** @jsxFrag Fragment */
import { jsx, Fragment } from 'https://deno.land/x/hono/middleware.ts'
export default function UserLinks({ username, links }) {
return (
<div className="flex flex-row gap-2 flex-wrap sortable">
{links.map((link, index) => (
<div key={index} className="">
{/* Trigger the modal when clicking the link label */}
<div
hx-get={`/edit-link-modal/${username}/${link.id}`}
hx-target="#edit-link-modal-placeholder" // The placeholder where modal is rendered
hx-swap="afterBegin"
className=""
>
<p className="cursor-pointer hover:bg-neutral-800 bg-neutral-700 text-white font-medium rounded-md px-2 py-1">
{link.label}
</p>
</div>
{/* Placeholder for modal rendering */}
<div id="edit-link-modal-placeholder"></div>
</div>
))}
{/* Add Link button */}
<button
type="button"
className="bg-neutral-700 hover:bg-neutral-800 text-white font-medium py-1 px-2 rounded-md"
hx-get={`/addLinkModal/${username}`}
hx-target="#new-link"
hx-swap="outerHTML"
>
+
</button>
<div id="new-link"></div> {/* Placeholder for new links */}
</div>
);
}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
April 26, 2024