From 67248bfa09bec8b87e57c995c2dcc3f871a8cbbd Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 6 Aug 2024 17:01:56 +0900
Subject: [PATCH] [Update] Config Window: Add ActionButton component.

---
 src-ui/assets/folder_open.svg                      |  1 +
 .../setting_box/appearance/Appearance.jsx          |  4 ++++
 .../components/action_button/ActionButton.jsx      | 11 +++++++++++
 .../action_button/ActionButton.module.scss         | 14 ++++++++++++++
 .../setting_box/components/useSettingBox.jsx       | 13 +++++++++++++
 5 files changed, 43 insertions(+)
 create mode 100644 src-ui/assets/folder_open.svg
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.jsx
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.module.scss

diff --git a/src-ui/assets/folder_open.svg b/src-ui/assets/folder_open.svg
new file mode 100644
index 00000000..d1917059
--- /dev/null
+++ b/src-ui/assets/folder_open.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-rule="evenodd" clip-rule="evenodd"><path d="M0 2h8l3 3h10v4h3l-4 13h-20v-20zm22.646 8h-17.907l-3.385 11h17.907l3.385-11zm-2.646-1v-3h-9.414l-3-3h-6.586v15.75l3-9.75h16z"/></svg>
\ 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 0e5d4f84..8913d80c 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
@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import FolderOpenSvg from "@images/folder_open.svg?react";
 
 import { useSettingBox } from "../components/useSettingBox";
 import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
@@ -16,6 +17,7 @@ export const Appearance = () => {
         RadioButtonContainer,
         DeeplAuthKeyContainer,
         MessageFormatContainer,
+        ActionButtonContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -56,6 +58,8 @@ export const Appearance = () => {
 
             <MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} id="received_with_t"/>
 
+            <ActionButtonContainer label={t(`config_window.open_config_filepath.label`)} IconComponent={FolderOpenSvg} OnclickFunction={()=>{}}/>
+
         </>
     );
 };
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.jsx
new file mode 100644
index 00000000..09aab899
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.jsx
@@ -0,0 +1,11 @@
+import styles from "./ActionButton.module.scss";
+
+export const ActionButton = ({IconComponent, OnclickFunction}) => {
+    return (
+        <div className={styles.container}>
+            <button className={styles.button_wrapper} onClick={OnclickFunction}>
+                <IconComponent className={styles.button_svg}/>
+            </button>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.module.scss
new file mode 100644
index 00000000..0685922d
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.module.scss
@@ -0,0 +1,14 @@
+.button_wrapper {
+    padding: 1.6rem;
+    border-radius: 0.4rem;
+    &:hover {
+        background-color: var(--dark_825_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.button_svg {
+    width: 2.4rem;
+}
\ 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 6f78efcd..c6b4e409 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
@@ -12,6 +12,7 @@ import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
 import { RadioButton } from "./radio_button/RadioButton";
 import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
 import { MessageFormat } from "./message_format/MessageFormat";
+import { ActionButton } from "./action_button/ActionButton";
 
 export const useSettingBox = () => {
     const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -114,6 +115,17 @@ export const useSettingBox = () => {
         );
     };
 
+
+    const ActionButtonContainer = (props) => {
+        return (
+            <div className={styles.container}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <ActionButton {...props}/>
+            </div>
+        );
+    };
+
+
     return {
         DropdownMenuContainer,
         SliderContainer,
@@ -124,5 +136,6 @@ export const useSettingBox = () => {
         RadioButtonContainer,
         DeeplAuthKeyContainer,
         MessageFormatContainer,
+        ActionButtonContainer,
     };
 };
\ No newline at end of file