From 0a2d189309cd4d976aa35d0abf64cd46e2a281ae Mon Sep 17 00:00:00 2001
From: SkywardSyntax <87048477+SkywardSyntax@users.noreply.github.com>
Date: Tue, 20 Aug 2024 22:00:08 -0500
Subject: [PATCH] Add toggle switch and toggle button options components

* **ToggleSwitch.module.css**: Add styles for the toggle switch component
* **ToggleSwitch.tsx**: Add a new toggle switch component and use the styles from `ToggleSwitch.module.css`
* **ToggleButtonOptions.module.css**: Add styles for the toggle button options component
* **ToggleButtonOptions.tsx**: Add a new toggle button options component and use the styles from `ToggleButtonOptions.module.css`
* **index.tsx**: Import and use the new toggle switch and toggle button options components
---
 components/ToggleButtonOptions.module.css | 15 ++++++++
 components/ToggleButtonOptions.tsx        | 34 ++++++++++++++++++
 components/ToggleSwitch.module.css        | 44 +++++++++++++++++++++++
 components/ToggleSwitch.tsx               | 18 ++++++++++
 pages/index.tsx                           | 36 +++++++++++++++++++
 5 files changed, 147 insertions(+)
 create mode 100644 components/ToggleButtonOptions.module.css
 create mode 100644 components/ToggleButtonOptions.tsx
 create mode 100644 components/ToggleSwitch.module.css
 create mode 100644 components/ToggleSwitch.tsx

diff --git a/components/ToggleButtonOptions.module.css b/components/ToggleButtonOptions.module.css
new file mode 100644
index 0000000..fe9833f
--- /dev/null
+++ b/components/ToggleButtonOptions.module.css
@@ -0,0 +1,15 @@
+.toggleButtonOptions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.toggleButton {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.toggleButton input {
+  margin-right: 10px;
+}
diff --git a/components/ToggleButtonOptions.tsx b/components/ToggleButtonOptions.tsx
new file mode 100644
index 0000000..14823d8
--- /dev/null
+++ b/components/ToggleButtonOptions.tsx
@@ -0,0 +1,34 @@
+import { FC, ChangeEvent } from 'react';
+import styles from './ToggleButtonOptions.module.css';
+
+interface ToggleButtonOption {
+  label: string;
+  value: string;
+}
+
+interface ToggleButtonOptionsProps {
+  options: ToggleButtonOption[];
+  selectedValue: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const ToggleButtonOptions: FC<ToggleButtonOptionsProps> = ({ options, selectedValue, onChange }) => {
+  return (
+    <div className={styles.toggleButtonOptions}>
+      {options.map((option) => (
+        <label key={option.value} className={styles.toggleButton}>
+          <input
+            type="radio"
+            name="toggleButtonOption"
+            value={option.value}
+            checked={selectedValue === option.value}
+            onChange={onChange}
+          />
+          {option.label}
+        </label>
+      ))}
+    </div>
+  );
+};
+
+export default ToggleButtonOptions;
diff --git a/components/ToggleSwitch.module.css b/components/ToggleSwitch.module.css
new file mode 100644
index 0000000..26b5736
--- /dev/null
+++ b/components/ToggleSwitch.module.css
@@ -0,0 +1,44 @@
+.toggleSwitch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.toggleSwitch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px);
+}
diff --git a/components/ToggleSwitch.tsx b/components/ToggleSwitch.tsx
new file mode 100644
index 0000000..82f6e4f
--- /dev/null
+++ b/components/ToggleSwitch.tsx
@@ -0,0 +1,18 @@
+import { FC, ChangeEvent } from 'react';
+import styles from './ToggleSwitch.module.css';
+
+interface ToggleSwitchProps {
+  checked: boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const ToggleSwitch: FC<ToggleSwitchProps> = ({ checked, onChange }) => {
+  return (
+    <label className={styles.toggleSwitch}>
+      <input type="checkbox" checked={checked} onChange={onChange} />
+      <span className={styles.slider}></span>
+    </label>
+  );
+};
+
+export default ToggleSwitch;
diff --git a/pages/index.tsx b/pages/index.tsx
index 871866e..bbdda8b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,6 +2,8 @@ import { useCallback, useEffect, useState, FC } from 'react'
 import Button from '../components/Button'
 import ClickCount from '../components/ClickCount'
 import GlassChip from '../components/GlassChip'
+import ToggleSwitch from '../components/ToggleSwitch'
+import ToggleButtonOptions from '../components/ToggleButtonOptions'
 import styles from '../styles/home.module.css'
 import * as THREE from 'three';
 
@@ -100,6 +102,22 @@ const Home: FC = () => {
     };
   }, []);
 
+  const [toggleSwitchChecked, setToggleSwitchChecked] = useState(false);
+  const handleToggleSwitchChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setToggleSwitchChecked(event.target.checked);
+  };
+
+  const [selectedToggleButtonOption, setSelectedToggleButtonOption] = useState('option1');
+  const handleToggleButtonOptionChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSelectedToggleButtonOption(event.target.value);
+  };
+
+  const toggleButtonOptions = [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+  ];
+
   return (
     <main className={styles.main}>
       <h1>Fast Refresh Demo</h1>
@@ -144,6 +162,24 @@ const Home: FC = () => {
         </div>
       </GlassChip>
       <hr className={styles.hr} />
+      <GlassChip>
+        <div>
+          <p>Toggle Switch:</p>
+          <ToggleSwitch checked={toggleSwitchChecked} onChange={handleToggleSwitchChange} />
+        </div>
+      </GlassChip>
+      <hr className={styles.hr} />
+      <GlassChip>
+        <div>
+          <p>Toggle Button Options:</p>
+          <ToggleButtonOptions
+            options={toggleButtonOptions}
+            selectedValue={selectedToggleButtonOption}
+            onChange={handleToggleButtonOptionChange}
+          />
+        </div>
+      </GlassChip>
+      <hr className={styles.hr} />
     </main>
   )
 }