Updated a few things

components/APIKeyInput.tsx

@@ -1,16 +1,16 @@
-interface Props {
-  apiKey: string;
-  onChange: (apiKey: string) => void;
-}
-
-export const APIKeyInput: React.FC<Props> = ({ apiKey, onChange }) => {
-  return (
-    <input
-      className="mt-1 h-[24px] w-[280px] rounded-md border border-gray-300 px-3 py-2 text-black shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
-      type="password"
-      placeholder="OpenAI API Key"
-      value={apiKey}
-      onChange={(e) => onChange(e.target.value)}
-    />
-  );
-};
+interface Props {
+  apiKey: string;
+  onChange: (apiKey: string) => void;
+}
+
+export const APIKeyInput: React.FC<Props> = ({ apiKey, onChange }) => {
+  return (
+    <input
+      className="mt-1 h-[40px] w-[400px] rounded-md border border-gray-300 px-3 py-2 text-black shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+      type="password"
+      placeholder="OpenAI API Key"
+      value={apiKey}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+};

components/CodeBlock.tsx

@@ -1,28 +1,28 @@
-import { StreamLanguage } from '@codemirror/language';
-import { go } from '@codemirror/legacy-modes/mode/go';
-import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
-import CodeMirror from '@uiw/react-codemirror';
-import { FC } from 'react';
-
-interface Props {
-  code: string;
-  editable?: boolean;
-  onChange?: (value: string) => void;
-}
-
-export const CodeBlock: FC<Props> = ({
-  code,
-  editable = false,
-  onChange = () => {},
-}) => {
-  return (
-    <CodeMirror
-      editable={editable}
-      value={code}
-      minHeight="300px"
-      extensions={[StreamLanguage.define(go)]}
-      theme={tokyoNight}
-      onChange={(value) => onChange(value)}
-    />
-  );
-};
+import { StreamLanguage } from '@codemirror/language';
+import { go } from '@codemirror/legacy-modes/mode/go';
+import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
+import CodeMirror from '@uiw/react-codemirror';
+import { FC } from 'react';
+
+interface Props {
+  code: string;
+  editable?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export const CodeBlock: FC<Props> = ({
+  code,
+  editable = false,
+  onChange = () => {},
+}) => {
+  return (
+    <CodeMirror
+      editable={editable}
+      value={code}
+      minHeight="700px"
+      extensions={[StreamLanguage.define(go)]}
+      theme={tokyoNight}
+      onChange={(value) => onChange(value)}
+    />
+  );
+};

components/LangSelect.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+interface Props {
+  langs: Langs;
+  onChange: (model: Langs) => void;
+}
+
+export const LangSelect: FC<Props> = ({ langs, onChange }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(e.target.value as Langs);
+  };
+
+  return (
+    <select
+      className="h-[40px] w-[250px] rounded-md bg-[#1F2937] px-4 py-2 text-neutral-200"
+      value={langs}
+      onChange={handleChange}
+    >
+      <option value="English">English</option>
+    </select>
+  );
+};
+