docs: use single listener in icons reference

withastro · Dec 6, 2024 · eac6ff0 · eac6ff0
1 parent cf12beb
commit eac6ff0
Showing 1 changed file with 14 additions and 13 deletions.
diff --git a/docs/src/components/icons-list.astro b/docs/src/components/icons-list.astro
@@ -27,21 +27,22 @@ const icons = Object.keys(Icons) as (keyof typeof Icons)[];
 </div>
 
 <script>
+	const iconGrid = document.querySelector<HTMLDivElement>('.icons-grid');
 	const copiedLabel = document.querySelector<HTMLDivElement>('.icons-grid')?.dataset.labelCopied!;
-	const icons = document.querySelectorAll<HTMLButtonElement>('.icon-preview');
-	icons.forEach((icon) => {
-		icon.addEventListener('click', () => {
-			const iconName = icon.dataset.name!;
-			navigator.clipboard.writeText(iconName);
+	iconGrid?.addEventListener('click', (event) => {
+		if (!(event.target instanceof Element)) return;
+		const icon = event.target.closest('.icon-preview');
+		if (!(icon instanceof HTMLButtonElement)) return;
+		const iconName = icon.dataset.name!;
+		navigator.clipboard.writeText(iconName);
 
-			const iconLabel = icon.querySelector('[aria-live]');
-			if (iconLabel) {
-				iconLabel.textContent = copiedLabel;
-				setTimeout(() => {
-					iconLabel.textContent = iconName;
-				}, 1000);
-			}
-		});
+		const iconLabel = icon.querySelector('[aria-live]');
+		if (iconLabel) {
+			iconLabel.textContent = copiedLabel;
+			setTimeout(() => {
+				iconLabel.textContent = iconName;
+			}, 1000);
+		}
 	});
 </script>