From 8fa48ef67e54bfd8f557f5c169e181586440b4ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B8=D1=82=D0=B0=D0=BB=D0=B8=D0=B9=20=D0=9B=D0=B0?= =?UTF-8?q?=D0=B2=D1=88=D0=BE=D0=BD=D0=BE=D0=BA?= <114582703+valavshonok@users.noreply.github.com> Date: Mon, 27 Oct 2025 07:35:36 +0300 Subject: [PATCH] drop down for code editor --- src/App.tsx | 4 +- src/assets/icons/input/check-mark.svg | 3 + src/assets/icons/input/chevron-drop-down.svg | 3 + src/assets/icons/input/index.ts | 5 +- .../drop-down-list/DropDownList.tsx | 139 ++++++++++-------- src/styles/index.css | 23 ++- .../problem}/codeeditor/CodeEditor.tsx | 28 ++-- 7 files changed, 121 insertions(+), 84 deletions(-) create mode 100644 src/assets/icons/input/check-mark.svg create mode 100644 src/assets/icons/input/chevron-drop-down.svg rename src/{components => views/problem}/codeeditor/CodeEditor.tsx (86%) diff --git a/src/App.tsx b/src/App.tsx index d02b174..2b2668e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,14 +5,14 @@ import { Route, Routes } from "react-router-dom"; // import { Input } from "./components/input/Input"; // import { Switch } from "./components/switch/Switch"; import Home from "./pages/Home"; -import CodeEditor from "./components/codeeditor/CodeEditor"; +import CodeEditor from "./views/problem/codeeditor/CodeEditor"; function App() { return (
}/> -
}/> + }/> }/> diff --git a/src/assets/icons/input/check-mark.svg b/src/assets/icons/input/check-mark.svg new file mode 100644 index 0000000..471f667 --- /dev/null +++ b/src/assets/icons/input/check-mark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/input/chevron-drop-down.svg b/src/assets/icons/input/chevron-drop-down.svg new file mode 100644 index 0000000..cda1cc2 --- /dev/null +++ b/src/assets/icons/input/chevron-drop-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/input/index.ts b/src/assets/icons/input/index.ts index b9f6e60..6409328 100644 --- a/src/assets/icons/input/index.ts +++ b/src/assets/icons/input/index.ts @@ -2,6 +2,7 @@ import eyeClosed from "./eye-closed.svg" import eyeOpen from "./eye-open.png" import googleLogo from "./google-logo.svg" import upload from "./upload.svg" +import chevroneDropDownList from "./chevron-drop-down.svg" +import checkMark from "./check-mark.svg" - -export {eyeClosed, eyeOpen, googleLogo, upload} \ No newline at end of file +export {eyeClosed, eyeOpen, googleLogo, upload, chevroneDropDownList, checkMark} \ No newline at end of file diff --git a/src/components/drop-down-list/DropDownList.tsx b/src/components/drop-down-list/DropDownList.tsx index e70ccfa..b79097b 100644 --- a/src/components/drop-down-list/DropDownList.tsx +++ b/src/components/drop-down-list/DropDownList.tsx @@ -1,78 +1,87 @@ import React from "react"; import { cn } from "../../lib/cn"; -import { eyeClosed, eyeOpen } from "../../assets/icons/input"; +import { checkMark, chevroneDropDownList } from "../../assets/icons/input"; -interface DwopDownListProps { - name?: string; - type: "text" | "email" | "password" | "first_name"; - error?: string; - disabled?: boolean; - required?: boolean; - label?: string; - placeholder?: string; - className?: string; - onChange: (state: string) => void; - defaultState?: string; - autocomplete?: string; +export interface DropDownListItem{ + text: string; + value: string; } -export const DwopDownList: React.FC = ({ - type = "text", - error = "", -// disabled = false, -// required = false, - label = "", - placeholder = "", - className = "", - onChange, - defaultState = "", - name = "", - autocomplete="", +interface DropDownListProps { + disabled?: boolean; + className?: string; + onChange: (state: string) => void; + defaultState?: DropDownListItem; + items: DropDownListItem[]; +} + +export const DropDownList: React.FC = ({ + // disabled = false, + className = "", + onChange, + defaultState, + items = [{text: "", value: ""}], }) => { - const [value, setValue] = React.useState(defaultState); - const [visible, setVIsible] = React.useState(type != "password"); + if (items.length == 0) + items.push({text: "", value: ""}); - React.useEffect(() => onChange(value), [value]); + const [value, setValue] = React.useState(defaultState != undefined ? defaultState : items[0]); + const [active, setActive] = React.useState(false); + + React.useEffect(() => onChange(value.value), [value]); + + return ( +
+
setActive(!active)}> + {value.text} + +
+ + - return ( -
-
- {label} -
-
- { - setValue(e.target.value); - }} /> - { - type == "password" && - { - setVIsible(!visible); - }}/> - } -
+
+
+
-
- {error} -
+ {items.map((v, i) => +
{ + setValue(v); + setActive(false); + }}> + {v.text} -
- ); + {v.text == value.text && + + } +
+ )} +
+
+
+
+ ); }; diff --git a/src/styles/index.css b/src/styles/index.css index 445e046..ffb7073 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -34,4 +34,25 @@ body { width: 100%; height: 100%; margin: 0; -} \ No newline at end of file +} + + + +/* Общий контейнер полосы прокрутки */ +.thin-scrollbar::-webkit-scrollbar { + width: 4px; /* ширина вертикального */ +} + +/* Трек (фон) */ +.thin-scrollbar::-webkit-scrollbar-track { + background: transparent; +} + +/* Ползунок (thumb) */ +.thin-scrollbar::-webkit-scrollbar-thumb { + background: var(--color-liquid-light); + border-radius: 1000px; + cursor: pointer; +} + + diff --git a/src/components/codeeditor/CodeEditor.tsx b/src/views/problem/codeeditor/CodeEditor.tsx similarity index 86% rename from src/components/codeeditor/CodeEditor.tsx rename to src/views/problem/codeeditor/CodeEditor.tsx index 2987a40..eb53729 100644 --- a/src/components/codeeditor/CodeEditor.tsx +++ b/src/views/problem/codeeditor/CodeEditor.tsx @@ -1,7 +1,8 @@ import React, { useState } from "react"; import Editor from "@monaco-editor/react"; -import { upload } from "../../assets/icons/input"; -import { cn } from "../../lib/cn"; +import { upload } from "../../../assets/icons/input"; +import { cn } from "../../../lib/cn"; +import { DropDownList } from "../../../components/drop-down-list/DropDownList"; const languageMap: Record = { c: "cpp", @@ -16,6 +17,15 @@ const CodeEditor: React.FC = () => { const [code, setCode] = useState(""); const [isDragging, setIsDragging] = useState(false); + + const items = [ + { value: "c", text: "C" }, + { value: "cpp", text: "C++" }, + { value: "java", text: "Java" }, + { value: "python", text: "Python" }, + { value: "pascal", text: "Pascal" }, + ]; + const handleFileUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; @@ -62,22 +72,12 @@ const CodeEditor: React.FC = () => { {/* Панель выбора языка и загрузки файла */}
- + { setLanguage(v) }} />