Refactor file loading and code retrieval logic

app/app/files/edit/page.tsx

@@ -3,6 +3,9 @@
 import React, { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import TextEditor from "@/components/TextEditor";
+import LanguageSelector from "@/components/TextEditor/LanguageSelector";
+import { languages } from "@/components/TextEditor/LanguageSelector/languages";
+
 import BreadCrumbs from "@/components/BreadCrumbs";
 import ServerIcon from "@/components/Icons/Server";
 import FolderIcon from "@/components/Icons/Folder";
@@ -14,6 +17,11 @@ function Page() {
   const serverId = searchParams.get("serverid") || "";
   const path = searchParams.get("path") || "";
   const [code, setCode] = useState("");
+  const [language, setLanguage] = useState("plaintext");
+
+  const setLanguageHandler = (event: any) => {
+    setLanguage(event.target.value);
+  };
 
   useEffect(
     function () {
@@ -36,7 +44,7 @@ function Page() {
 
   return (
     <>
-      <div className="flex mb-4">
+      <div className="flex mb-4 justify-between">
         <BreadCrumbs>
           <li>
             <div className="mr-2">
@@ -72,9 +80,14 @@ function Page() {
               );
             })}
         </BreadCrumbs>
-        <button className="ml-auto btn btn-accent">Save</button>
+        <div className="flex justify-end gap-4">
+          <LanguageSelector onChange={setLanguageHandler} />
+          <button className="ml-auto btn btn-base-100 text-success">
+            Save
+          </button>
+        </div>
       </div>
-      <TextEditor code={code} />
+      <TextEditor code={code} language={language} />
     </>
   );
 }