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 + {}} /> + + +