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,6 +1,7 @@
 import React from "react";
 import { cn } from "../../lib/cn";
 import { checkMark, chevroneDropDownList } from "../../assets/icons/input";
+import { useClickOutside } from "../../hooks/useClickOutside";
 
 export interface DropDownListItem {
     text: string;
@@ -30,16 +31,28 @@ export const DropDownList: React.FC<DropDownListProps> = ({
 
     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>
@@ -50,7 +63,8 @@ export const DropDownList: React.FC<DropDownListProps> = ({
                 )} />
 
 
-            <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",
                 )}>
@@ -63,9 +77,11 @@ export const DropDownList: React.FC<DropDownListProps> = ({
                             <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);

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) }} />