updates

Author: JustDeveloper1

lib/builder.js

@@ -29,6 +29,7 @@ import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
 import useMonacoVersion, { defaultMonacoVersion } from './monacoversion.js';
+import Select from './ui/select.js';
 
 const Builder = () => {
     const translate = useTranslations();
@@ -38,11 +39,13 @@ const Builder = () => {
 
     return (
         <>
-            <div>
-                <span>{translate.raw('builder-file')}</span>
+            <div className='builder'>
+                <div><span>{translate.raw('builder-file')}</span><input id='builder-filepath' placeholder='index' /></div>
+                <span>{translate.raw('builder-filecontent')}</span>
                 <div id="monaco" />
+                <div><span>{translate.raw('builder-filetype')}</span><Select placeholder={translate.raw('builder-language')} items={[['JavaScript', '0']]} /></div>
             </div>
-            <Script id="monaco-editor">
+            <Script id="rewrite-fetch">
                 {`
                     var require = { paths: { 'vs': 'third-party/monaco-editor/package/min/vs' } };
 
@@ -90,6 +93,12 @@ const Builder = () => {
             <Script id="builder">
                 {`
                     var h_div = document.getElementById('monaco');
+                    const defwidth = window.innerWidth;
+                    window.addEventListener('resize', () => {
+                        if (defwidth < window.innerWidth) {
+                            window.location.reload();
+                        }
+                    });
                     var editor = monaco.editor.create(h_div, {
                         value: [
                             'function x() {',

lib/ui/select.js

@@ -0,0 +1,43 @@
+/*
+
+MIT License
+
+Copyright (c) 2025 JustStudio <https://juststudio.is-a.dev/>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+import { useEffect, useState } from 'react';
+
+const Select = ({
+    placeholder,
+    items,
+    variable
+}) => {
+    const [hover, setHover] = useState(false);
+    const [id, setId] = useState(0);
+
+    return (
+        <>
+            <button onMouseEnter={setHover(true)} onMouseLeave={setHover(false)} title={placeholder} type='button'><img src={items[id][1]} alt={items[id][0]} />{items[id][0]}</button>
+            {hover? <div></div> : <></>}
+        </>
+    )
+}

locales/en.json

@@ -1,5 +1,6 @@
 {
     "builder-file": "File",
     "builder-filecontent": "Content",
-    "builder-filetype": "Type"
+    "builder-filetype": "Type",
+    "builder-language": "Language"
 }

locales/ru.json

@@ -1,5 +1,6 @@
 {
     "builder-file": "Файл",
     "builder-filecontent": "Содержание",
-    "builder-filetype": "Тип"
+    "builder-filetype": "Тип",
+    "builder-language": "Язык"
 }

pages/index.js

@@ -37,7 +37,7 @@ const Home = () => {
   return (
     <>
       <h1 className='bg lz cw demo agt'>Just an Ultimate Site Tool</h1>
-      <Builder className='builder' />
+      <Builder />
     </>
   );
 };

pages/style.css

@@ -116,4 +116,6 @@ h1 {
 
 #monaco {
     height: 420px;
+    left: 50%;
+    translate: -50% 0%;
 }