From f4aeace7544a2a5ed17a2225f62da11bc245d01d Mon Sep 17 00:00:00 2001
From: ashleysyg <ashley.syg.lee@gmail.com>
Date: Fri, 29 Nov 2024 17:24:29 -0500
Subject: [PATCH 1/7] feat: basic radio button test

---
 app/page.tsx               |  2 ++
 components/RadioButton.tsx | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 components/RadioButton.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 185d847..26c7d9c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,11 @@
 import EventSection from "@/components/EventSection"
+import RadioButton from "@/components/RadioButton"
 
 export default function Home() {
   return (
     <main className="bg-white flex min-h-screen flex-col items-center justify-between p-0 lg:p-24">
       <EventSection />
+      <RadioButton />
     </main>
   )
 }
diff --git a/components/RadioButton.tsx b/components/RadioButton.tsx
new file mode 100644
index 0000000..5d528c2
--- /dev/null
+++ b/components/RadioButton.tsx
@@ -0,0 +1,26 @@
+export default function RadioButton() {
+    return (
+        <div>
+            <div className="flex items-center">
+                <input 
+                    type="radio"
+                    id="option1"
+                    name="name1"
+                    value="option1"
+                >
+                </input>
+                <label htmlFor="option1">Option 1</label>
+            </div>
+            <div className="flex items-center">
+                <input 
+                    type="radio"
+                    id="option2"
+                    name="name2"
+                    value="option2"
+                >
+                </input>
+                <label htmlFor="option2">Option 2</label>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file

From 6b19a9580ef954f3cd21c70de1712fd0e156d308 Mon Sep 17 00:00:00 2001
From: ashleysyg <ashley.syg.lee@gmail.com>
Date: Sun, 1 Dec 2024 20:51:57 -0500
Subject: [PATCH 2/7] fnctions to update state for radio button group

---
 components/RadioButton.tsx | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/components/RadioButton.tsx b/components/RadioButton.tsx
index 5d528c2..3a9b943 100644
--- a/components/RadioButton.tsx
+++ b/components/RadioButton.tsx
@@ -1,12 +1,26 @@
-export default function RadioButton() {
+'use client'
+
+import { useState } from 'react'
+
+function RadioButton() {
+
+    const [selectedOption, setSelectedOption] = useState("option1")  
+
+    function onValueChange(event: any){
+        setSelectedOption(event.target.value)
+    }
+
     return (
         <div>
             <div className="flex items-center">
                 <input 
                     type="radio"
                     id="option1"
-                    name="name1"
+                    name="group"
                     value="option1"
+                    className="mt-6 flex items-center space-x-3"
+                    checked={selectedOption === "option1"}
+                    onChange={onValueChange}
                 >
                 </input>
                 <label htmlFor="option1">Option 1</label>
@@ -15,12 +29,15 @@ export default function RadioButton() {
                 <input 
                     type="radio"
                     id="option2"
-                    name="name2"
+                    name="group"
                     value="option2"
-                >
+                    checked={selectedOption === "option2"}
+                    onChange={onValueChange}                >
                 </input>
                 <label htmlFor="option2">Option 2</label>
             </div>
         </div>
     )
-}
\ No newline at end of file
+}
+
+export default RadioButton
\ No newline at end of file

From 71913d5106113789a04063ec50c0aa6fdb59247f Mon Sep 17 00:00:00 2001
From: ashleysyg <ashley.syg.lee@gmail.com>
Date: Mon, 9 Dec 2024 12:07:39 -0500
Subject: [PATCH 3/7] formatted hover/focus/checked/disabled

---
 components/RadioButton.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/RadioButton.tsx b/components/RadioButton.tsx
index 3a9b943..58d5f71 100644
--- a/components/RadioButton.tsx
+++ b/components/RadioButton.tsx
@@ -18,12 +18,12 @@ function RadioButton() {
                     id="option1"
                     name="group"
                     value="option1"
-                    className="mt-6 flex items-center space-x-3"
+                    className="flex items-center form-radio text-primary-500 hover:ring hover:ring-primary-500 focus:border-gray-100 focus:bg-primary-500 focus:outline-primary-500 focus:ring focus:ring-primary-500 checked:border-gray-100 checked:bg-primary-500 disabled:border-gray-100 disabled:outline-gray-100"
                     checked={selectedOption === "option1"}
                     onChange={onValueChange}
                 >
                 </input>
-                <label htmlFor="option1">Option 1</label>
+                <label htmlFor="option1" className="ml-3 text-md/6 text-neutral-900">Option 1</label>
             </div>
             <div className="flex items-center">
                 <input 
@@ -31,10 +31,12 @@ function RadioButton() {
                     id="option2"
                     name="group"
                     value="option2"
+                    className="flex items-center form-radio text-primary-500 hover:ring hover:ring-primary-500 focus:border-gray-100 focus:bg-primary-500 focus:outline-primary-500 focus:ring focus:ring-primary-500 checked:border-gray-100 checked:bg-primary-500 disabled:border-gray-100 disabled:outline-gray-100"
                     checked={selectedOption === "option2"}
-                    onChange={onValueChange}                >
+                    onChange={onValueChange}                
+                >
                 </input>
-                <label htmlFor="option2">Option 2</label>
+                <label htmlFor="option2" className="ml-3 text-md/6 text-neutral-900">Option 2</label>
             </div>
         </div>
     )

From a08c09c3a5be99cdd73639870462f8a61ba0c1c0 Mon Sep 17 00:00:00 2001
From: ashleysyg <ashley.syg.lee@gmail.com>
Date: Mon, 9 Dec 2024 12:26:24 -0500
Subject: [PATCH 4/7] abstract radio btn attributes from toy data

---
 components/RadioButton.tsx | 48 +++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/components/RadioButton.tsx b/components/RadioButton.tsx
index 58d5f71..81bb058 100644
--- a/components/RadioButton.tsx
+++ b/components/RadioButton.tsx
@@ -2,9 +2,14 @@
 
 import { useState } from 'react'
 
+const options = [
+    { id: 'option 1' },
+    { id: 'option 2' }
+]
+
 function RadioButton() {
 
-    const [selectedOption, setSelectedOption] = useState("option1")  
+    const [selectedOption, setSelectedOption] = useState("option 1")  
 
     function onValueChange(event: any){
         setSelectedOption(event.target.value)
@@ -12,32 +17,21 @@ function RadioButton() {
 
     return (
         <div>
-            <div className="flex items-center">
-                <input 
-                    type="radio"
-                    id="option1"
-                    name="group"
-                    value="option1"
-                    className="flex items-center form-radio text-primary-500 hover:ring hover:ring-primary-500 focus:border-gray-100 focus:bg-primary-500 focus:outline-primary-500 focus:ring focus:ring-primary-500 checked:border-gray-100 checked:bg-primary-500 disabled:border-gray-100 disabled:outline-gray-100"
-                    checked={selectedOption === "option1"}
-                    onChange={onValueChange}
-                >
-                </input>
-                <label htmlFor="option1" className="ml-3 text-md/6 text-neutral-900">Option 1</label>
-            </div>
-            <div className="flex items-center">
-                <input 
-                    type="radio"
-                    id="option2"
-                    name="group"
-                    value="option2"
-                    className="flex items-center form-radio text-primary-500 hover:ring hover:ring-primary-500 focus:border-gray-100 focus:bg-primary-500 focus:outline-primary-500 focus:ring focus:ring-primary-500 checked:border-gray-100 checked:bg-primary-500 disabled:border-gray-100 disabled:outline-gray-100"
-                    checked={selectedOption === "option2"}
-                    onChange={onValueChange}                
-                >
-                </input>
-                <label htmlFor="option2" className="ml-3 text-md/6 text-neutral-900">Option 2</label>
-            </div>
+            {options.map((option) => (
+                <div key={option.id} className="flex items-center">
+                    <input 
+                        type="radio"
+                        id={option.id}
+                        name="group"
+                        value={option.id}
+                        className="flex items-center form-radio text-primary-500 hover:ring hover:ring-primary-500 focus:border-gray-100 focus:bg-primary-500 focus:outline-primary-500 focus:ring focus:ring-primary-500 checked:border-gray-100 checked:bg-primary-500 disabled:border-gray-100 disabled:outline-gray-100"
+                        checked={selectedOption === option.id}
+                        onChange={onValueChange}
+                    >
+                    </input>
+                    <label htmlFor={option.id} className="ml-3 text-md/6 text-neutral-900">{option.id[0].toUpperCase() + option.id.slice(1)}</label>
+                </div>
+            ))}
         </div>
     )
 }

From 1521c60880625dbd6ad9e3b56f17e7e691a79c4f Mon Sep 17 00:00:00 2001
From: ashleysyg <ashley.syg.lee@gmail.com>
Date: Mon, 9 Dec 2024 16:46:17 -0500
Subject: [PATCH 5/7] refactor: change hardcoded data to prop

---
 app/page.tsx                    |  9 ++++++--
 components/RadioButton.tsx      | 39 ---------------------------------
 components/RadioButtonGroup.tsx | 36 ++++++++++++++++++++++++++++++
 tsconfig.json                   |  3 ++-
 4 files changed, 45 insertions(+), 42 deletions(-)
 delete mode 100644 components/RadioButton.tsx
 create mode 100644 components/RadioButtonGroup.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 26c7d9c..ef7b811 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,16 @@
 import EventSection from "@/components/EventSection"
-import RadioButton from "@/components/RadioButton"
+import RadioButtonGroup from "@/components/RadioButtonGroup"
 
+const group = [
+  { id: 'option 1' },
+  { id: 'option 2' },
+  { id: 'test'}
+]
 export default function Home() {
   return (
     <main className="bg-white flex min-h-screen flex-col items-center justify-between p-0 lg:p-24">
       <EventSection />
-      <RadioButton />
+      <RadioButtonGroup options={ group }></RadioButtonGroup>
     </main>
   )
 }
diff --git a/components/RadioButton.tsx b/components/RadioButton.tsx
deleted file mode 100644
index 81bb058..0000000
--- a/components/RadioButton.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-
-const options = [
-    { id: 'option 1' },
-    { id: 'option 2' }
-]
-
-function RadioButton() {
-
-    const [selectedOption, setSelectedOption] = useState("option 1")  
-
-    function onValueChange(event: any){
-        setSelectedOption(event.target.value)
-    }
-
-    return (
-        <div>
-            {options.map((option) => (
-                <div key={option.id} className="flex items-center">
-                    <input 
-                        type="radio"
-                        id={option.id}
-                        name="group"
-                        value={option.id}
-                        className="flex items-center form-radio text-primary-500 hover:ring hover:ring-primary-500 focus:border-gray-100 focus:bg-primary-500 focus:outline-primary-500 focus:ring focus:ring-primary-500 checked:border-gray-100 checked:bg-primary-500 disabled:border-gray-100 disabled:outline-gray-100"
-                        checked={selectedOption === option.id}
-                        onChange={onValueChange}
-                    >
-                    </input>
-                    <label htmlFor={option.id} className="ml-3 text-md/6 text-neutral-900">{option.id[0].toUpperCase() + option.id.slice(1)}</label>
-                </div>
-            ))}
-        </div>
-    )
-}
-
-export default RadioButton
\ No newline at end of file
diff --git a/components/RadioButtonGroup.tsx b/components/RadioButtonGroup.tsx
new file mode 100644
index 0000000..93e1a4c
--- /dev/null
+++ b/components/RadioButtonGroup.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+// https://tailwindui.com/components/application-ui/forms/radio-groups
+
+import { useState } from 'react'
+
+function RadioButtonGroup({ options }: { options: {id: string}[] }) {
+
+    const [selectedOption, setSelectedOption] = useState(options[0].id)  
+
+    function onValueChange(event: any){
+        setSelectedOption(event.target.value)
+    }
+
+    return (
+        <div>
+            {options.map((option) => (
+                <div key={option.id} className="flex items-center">
+                    <input 
+                        type="radio"
+                        id={option.id}
+                        name="group"
+                        value={option.id}
+                        className="flex items-center relative size-4 appearance-none rounded-full form-radio text-primary-500 border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-primary-500 checked:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 focus-visible:ring focus:ring-primary-500 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden"
+                        checked={selectedOption === option.id}
+                        onChange={onValueChange}
+                    >
+                    </input>
+                    <label htmlFor={option.id} className="ml-3 text-md/6 text-neutral-900">{option.id[0].toUpperCase() + option.id.slice(1)}</label>
+                </div>
+            ))}
+        </div>
+    )
+}
+
+export default RadioButtonGroup
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 590f435..d81d4ee 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,8 @@
       "@/*": [
         "./*"
       ]
-    }
+    },
+    "target": "ES2017"
   },
   "include": [
     "next-env.d.ts",

From f976385e5845080efde0ea6665180cf1a9d9bdcc Mon Sep 17 00:00:00 2001
From: ashleysyg <ashley.syg.lee@gmail.com>
Date: Tue, 10 Dec 2024 10:24:41 -0500
Subject: [PATCH 6/7] fix: radio button group name change

---
 app/page.tsx                                         | 4 ++--
 components/{RadioButtonGroup.tsx => RadioButton.tsx} | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename components/{RadioButtonGroup.tsx => RadioButton.tsx} (92%)

diff --git a/app/page.tsx b/app/page.tsx
index ef7b811..c5192f4 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,5 @@
 import EventSection from "@/components/EventSection"
-import RadioButtonGroup from "@/components/RadioButtonGroup"
+import RadioButton from "@/components/RadioButton"
 
 const group = [
   { id: 'option 1' },
@@ -10,7 +10,7 @@ export default function Home() {
   return (
     <main className="bg-white flex min-h-screen flex-col items-center justify-between p-0 lg:p-24">
       <EventSection />
-      <RadioButtonGroup options={ group }></RadioButtonGroup>
+      <RadioButton options={ group }></RadioButton>
     </main>
   )
 }
diff --git a/components/RadioButtonGroup.tsx b/components/RadioButton.tsx
similarity index 92%
rename from components/RadioButtonGroup.tsx
rename to components/RadioButton.tsx
index 93e1a4c..2e275e0 100644
--- a/components/RadioButtonGroup.tsx
+++ b/components/RadioButton.tsx
@@ -4,7 +4,7 @@
 
 import { useState } from 'react'
 
-function RadioButtonGroup({ options }: { options: {id: string}[] }) {
+export default function RadioButtonGroup({ options }: { options: {id: string}[] }) {
 
     const [selectedOption, setSelectedOption] = useState(options[0].id)  
 
@@ -33,4 +33,4 @@ function RadioButtonGroup({ options }: { options: {id: string}[] }) {
     )
 }
 
-export default RadioButtonGroup
\ No newline at end of file
+// export default RadioButtonGroup
\ No newline at end of file

From 2d10ce7da4f12b9840944350571d3f4ace1d1668 Mon Sep 17 00:00:00 2001
From: ashleysyg <ashley.syg.lee@gmail.com>
Date: Tue, 10 Dec 2024 10:26:20 -0500
Subject: [PATCH 7/7] remove test radio button from home

---
 app/page.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index c5192f4..185d847 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,16 +1,9 @@
 import EventSection from "@/components/EventSection"
-import RadioButton from "@/components/RadioButton"
 
-const group = [
-  { id: 'option 1' },
-  { id: 'option 2' },
-  { id: 'test'}
-]
 export default function Home() {
   return (
     <main className="bg-white flex min-h-screen flex-col items-center justify-between p-0 lg:p-24">
       <EventSection />
-      <RadioButton options={ group }></RadioButton>
     </main>
   )
 }