diff --git a/app/components/Select/Select.css.ts b/app/components/Select/Select.css.ts
new file mode 100644
index 0000000..02adcf8
--- /dev/null
+++ b/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,
+});
diff --git a/app/components/Select/index.tsx b/app/components/Select/index.tsx
new file mode 100644
index 0000000..36bc46e
--- /dev/null
+++ b/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 (
+
+
+
+ {value}
+
+
+
+ {options.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+ );
+};
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) => {
return (
{label}
- {children}
+
{children}
);
};
+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 (
+
+
+
- Auto / Light / Dark
+
+
+
+
+
+
+
Some features have not been implemented yet.
);
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"