Merge pull request #177 from Jaewoook/feature/settings-app

Prepare settings app basic layout

app/components/Select/Select.css.ts

@@ -0,0 +1,51 @@
+import { style, styleVariants } from "@vanilla-extract/css";
+
+export const container = style({
+  position: "relative",
+});
+
+export const selected = style({
+  display: "flex",
+  alignItems: "center",
+  fontSize: 14,
+  padding: "4px 6px",
+  borderRadius: 6,
+  userSelect: "none",
+  transition: "all .15s ease-in-out",
+  ":hover": {
+    backgroundColor: "rgba(104, 100, 100, 1)",
+  },
+  ":after": {
+    backgroundColor: "rgb(104, 100, 100)",
+  },
+  selectors: {
+    "&:hover::after": {
+      backgroundColor: "rgb(22, 100, 220)",
+    },
+  },
+});
+
+export const selectedExpandIndicator = style({
+  marginLeft: 4,
+});
+
+export const baseOptions = style({
+  position: "absolute",
+  top: "calc(100% + 4px)",
+  left: 0,
+  right: 0,
+  selectors: {
+    "&:nth-child(n+1)": {
+      marginTop: 4,
+    },
+  },
+});
+
+export const options = styleVariants({
+  closed: [baseOptions, { display: "none" }],
+  opened: [baseOptions],
+});
+
+export const option = style({
+  fontSize: 14,
+});

app/components/Select/index.tsx

@@ -0,0 +1,45 @@
+import { useCallback, useState } from "react";
+import type { SelectHTMLAttributes } from "react";
+import { PiCaretUpDown } from "react-icons/pi";
+
+import * as css from "./Select.css";
+
+export type Options = {
+  label: string;
+  key: string | number;
+}[];
+
+interface Props {
+  options: Options;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const Select = (props: Props) => {
+  const { value, options, onChange } = props;
+  const [optionOpened, setOptionsOpen] = useState(false);
+  const handleOptionsClick = useCallback(() => {
+    setOptionsOpen((prev) => !prev);
+  }, []);
+
+  return (
+    <div className={css.container}>
+      <select style={{ display: "none" }}>
+        {options.map((option) => (
+          <option key={option.key}>{option.label}</option>
+        ))}
+      </select>
+      <p className={css.selected} onClick={handleOptionsClick}>
+        {value}
+        <PiCaretUpDown className={css.selectedExpandIndicator} />
+      </p>
+      <div className={optionOpened ? css.options.opened : css.options.closed}>
+        {options.map((option) => (
+          <p key={option.key} className={css.option}>
+            {option.label}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+};

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)"
 });

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>
   );

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"
   }
 }

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"