From a506f3fe2388ac107b80250ea250f5b8d7a046a8 Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Sun, 11 Feb 2024 11:26:06 -0500
Subject: [PATCH] Step 01: Listening for selection change in a React component

---
 src/components/SelectMenu.tsx | 13 +++++++++++++
 src/pages/index.astro         |  3 +++
 2 files changed, 16 insertions(+)
 create mode 100644 src/components/SelectMenu.tsx

diff --git a/src/components/SelectMenu.tsx b/src/components/SelectMenu.tsx
new file mode 100644
index 0000000..c71194a
--- /dev/null
+++ b/src/components/SelectMenu.tsx
@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+const SelectMenu = () => {
+  useEffect(() => {
+    document.addEventListener('selectionchange', () => {
+      console.log('Selection Changed!')
+    });
+  }, []);
+
+  return null;
+}
+
+export default SelectMenu;
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c220642..3d0635d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,9 +1,12 @@
 ---
 import Layout from '@/layouts/Layout.astro';
 import Container from '@/components/Container.astro';
+import SelectMenu from '@/components/SelectMenu.tsx';
 ---
 <Layout title="The Evolution of JavaScript">
 	<Container class="prose">
+		<SelectMenu client:load />
+
 		<h1>The Evolution of JavaScript: From Browser Scripting to Full-Stack Dominance</h1>
 
 		<p>By ChatGPT</p>