Add editor lang

src/App.tsx

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

src/components/drop-down-list/DropDownList.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { cn } from "../../lib/cn";
 import { checkMark, chevroneDropDownList } from "../../assets/icons/input";
+import { useClickOutside } from "../../hooks/useClickOutside";
 
-export interface DropDownListItem{
+export interface DropDownListItem {
     text: string;
     value: string;
 }
@@ -20,26 +21,38 @@ export const DropDownList: React.FC<DropDownListProps> = ({
     className = "",
     onChange,
     defaultState,
-    items = [{text: "", value: ""}],
+    items = [{ text: "", value: "" }],
 }) => {
     if (items.length == 0)
-        items.push({text: "", value: ""});
+        items.push({ text: "", 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]);
 
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    useClickOutside(ref, () => {
+        setActive(false);
+    });
+
+
     return (
         <div className={cn(
             "relative",
             className
-        )}>
+        )}
+            ref={ref}
+        >
             <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)}>
+                onClick={() => {
+                    setActive(!active);
+                }
+                }>
                 {value.text}
 
             </div>
@@ -47,25 +60,28 @@ export const DropDownList: React.FC<DropDownListProps> = ({
             <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"
-            )}/>
+                )} />
 
 
-            <div className={cn(" absolute rounded-[10px] bg-liquid-lighter w-[180px] left-0 top-[48px] z-50 transition-all duration-300",
+            <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]",
+                        " overflow-y-scroll max-h-[200px] thin-scrollbar pr-[8px] ",
                     )}>
 
                         {items.map((v, i) =>
                             <div
                                 key={i}
                                 className={cn(
-                                    "cursor-pointer  h-[36px] relative",
+                                    "cursor-pointer  h-[36px] relative transition-all duration-300",
                                     i + 1 != items.length && "border-b-liquid-light border-b-[1px]",
                                     "text-[16px] font-medium cursor-pointer select-none flex items-center pl-[8px]",
+                                    "hover:bg-liquid-background",
+                                    "first:rounded-t-[6px] last:rounded-b-[6px]"
                                 )}
                                 onClick={() => {
                                     setValue(v);
@@ -74,7 +90,7 @@ export const DropDownList: React.FC<DropDownListProps> = ({
                                 {v.text}
 
                                 {v.text == value.text &&
-                                <img src={checkMark} className=" absolute right-[8px]"/>
+                                    <img src={checkMark} className=" absolute right-[8px]" />
                                 }
                             </div>
                         )}

src/hooks/useClickOutside.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+export const useClickOutside = (ref: React.RefObject<any>, onClickOutside: () => void) => {
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    }
+  }, [ref, onClickOutside]);
+}

src/views/problem/codeeditor/CodeEditor.tsx

@@ -10,6 +10,8 @@ const languageMap: Record<string, string> = {
   java: "java",
   python: "python",
   pascal: "pascal",
+  kotlin: "kotlin",
+  csharp: "csharp"
 };
 
 const CodeEditor: React.FC = () => {
@@ -24,6 +26,8 @@ const CodeEditor: React.FC = () => {
     { value: "java", text: "Java" },
     { value: "python", text: "Python" },  
     { value: "pascal", text: "Pascal" },
+    { value: "kotlin", text: "Kotlin" },
+    { value: "csharp", text: "C#" },
   ];
 
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -70,7 +74,7 @@ const CodeEditor: React.FC = () => {
   return (
     <div className="flex flex-col w-full h-full">
       {/* Панель выбора языка и загрузки файла */}
-      <div className="flex items-center justify-between p-3 ">
+      <div className="flex items-center justify-between py-3 ">
         <div className="flex items-center gap-[20px]">
           <DropDownList items={items} onChange={(v) => { setLanguage(v) }} />