From bb64b203120c51dc63cc8fe05612125df898c4ff Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Mon, 3 Mar 2025 21:35:30 +0100
Subject: [PATCH] Make item lists clickable

---
 src/back/jdd-components/items-list/items-list.css     | 1 +
 src/back/jdd-components/items-list/items-list.jdd.tsx | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/back/jdd-components/items-list/items-list.css b/src/back/jdd-components/items-list/items-list.css
index a39fc32..8a95b39 100644
--- a/src/back/jdd-components/items-list/items-list.css
+++ b/src/back/jdd-components/items-list/items-list.css
@@ -8,6 +8,7 @@
 	}
 
 	.items-list__item {
+		text-decoration: none;
 		background-color: var(--color-brand-text-bg);
 		color: var(--color-brand-text-fg);
 		padding: 16px;
diff --git a/src/back/jdd-components/items-list/items-list.jdd.tsx b/src/back/jdd-components/items-list/items-list.jdd.tsx
index acade3e..098f358 100644
--- a/src/back/jdd-components/items-list/items-list.jdd.tsx
+++ b/src/back/jdd-components/items-list/items-list.jdd.tsx
@@ -10,6 +10,7 @@ const component_arguments = {
 		"description",
 	]),
 	count: new ComponentArguments.ShortText().setExampleValues(["3", "5"]),
+	url: new ComponentArguments.ShortText().setExampleValues(["/items/:id/"]),
 } as const;
 
 interface OptimisticCollectionItem {
@@ -22,7 +23,7 @@ export class ItemsList extends Component<typeof component_arguments> {
 	}
 
 	async toHTML({
-		args: { mode, collection, title_field, text_content_field },
+		args: { mode, collection, title_field, text_content_field, url },
 		classes,
 		jdd_context: { render_markdown, language, ctx },
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
@@ -34,7 +35,7 @@ export class ItemsList extends Component<typeof component_arguments> {
 		return (
 			<div class={["items-list", ...classes]}>
 				{items.map((item) => (
-					<div class="items-list__item">
+					<a class="items-list__item" href={url.replaceAll(":id", item.id)}>
 						<span class="items-list__item__title">
 							{(item as OptimisticCollectionItem).get(title_field)}
 						</span>
@@ -44,7 +45,7 @@ export class ItemsList extends Component<typeof component_arguments> {
 								(item as OptimisticCollectionItem).get(text_content_field)
 							)}
 						</div>
-					</div>
+					</a>
 				))}
 			</div>
 		);