From bc05afb8c9ef0db758f66957dbbb0fb7fdef2093 Mon Sep 17 00:00:00 2001
From: Jaewook Ahn <dev.jaewook@gmail.com>
Date: Sat, 6 Apr 2024 21:05:38 +0900
Subject: [PATCH] feat(app): add settings app items

- add about menu
- add color mode menu
- add blur effect menu
- add language menu
- remove react-draggable deps
---
 app/components/Settings/Settings.css.ts | 20 +++++++++--
 app/components/Settings/index.tsx       | 46 +++++++++++++++++++++++--
 package.json                            |  1 -
 yarn.lock                               | 13 -------
 4 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/app/components/Settings/Settings.css.ts b/app/components/Settings/Settings.css.ts
index 1940c8f..c1d2c6b 100644
--- a/app/components/Settings/Settings.css.ts
+++ b/app/components/Settings/Settings.css.ts
@@ -1,20 +1,36 @@
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
-  padding: "16px 12px",
+  padding: "14px 20px",
 });
 
 export const list = style({
-  padding: "12px 8px",
+  padding: "0 8px",
   borderRadius: 4,
   border: "1px solid #5c5c5c",
 });
 
 export const row = style({
   display: "flex",
+  alignItems: "center",
+  minHeight: 48,
+  padding: "0 4px",
+  fontSize: 14,
+  selectors: {
+    "&:nth-child(n+2)": {
+      borderTop: "1px solid rgb(63, 58, 58)",
+    },
+  },
 });
 
 export const rowLabel = style({
   fontSize: 14,
   color: "#fff",
+  marginRight: "auto",
+});
+
+export const infoText = style({
+  marginTop: 16,
+  fontSize: 12,
+  color: "rgba(255, 255, 255, 0.6)"
 });
diff --git a/app/components/Settings/index.tsx b/app/components/Settings/index.tsx
index f085385..3c5abc6 100644
--- a/app/components/Settings/index.tsx
+++ b/app/components/Settings/index.tsx
@@ -1,4 +1,9 @@
+"use client";
+import { useCallback, useState } from "react";
 import type { PropsWithChildren } from "react";
+import { PiCaretRight } from "react-icons/pi";
+
+import { Select, Options } from "../Select";
 import { Window } from "../Window";
 import * as css from "./Settings.css";
 
@@ -11,20 +16,57 @@ const Row = (props: PropsWithChildren<RowProps>) => {
   return (
     <div className={css.row}>
       <p className={css.rowLabel}>{label}</p>
-      {children}
+      <div>{children}</div>
     </div>
   );
 };
 
+const COLOR_MODE_OPTIONS: Options = [
+  { key: "color-mode-option-light", label: "Light" },
+  { key: "color-mode-option-dark", label: "Dark" },
+];
+
+const BLUR_EFFECT_OPTIONS: Options = [
+  { key: "blur-on", label: "On" },
+  { key: "blur-off", label: "Off" },
+];
+
+const LANGUAGE_OPTIONS: Options = [
+  { key: "lang-en", label: "English" },
+  { key: "lang-ko", label: "한국어" },
+];
+
 export const Settings = () => {
+  const [colorMode, setColorMode] = useState("Dark");
+  const [blurEnabled, setBlurEnabled] = useState("Off");
+  const [language, setLanguage] = useState("English");
+
+  const handleColorModeChange = useCallback((value: string) => {
+    setColorMode(value);
+  }, []);
+
+  const handleLanguageChange = useCallback((value: string) => {
+    setLanguage(value);
+  }, []);
+
   return (
     <Window title="Settings" x="70%" y="40%" maximizeDisabled>
       <div className={css.container}>
         <div className={css.list}>
+          <Row label="About">
+            <PiCaretRight />
+          </Row>
           <Row label="Color mode">
-            Auto / Light / Dark
+            <Select options={COLOR_MODE_OPTIONS} value={colorMode} onChange={handleColorModeChange} />
+          </Row>
+          <Row label="Enable Blur Effect">
+            <Select options={BLUR_EFFECT_OPTIONS} value={blurEnabled} onChange={() => {}} />
+          </Row>
+          <Row label="Language">
+            <Select options={LANGUAGE_OPTIONS} value={language} onChange={handleLanguageChange} />
           </Row>
         </div>
+        <p className={css.infoText}>Some features have not been implemented yet.</p>
       </div>
     </Window>
   );
diff --git a/package.json b/package.json
index 573e5e8..39b7700 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
     "pdfium.js": "^0.2.1-rc.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.4",
     "react-icons": "^4.10.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 67b2047..3c90071 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1301,11 +1301,6 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
-clsx@^1.1.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
-
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3296,14 +3291,6 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-draggable@^4.4.4:
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c"
-  integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==
-  dependencies:
-    clsx "^1.1.1"
-    prop-types "^15.8.1"
-
 react-icons@^4.10.1:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.10.1.tgz#3f3b5eec1f63c1796f6a26174a1091ca6437a500"