From ef94d755c6c93a948ae2367b097186de5ff93555 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 2 Aug 2024 10:33:29 +0900
Subject: [PATCH] [Update] Config Window: Add Entry component.

---
 .../setting_box/Appearance/Appearance.jsx     |  3 +++
 .../setting_box/appearance/Appearance.jsx     |  3 +++
 .../setting_box/components/entry/Entry.jsx    | 22 +++++++++++++++++++
 .../components/entry/Entry.module.scss        | 15 +++++++++++++
 .../setting_box/components/useSettingBox.jsx  | 11 ++++++++++
 5 files changed, 54 insertions(+)
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.jsx
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.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 465894cc..80c26bb1 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
@@ -8,6 +8,7 @@ export const Appearance = () => {
         SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
+        EntryContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -29,6 +30,8 @@ export const Appearance = () => {
             <SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
             <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"/>
         </>
     );
 };
\ No newline at end of file
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 465894cc..80c26bb1 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
@@ -8,6 +8,7 @@ export const Appearance = () => {
         SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
+        EntryContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -29,6 +30,8 @@ export const Appearance = () => {
             <SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
             <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"/>
         </>
     );
 };
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.jsx
new file mode 100644
index 00000000..b8ce35f0
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.jsx
@@ -0,0 +1,22 @@
+import { useState } from "react";
+import styles from "./Entry.module.scss";
+
+export const Entry = (props) => {
+    const [input_value, setInputValue] = useState();
+
+    const onChangeFunction = (e) => {
+        setInputValue(e.currentTarget.value);
+    };
+
+
+    return (
+        <div className={styles.entry_container}>
+            <div className={styles.entry_wrapper}>
+                <input
+                    className={styles.entry_input_area}
+                    onChange={onChangeFunction}
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.module.scss
new file mode 100644
index 00000000..9ffa70c2
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.module.scss
@@ -0,0 +1,15 @@
+.entry_wrapper {
+    width: 10rem;
+    height: 100%;
+    padding: 0.6rem;
+    background-color: var(--dark_875_color);
+    border: 0.1rem solid var(--dark_750_color);
+    border-radius: 0.4rem;
+}
+
+.entry_input_area {
+    width: 100%;
+    height: 100%;
+    font-size: 1.4rem;
+    resize: none;
+}
\ 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 27196c2b..c492ad5b 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
@@ -4,6 +4,7 @@ import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 import { Slider } from "./slider/Slider";
 import { Checkbox } from "./checkbox/Checkbox";
 import { Switchbox } from "./switchbox/Switchbox";
+import { Entry } from "./entry/Entry";
 import { useIsOpenedDropdownMenu } from "@store";
 
 export const useSettingBox = () => {
@@ -49,10 +50,20 @@ export const useSettingBox = () => {
         );
     };
 
+    const EntryContainer = (props) => {
+        return (
+            <div className={styles.container}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <Entry {...props}/>
+            </div>
+        );
+    };
+
     return {
         DropdownMenuContainer,
         SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
+        EntryContainer,
     };
 };
\ No newline at end of file