From 1d2df695070eb58791fafd43c7d830d760b69d03 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sat, 3 Aug 2024 11:17:42 +0900
Subject: [PATCH] [Update] Config Window: Add Radio button component.

---
 .../setting_box/Appearance/Appearance.jsx     |  5 ++-
 .../setting_box/appearance/Appearance.jsx     |  5 ++-
 .../components/radio_button/RadioButton.jsx   | 30 ++++++++++++++
 .../radio_button/RadioButton.module.scss      | 41 +++++++++++++++++++
 .../setting_box/components/useSettingBox.jsx  | 14 ++++++-
 5 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/radio_button/RadioButton.jsx
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/radio_button/RadioButton.module.scss

diff --git a/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx b/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
index 51b749d2..2a0c6678 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
@@ -10,6 +10,7 @@ export const Appearance = () => {
         SwitchboxContainer,
         EntryContainer,
         ThresholdContainer,
+        RadioButtonContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -32,7 +33,9 @@ export const Appearance = () => {
             <CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
             <SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
 
-            <EntryContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
+            <RadioButtonContainer label="Transparent" desc="description" switchbox_id="radiobutton_id_1"/>
+
+            <EntryContainer label="Transparent" desc="description" switchbox_id="entry_id_1"/>
 
             <ThresholdContainer label="Transparent" desc="description" id="mic_threshold"  min="0" max="3000"/>
         </>
diff --git a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
index 51b749d2..2a0c6678 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
@@ -10,6 +10,7 @@ export const Appearance = () => {
         SwitchboxContainer,
         EntryContainer,
         ThresholdContainer,
+        RadioButtonContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -32,7 +33,9 @@ export const Appearance = () => {
             <CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
             <SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
 
-            <EntryContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
+            <RadioButtonContainer label="Transparent" desc="description" switchbox_id="radiobutton_id_1"/>
+
+            <EntryContainer label="Transparent" desc="description" switchbox_id="entry_id_1"/>
 
             <ThresholdContainer label="Transparent" desc="description" id="mic_threshold"  min="0" max="3000"/>
         </>
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/radio_button/RadioButton.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/radio_button/RadioButton.jsx
new file mode 100644
index 00000000..3a409752
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/radio_button/RadioButton.jsx
@@ -0,0 +1,30 @@
+import clsx from "clsx";
+import { useState } from "react";
+import styles from "./RadioButton.module.scss";
+
+export const RadioButton = (props) => {
+    const options = [
+        { radio_button_id: "1", label: "AAAAAAAA" },
+        { radio_button_id: "2", label: "BBBBBB" }
+    ];
+
+    const changeValue = (e) => {
+        console.log(e.target.value);
+    };
+
+    return (
+        <div className={styles.container}>
+            {options.map((option) => (
+                <label key={option.radio_button_id} className={styles.radio_button_wrapper}>
+                    <input
+                        type="radio"
+                        name="radio"
+                        value={option.radio_button_id}
+                        onChange={changeValue}
+                    />
+                    <p className={styles.radio_button_label}>{option.label}</p>
+                </label>
+            ))}
+        </div>
+    );
+};
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/radio_button/RadioButton.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/radio_button/RadioButton.module.scss
new file mode 100644
index 00000000..ba631f17
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/radio_button/RadioButton.module.scss
@@ -0,0 +1,41 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.4rem;
+}
+
+.radio_button_wrapper {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    gap: 1rem;
+    padding: 0.6rem 0.8rem;
+    border-radius: 0.4rem;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_850_color);
+    }
+}
+
+input[type="radio"] {
+    appearance: none;
+    margin: 0;
+    width: 2.4rem;
+    height: 2.4rem;
+    border: 0.3rem solid var(--dark_600_color);
+    border-radius: 50%;
+    transition: border-color .1s ease, border-width .1s ease;
+    cursor: inherit;
+    &:checked {
+        border-color: var(--primary_400_color);
+        border-width: 0.6rem;
+    }
+}
+
+.radio_button_label {
+    font-size: 1.4rem;
+    font-weight: 300;
+}
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
index acd6a1b7..218ced2f 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
@@ -1,4 +1,6 @@
 import styles from "./useSettingBox.module.scss";
+import { useIsOpenedDropdownMenu } from "@store";
+
 import { LabelComponent } from "./label_component/LabelComponent";
 import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 import { Slider } from "./slider/Slider";
@@ -6,7 +8,7 @@ import { Checkbox } from "./checkbox/Checkbox";
 import { Switchbox } from "./switchbox/Switchbox";
 import { Entry } from "./entry/Entry";
 import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
-import { useIsOpenedDropdownMenu } from "@store";
+import { RadioButton } from "./radio_button/RadioButton";
 
 export const useSettingBox = () => {
     const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -60,6 +62,15 @@ export const useSettingBox = () => {
         );
     };
 
+    const RadioButtonContainer = (props) => {
+        return (
+            <div className={styles.container}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <RadioButton {...props}/>
+            </div>
+        );
+    };
+
     const ThresholdContainer = (props) => {
         return (
             <div className={styles.threshold_container}>
@@ -81,5 +92,6 @@ export const useSettingBox = () => {
         SwitchboxContainer,
         EntryContainer,
         ThresholdContainer,
+        RadioButtonContainer,
     };
 };
\ No newline at end of file