LiquidCode/LiquidCode_Frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drop down for code editor

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-10-27 07:35:36 +03:00
parent e2a9e68666
commit 8fa48ef67e
7 changed files with 121 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@@ -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 (
<div className="flex w-full h-full ">
<Routes>
<Route path="/home/*" element={<Home/>}/>
<Route path="/editor" element={<div className="box-border p-[50px] w-full h-[800px] relative bg-red-800"><CodeEditor/></div>}/>
<Route path="/editor" element={<div className="box-border p-[50px] w-full h-[800px] relative bg-red-8001"><CodeEditor/></div>}/>
<Route path="*" element={<Home/>}/>
</Routes>

3
src/assets/icons/input/check-mark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.707031 3.70711L3.70787 6.70711L9.70703 0.707108" stroke="#EDF6F7" stroke-linecap="square" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 229 B

3
src/assets/icons/input/chevron-drop-down.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 10L12.0008 14.58L17 10" stroke="#EDF6F7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 222 B

5
src/assets/icons/input/index.ts
View File

@@ -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}
export {eyeClosed, eyeOpen, googleLogo, upload, chevroneDropDownList, checkMark}

139
src/components/drop-down-list/DropDownList.tsx
View File

@@ -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<DwopDownListProps> = ({
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<DropDownListProps> = ({
// disabled = false,
className = "",
onChange,
defaultState,
items = [{text: "", value: ""}],
}) => {
const [value, setValue] = React.useState<string>(defaultState);
const [visible, setVIsible] = React.useState<boolean>(type != "password");
if (items.length == 0)
items.push({text: "", value: ""});
React.useEffect(() => onChange(value), [value]);
const [value, setValue] = React.useState<DropDownListItem>(defaultState != undefined ? defaultState : items[0]);
const [active, setActive] = React.useState<boolean>(false);
React.useEffect(() => onChange(value.value), [value]);
return (
<div className={cn(
"relative",
className
)}>
<div className={cn(" flex items-center h-[40px] rounded-[10px] bg-liquid-lighter px-[16px] w-[180px]",
"text-[18px] font-bold cursor-pointer select-none",
"transitin-all active:scale-95 duration-300"
)}
onClick={() => setActive(!active)}>
{value.text}
</div>
<img src={chevroneDropDownList}
className={cn(" absolute right-[16px] h-[24px] w-[24px] top-[8.5px] rotate-0 transition-all duration-300 pointer-events-none",
active && " rotate-180"
)}/>
return (
<div className={cn(
"relative",
className
)}>
<div className={cn("text-[18px] text-liquid-white font-medium h-[23px] mb-[10px] transition-all",
label == "" && "h-0 mb-0"
)}>
{label}
</div>
<div className="relative">
<input
className={cn(
"bg-liquid-lighter w-full rounded-[10px] outline-none pl-[16px] py-[8px] placeholder:text-liquid-light",
type == "password" ? "h-[40px]" : "h-[36px]"
)}
name={name}
autoComplete={autocomplete}
type={type == "password" ? (visible ? "text" : "password") : type}
placeholder={placeholder}
onChange={(e) => {
setValue(e.target.value);
}} />
{
type == "password" &&
<img src={visible ? eyeOpen : eyeClosed} className="w-[24px] h-[24px] cursor-pointer right-[16px] top-[8px] absolute" onClick={() => {
setVIsible(!visible);
}}/>
}
</div>
<div className={cn(" absolute rounded-[10px] bg-liquid-lighter w-[180px] left-0 top-[48px] z-50 transition-all duration-300",
"grid overflow-hidden",
active ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
)}>
<div className=" overflow-hidden p-[8px]">
<div className={cn(
" overflow-y-scroll max-h-[200px] thin-scrollbar pr-[8px]",
)}>
<div className={cn("text-liquid-red text-[14px] h-[18px] text-right mt-[5px]",
error == "" && "h-0 mt-0"
)}>
{error}
</div>
{items.map((v, i) =>
<div
key={i}
className={cn(
"cursor-pointer h-[36px] relative",
i + 1 != items.length && "border-b-liquid-light border-b-[1px]",
"text-[16px] font-medium cursor-pointer select-none flex items-center pl-[8px]",
)}
onClick={() => {
setValue(v);
setActive(false);
}}>
{v.text}
</div>
);
{v.text == value.text &&
<img src={checkMark} className=" absolute right-[8px]"/>
}
</div>
)}
</div>
</div>
</div>
</div>
);
};

23
src/styles/index.css
View File

@@ -34,4 +34,25 @@ body {
width: 100%;
height: 100%;
margin: 0;
}
}
/* Общий контейнер полосы прокрутки */
.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;
}

28
src/components/codeeditor/CodeEditor.tsx → src/views/problem/codeeditor/CodeEditor.tsx
View File

@@ -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<string, string> = {
c: "cpp",
@@ -16,6 +17,15 @@ const CodeEditor: React.FC = () => {
const [code, setCode] = useState<string>("");
const [isDragging, setIsDragging] = useState<boolean>(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<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
@@ -62,22 +72,12 @@ const CodeEditor: React.FC = () => {
{/* Панель выбора языка и загрузки файла */}
<div className="flex items-center justify-between p-3 ">
<div className="flex items-center gap-[20px]">
<select
value={language}
onChange={(e) => setLanguage(e.target.value)}
className=" rounded-md px-3 py-1"
>
<option value="c">C</option>
<option value="cpp">C++</option>
<option value="java">Java</option>
<option value="python">Python</option>
<option value="pascal">Pascal</option>
</select>
<DropDownList items={items} onChange={(v) => { setLanguage(v) }} />
<label
className={cn("h-[40px] w-[250px] rounded-[10px] px-[16px] relative flex items-center cursor-pointer transition-all bg-liquid-lighter outline-dashed outline-[2px] outline-transparent active:scale-[95%]",
isDragging && "outline-blue-500 "
)}
)}
onDrop={handleDrop}
onDragOver={handleDragOver}
onDragEnter={handleDragEnter}