From 26523c990f910ca1a09c6c13c38c2dc9c23ac568 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Mon, 10 Aug 2026 20:20:05 +0200
Subject: [PATCH] make icon tiles grid clickable

---
 .../jdd-components/icon-tiles-grid/icon-tiles-grid.css     | 7 +++++++
 .../jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx | 6 ++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css
index 8b86c0a..c362804 100644
--- a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css
+++ b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css
@@ -32,6 +32,7 @@
 			gap: 32px;
 			min-height: 320px;
 			max-width: 400px;
+			text-decoration: none; /* in case it's an a href */
 
 			&,
 			* {
@@ -55,5 +56,11 @@
 				font-size: 18px;
 			}
 		}
+
+		a[href].icon-tiles-grid__tile {
+			&:hover {
+				transform: scale(1.05);
+			}
+		}
 	}
 }
diff --git a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx
index c980bc2..dba703f 100644
--- a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx
+++ b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx
@@ -18,6 +18,7 @@ const component_arguments = {
 			),
 			name: new Args.ShortText(),
 			description: new Args.ShortText(),
+			url: new Args.ShortText(),
 		})
 	),
 } as const;
@@ -44,16 +45,17 @@ export class IconTilesGrid extends Component<typeof component_arguments> {
 				<div>{render_markdown(language, description)}</div>
 				<section class="icon-tiles-grid__grid">
 					{tiles.map((tile) => (
-						<div
+						<a
 							class="icon-tiles-grid__tile"
 							style={`--tile-bg-color: var(${tile.color}); --tile-fg-color: var(${getFgColorVariable(tile.color, 4.2)})`}
+							href={tile.url ? tile.url : false}
 						>
 							<div class="icon">
 								{tile.icon == "none" ? "" : icon(tile.icon)}
 							</div>
 							<div class="name">{insert_nbsp(tile.name)}</div>
 							<div class="description">{insert_nbsp(tile.name)}</div>
-						</div>
+						</a>
 					))}
 				</section>
 			</div>