remove SSR from simple utilities

chan.dev/src/components/button.astro

@@ -1,13 +1,13 @@
 ---
-const { class: className, ...restProps } = Astro.props;
+const {class: className, ...restProps} = Astro.props
 ---
 
 <button
-  class:list={[
-    className,
-    "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full",
-  ]}
-  {...Astro.props}
+	class:list={[
+		className,
+		'bg-blue-500 hover:bg-blue-700 active:bg-blue-900 text-white font-bold py-2 px-4 rounded w-full',
+	]}
+	{...Astro.props}
 >
-  <slot />
+	<slot />
 </button>

chan.dev/src/pages/flip.astro

@@ -0,0 +1,38 @@
+---
+import Layout from '#layouts/Layout.astro'
+import Prose from '#components/prose.astro'
+import Button from '#components/button.astro'
+---
+
+<Layout>
+	<Prose as="main">
+		<main class="min-w-[26rem] text-center">
+			<Button data-refresh-button>Flip</Button>
+			<div class="text-9xl font-black font-mono" data-result>
+			</div>
+		</main>
+	</Prose>
+</Layout>
+<script>
+	let refreshButton: HTMLButtonElement = document.querySelector(
+			'[data-refresh-button]'
+		)!,
+		result: HTMLElement =
+			document.querySelector('[data-result]')!
+
+	function renderResult(el: HTMLElement) {
+		return (el.innerText = Math.round(Math.random())
+			? 'heads'
+			: 'tails')
+	}
+
+	renderResult(result)
+
+	refreshButton.addEventListener('click', () => {
+		result.innerText = '🪙'
+
+		setTimeout(() => {
+			renderResult(result)
+		}, 300)
+	})
+</script>

chan.dev/src/pages/roll.astro

@@ -0,0 +1,42 @@
+---
+import Layout from '#layouts/Layout.astro'
+import Prose from '#components/prose.astro'
+import Button from '#components/button.astro'
+---
+
+<Layout>
+	<Prose as="main">
+		<main class="min-w-[26rem] text-center">
+			<Button data-refresh-button>Flip</Button>
+			<div class="text-9xl font-black font-mono" data-result>
+			</div>
+		</main>
+	</Prose>
+</Layout>
+<script>
+	let refreshButton: HTMLButtonElement = document.querySelector(
+			'[data-refresh-button]'
+		)!,
+		result: HTMLElement =
+			document.querySelector('[data-result]')!
+
+	function renderResult(el: HTMLElement) {
+		const sides =
+			Number(
+				new URL(location.href).searchParams.get('sides')
+			) || 6
+		return (el.innerText = String(
+			Math.floor(Math.random() * sides) + 1
+		))
+	}
+
+	renderResult(result)
+
+	refreshButton.addEventListener('click', () => {
+		result.innerText = '🎲'
+
+		setTimeout(() => {
+			renderResult(result)
+		}, 300)
+	})
+</script>