feat: settings view new frontend

frontend/.env.sample

@@ -0,0 +1 @@
+API_URL=https://example.com

frontend/astro.config.mjs

@@ -1,14 +1,17 @@
 import { defineConfig } from "astro/config";
 import node from "@astrojs/node";
 
+import react from "@astrojs/react";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://jojo.schibsted.com",
   output: "server",
   adapter: node({
-    mode: "standalone",
+    mode: "standalone"
   }),
   prefetch: {
-    prefetchAll: true,
+    prefetchAll: true
   },
-});
+  integrations: [react()]
+});

frontend/package.json

@@ -12,7 +12,14 @@
   "dependencies": {
     "@astrojs/check": "^0.3.3",
     "@astrojs/node": "^7.0.2",
+    "@astrojs/react": "^3.0.10",
+    "@nanostores/react": "^0.7.2",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
     "astro": "^4.0.7",
+    "nanostores": "^0.10.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.3.3",
     "zod": "^3.22.4"
   }

frontend/src/components/Modal/LanguageSettings.tsx

@@ -0,0 +1,59 @@
+import { useStore } from "@nanostores/react";
+import { $modelSettings, cancelUpload, setSelectedLanguage } from "../../stores/FileStore";
+
+const LanguageSettings = ({
+  languages,
+  setSettingTab,
+  files,
+}: {
+    languages: string[];
+    setSettingTab: (tab: number) => void;
+    files: { files: File[] };
+
+}) => {
+    const modelSettings = useStore($modelSettings);
+
+    const { selectedLanguage } = modelSettings;
+
+  return (
+    <main className="settings">
+      <button
+        className="button-cancel"
+        aria-label="cancel"
+        onClick={() => cancelUpload()}
+      >
+        {/* <Close /> */}
+      </button>
+      <h1>Select language</h1>
+      <p className="language-description">
+        Choose the main language that is spoken in the file, to help us get the best
+        transcription.
+      </p>
+      <div className="file-info">
+        <p>{files.files.map(file => file.name).join(', ')}</p>
+      </div>
+      <select
+        name="language"
+        id="language"
+        className="select-dropdown"
+        onChange={(event) => setSelectedLanguage(event.target.value)}
+      >
+        <option value="detect-language">Detect language</option>
+        {languages.map((language) => (
+          <option
+            key={language}
+            selected={language === selectedLanguage}
+            value={language}
+          >
+            {language}
+          </option>
+        ))}
+      </select>
+      <button className="button-upload" onClick={() => setSettingTab(1)}>
+        Next
+      </button>
+    </main>
+  );
+};
+
+export default LanguageSettings;