feat(settings): add new settings page

ui/components/ChatWindow.tsx

@@ -10,7 +10,7 @@ import { toast } from 'sonner';
 import { useSearchParams } from 'next/navigation';
 import { getSuggestions } from '@/lib/actions';
 import { Settings } from 'lucide-react';
-import SettingsDialog from './SettingsDialog';
+import Link from 'next/link';
 import NextError from 'next/error';
 
 export type Message = {
@@ -40,6 +40,7 @@ const useSocket = (
   const isCleaningUpRef = useRef(false);
   const MAX_RETRIES = 3;
   const INITIAL_BACKOFF = 1000; // 1 second
+  const isConnectionErrorRef = useRef(false);
 
   const getBackoffDelay = (retryCount: number) => {
     return Math.min(INITIAL_BACKOFF * Math.pow(2, retryCount), 10000); // Cap at 10 seconds
@@ -97,21 +98,13 @@ const useSocket = (
             chatModelProvider =
               chatModelProvider || Object.keys(chatModelProviders)[0];
 
-            if (chatModelProvider === 'custom_openai') {
-              toast.error(
-                'Seems like you are using the custom OpenAI provider, please open the settings and enter a model name to use.',
-              );
-              setError(true);
-              return;
-            } else {
-              chatModel = Object.keys(chatModelProviders[chatModelProvider])[0];
+            chatModel = Object.keys(chatModelProviders[chatModelProvider])[0];
 
-              if (
-                !chatModelProviders ||
-                Object.keys(chatModelProviders).length === 0
-              )
-                return toast.error('No chat models available');
-            }
+            if (
+              !chatModelProviders ||
+              Object.keys(chatModelProviders).length === 0
+            )
+              return toast.error('No chat models available');
           }
 
           if (!embeddingModel || !embeddingModelProvider) {
@@ -142,9 +135,7 @@ const useSocket = (
 
           if (
             Object.keys(chatModelProviders).length > 0 &&
-            (((!openAIBaseURL || !openAIPIKey) &&
-              chatModelProvider === 'custom_openai') ||
-              !chatModelProviders[chatModelProvider])
+            !chatModelProviders[chatModelProvider]
           ) {
             const chatModelProvidersKeys = Object.keys(chatModelProviders);
             chatModelProvider =
@@ -152,23 +143,11 @@ const useSocket = (
                 (key) => Object.keys(chatModelProviders[key]).length > 0,
               ) || chatModelProvidersKeys[0];
 
-            if (
-              chatModelProvider === 'custom_openai' &&
-              (!openAIBaseURL || !openAIPIKey)
-            ) {
-              toast.error(
-                'Seems like you are using the custom OpenAI provider, please open the settings and configure the API key and base URL',
-              );
-              setError(true);
-              return;
-            }
-
             localStorage.setItem('chatModelProvider', chatModelProvider);
           }
 
           if (
             chatModelProvider &&
-            (!openAIBaseURL || !openAIPIKey) &&
             !chatModelProviders[chatModelProvider][chatModel]
           ) {
             chatModel = Object.keys(
@@ -254,6 +233,8 @@ const useSocket = (
             console.debug(new Date(), 'ws:connected');
           }
           if (data.type === 'error') {
+            isConnectionErrorRef.current = true;
+            setError(true);
             toast.error(data.data);
           }
         });
@@ -268,7 +249,7 @@ const useSocket = (
           clearTimeout(timeoutId);
           setIsWSReady(false);
           console.debug(new Date(), 'ws:disconnected');
-          if (!isCleaningUpRef.current) {
+          if (!isCleaningUpRef.current && !isConnectionErrorRef.current) {
             toast.error('Connection lost. Attempting to reconnect...');
             attemptReconnect();
           }
@@ -643,17 +624,15 @@ const ChatWindow = ({ id }: { id?: string }) => {
     return (
       <div className="relative">
         <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
-          <Settings
-            className="cursor-pointer lg:hidden"
-            onClick={() => setIsSettingsOpen(true)}
-          />
+          <Link href="/settings">
+            <Settings className="cursor-pointer lg:hidden" />
+          </Link>
         </div>
         <div className="flex flex-col items-center justify-center min-h-screen">
           <p className="dark:text-white/70 text-black/70 text-sm">
             Failed to connect to the server. Please try again later.
           </p>
         </div>
-        <SettingsDialog isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} />
       </div>
     );
   }

ui/components/EmptyChat.tsx

@@ -1,8 +1,8 @@
 import { Settings } from 'lucide-react';
 import EmptyChatMessageInput from './EmptyChatMessageInput';
-import SettingsDialog from './SettingsDialog';
 import { useState } from 'react';
 import { File } from './ChatWindow';
+import Link from 'next/link';
 
 const EmptyChat = ({
   sendMessage,
@@ -29,12 +29,10 @@ const EmptyChat = ({
 
   return (
     <div className="relative">
-      <SettingsDialog isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} />
       <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
-        <Settings
-          className="cursor-pointer lg:hidden"
-          onClick={() => setIsSettingsOpen(true)}
-        />
+        <Link href="/settings">
+          <Settings className="cursor-pointer lg:hidden" />
+        </Link>
       </div>
       <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
         <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">

ui/components/SettingsDialog.tsx

@@ -1,528 +0,0 @@
-import { cn } from '@/lib/utils';
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  Transition,
-  TransitionChild,
-} from '@headlessui/react';
-import { CloudUpload, RefreshCcw, RefreshCw } from 'lucide-react';
-import React, {
-  Fragment,
-  useEffect,
-  useState,
-  type SelectHTMLAttributes,
-} from 'react';
-import ThemeSwitcher from './theme/Switcher';
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = ({ className, ...restProps }: InputProps) => {
-  return (
-    <input
-      {...restProps}
-      className={cn(
-        'bg-light-secondary dark:bg-dark-secondary px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm',
-        className,
-      )}
-    />
-  );
-};
-
-interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-  options: { value: string; label: string; disabled?: boolean }[];
-}
-
-export const Select = ({ className, options, ...restProps }: SelectProps) => {
-  return (
-    <select
-      {...restProps}
-      className={cn(
-        'bg-light-secondary dark:bg-dark-secondary px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm',
-        className,
-      )}
-    >
-      {options.map(({ label, value, disabled }) => {
-        return (
-          <option key={value} value={value} disabled={disabled}>
-            {label}
-          </option>
-        );
-      })}
-    </select>
-  );
-};
-
-interface SettingsType {
-  chatModelProviders: {
-    [key: string]: [Record<string, any>];
-  };
-  embeddingModelProviders: {
-    [key: string]: [Record<string, any>];
-  };
-  openaiApiKey: string;
-  groqApiKey: string;
-  anthropicApiKey: string;
-  geminiApiKey: string;
-  ollamaApiUrl: string;
-}
-
-const SettingsDialog = ({
-  isOpen,
-  setIsOpen,
-}: {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-}) => {
-  const [config, setConfig] = useState<SettingsType | null>(null);
-  const [chatModels, setChatModels] = useState<Record<string, any>>({});
-  const [embeddingModels, setEmbeddingModels] = useState<Record<string, any>>(
-    {},
-  );
-  const [selectedChatModelProvider, setSelectedChatModelProvider] = useState<
-    string | null
-  >(null);
-  const [selectedChatModel, setSelectedChatModel] = useState<string | null>(
-    null,
-  );
-  const [selectedEmbeddingModelProvider, setSelectedEmbeddingModelProvider] =
-    useState<string | null>(null);
-  const [selectedEmbeddingModel, setSelectedEmbeddingModel] = useState<
-    string | null
-  >(null);
-  const [customOpenAIApiKey, setCustomOpenAIApiKey] = useState<string>('');
-  const [customOpenAIBaseURL, setCustomOpenAIBaseURL] = useState<string>('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [isUpdating, setIsUpdating] = useState(false);
-
-  useEffect(() => {
-    if (isOpen) {
-      const fetchConfig = async () => {
-        setIsLoading(true);
-        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        });
-
-        const data = (await res.json()) as SettingsType;
-        setConfig(data);
-
-        const chatModelProvidersKeys = Object.keys(
-          data.chatModelProviders || {},
-        );
-        const embeddingModelProvidersKeys = Object.keys(
-          data.embeddingModelProviders || {},
-        );
-
-        const defaultChatModelProvider =
-          chatModelProvidersKeys.length > 0 ? chatModelProvidersKeys[0] : '';
-        const defaultEmbeddingModelProvider =
-          embeddingModelProvidersKeys.length > 0
-            ? embeddingModelProvidersKeys[0]
-            : '';
-
-        const chatModelProvider =
-          localStorage.getItem('chatModelProvider') ||
-          defaultChatModelProvider ||
-          '';
-        const chatModel =
-          localStorage.getItem('chatModel') ||
-          (data.chatModelProviders &&
-          data.chatModelProviders[chatModelProvider]?.length > 0
-            ? data.chatModelProviders[chatModelProvider][0].name
-            : undefined) ||
-          '';
-        const embeddingModelProvider =
-          localStorage.getItem('embeddingModelProvider') ||
-          defaultEmbeddingModelProvider ||
-          '';
-        const embeddingModel =
-          localStorage.getItem('embeddingModel') ||
-          (data.embeddingModelProviders &&
-            data.embeddingModelProviders[embeddingModelProvider]?.[0].name) ||
-          '';
-
-        setSelectedChatModelProvider(chatModelProvider);
-        setSelectedChatModel(chatModel);
-        setSelectedEmbeddingModelProvider(embeddingModelProvider);
-        setSelectedEmbeddingModel(embeddingModel);
-        setCustomOpenAIApiKey(localStorage.getItem('openAIApiKey') || '');
-        setCustomOpenAIBaseURL(localStorage.getItem('openAIBaseURL') || '');
-        setChatModels(data.chatModelProviders || {});
-        setEmbeddingModels(data.embeddingModelProviders || {});
-        setIsLoading(false);
-      };
-
-      fetchConfig();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
-
-  const handleSubmit = async () => {
-    setIsUpdating(true);
-
-    try {
-      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(config),
-      });
-
-      localStorage.setItem('chatModelProvider', selectedChatModelProvider!);
-      localStorage.setItem('chatModel', selectedChatModel!);
-      localStorage.setItem(
-        'embeddingModelProvider',
-        selectedEmbeddingModelProvider!,
-      );
-      localStorage.setItem('embeddingModel', selectedEmbeddingModel!);
-      localStorage.setItem('openAIApiKey', customOpenAIApiKey!);
-      localStorage.setItem('openAIBaseURL', customOpenAIBaseURL!);
-    } catch (err) {
-      console.log(err);
-    } finally {
-      setIsUpdating(false);
-      setIsOpen(false);
-
-      window.location.reload();
-    }
-  };
-
-  return (
-    <Transition appear show={isOpen} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-50"
-        onClose={() => setIsOpen(false)}
-      >
-        <TransitionChild
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-white/50 dark:bg-black/50" />
-        </TransitionChild>
-        <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <TransitionChild
-              as={Fragment}
-              enter="ease-out duration-200"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-100"
-              leaveFrom="opacity-100 scale-200"
-              leaveTo="opacity-0 scale-95"
-            >
-              <DialogPanel className="w-full max-w-md transform rounded-2xl bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200 p-6 text-left align-middle shadow-xl transition-all">
-                <DialogTitle className="text-xl font-medium leading-6 dark:text-white">
-                  Settings
-                </DialogTitle>
-                {config && !isLoading && (
-                  <div className="flex flex-col space-y-4 mt-6">
-                    <div className="flex flex-col space-y-1">
-                      <p className="text-black/70 dark:text-white/70 text-sm">
-                        Theme
-                      </p>
-                      <ThemeSwitcher />
-                    </div>
-                    {config.chatModelProviders && (
-                      <div className="flex flex-col space-y-1">
-                        <p className="text-black/70 dark:text-white/70 text-sm">
-                          Chat model Provider
-                        </p>
-                        <Select
-                          value={selectedChatModelProvider ?? undefined}
-                          onChange={(e) => {
-                            setSelectedChatModelProvider(e.target.value);
-                            if (e.target.value === 'custom_openai') {
-                              setSelectedChatModel('');
-                            } else {
-                              setSelectedChatModel(
-                                config.chatModelProviders[e.target.value][0]
-                                  .name,
-                              );
-                            }
-                          }}
-                          options={Object.keys(config.chatModelProviders).map(
-                            (provider) => ({
-                              value: provider,
-                              label:
-                                provider.charAt(0).toUpperCase() +
-                                provider.slice(1),
-                            }),
-                          )}
-                        />
-                      </div>
-                    )}
-                    {selectedChatModelProvider &&
-                      selectedChatModelProvider != 'custom_openai' && (
-                        <div className="flex flex-col space-y-1">
-                          <p className="text-black/70 dark:text-white/70 text-sm">
-                            Chat Model
-                          </p>
-                          <Select
-                            value={selectedChatModel ?? undefined}
-                            onChange={(e) =>
-                              setSelectedChatModel(e.target.value)
-                            }
-                            options={(() => {
-                              const chatModelProvider =
-                                config.chatModelProviders[
-                                  selectedChatModelProvider
-                                ];
-
-                              return chatModelProvider
-                                ? chatModelProvider.length > 0
-                                  ? chatModelProvider.map((model) => ({
-                                      value: model.name,
-                                      label: model.displayName,
-                                    }))
-                                  : [
-                                      {
-                                        value: '',
-                                        label: 'No models available',
-                                        disabled: true,
-                                      },
-                                    ]
-                                : [
-                                    {
-                                      value: '',
-                                      label:
-                                        'Invalid provider, please check backend logs',
-                                      disabled: true,
-                                    },
-                                  ];
-                            })()}
-                          />
-                        </div>
-                      )}
-                    {selectedChatModelProvider &&
-                      selectedChatModelProvider === 'custom_openai' && (
-                        <>
-                          <div className="flex flex-col space-y-1">
-                            <p className="text-black/70 dark:text-white/70 text-sm">
-                              Model name
-                            </p>
-                            <Input
-                              type="text"
-                              placeholder="Model name"
-                              defaultValue={selectedChatModel!}
-                              onChange={(e) =>
-                                setSelectedChatModel(e.target.value)
-                              }
-                            />
-                          </div>
-                          <div className="flex flex-col space-y-1">
-                            <p className="text-black/70 dark:text-white/70 text-sm">
-                              Custom OpenAI API Key
-                            </p>
-                            <Input
-                              type="text"
-                              placeholder="Custom OpenAI API Key"
-                              defaultValue={customOpenAIApiKey!}
-                              onChange={(e) =>
-                                setCustomOpenAIApiKey(e.target.value)
-                              }
-                            />
-                          </div>
-                          <div className="flex flex-col space-y-1">
-                            <p className="text-black/70 dark:text-white/70 text-sm">
-                              Custom OpenAI Base URL
-                            </p>
-                            <Input
-                              type="text"
-                              placeholder="Custom OpenAI Base URL"
-                              defaultValue={customOpenAIBaseURL!}
-                              onChange={(e) =>
-                                setCustomOpenAIBaseURL(e.target.value)
-                              }
-                            />
-                          </div>
-                        </>
-                      )}
-                    {/* Embedding models */}
-                    {config.embeddingModelProviders && (
-                      <div className="flex flex-col space-y-1">
-                        <p className="text-black/70 dark:text-white/70 text-sm">
-                          Embedding model Provider
-                        </p>
-                        <Select
-                          value={selectedEmbeddingModelProvider ?? undefined}
-                          onChange={(e) => {
-                            setSelectedEmbeddingModelProvider(e.target.value);
-                            setSelectedEmbeddingModel(
-                              config.embeddingModelProviders[e.target.value][0]
-                                .name,
-                            );
-                          }}
-                          options={Object.keys(
-                            config.embeddingModelProviders,
-                          ).map((provider) => ({
-                            label:
-                              provider.charAt(0).toUpperCase() +
-                              provider.slice(1),
-                            value: provider,
-                          }))}
-                        />
-                      </div>
-                    )}
-                    {selectedEmbeddingModelProvider && (
-                      <div className="flex flex-col space-y-1">
-                        <p className="text-black/70 dark:text-white/70 text-sm">
-                          Embedding Model
-                        </p>
-                        <Select
-                          value={selectedEmbeddingModel ?? undefined}
-                          onChange={(e) =>
-                            setSelectedEmbeddingModel(e.target.value)
-                          }
-                          options={(() => {
-                            const embeddingModelProvider =
-                              config.embeddingModelProviders[
-                                selectedEmbeddingModelProvider
-                              ];
-
-                            return embeddingModelProvider
-                              ? embeddingModelProvider.length > 0
-                                ? embeddingModelProvider.map((model) => ({
-                                    label: model.displayName,
-                                    value: model.name,
-                                  }))
-                                : [
-                                    {
-                                      label: 'No embedding models available',
-                                      value: '',
-                                      disabled: true,
-                                    },
-                                  ]
-                              : [
-                                  {
-                                    label:
-                                      'Invalid provider, please check backend logs',
-                                    value: '',
-                                    disabled: true,
-                                  },
-                                ];
-                          })()}
-                        />
-                      </div>
-                    )}
-                    <div className="flex flex-col space-y-1">
-                      <p className="text-black/70 dark:text-white/70 text-sm">
-                        OpenAI API Key
-                      </p>
-                      <Input
-                        type="text"
-                        placeholder="OpenAI API Key"
-                        defaultValue={config.openaiApiKey}
-                        onChange={(e) =>
-                          setConfig({
-                            ...config,
-                            openaiApiKey: e.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                    <div className="flex flex-col space-y-1">
-                      <p className="text-black/70 dark:text-white/70 text-sm">
-                        Ollama API URL
-                      </p>
-                      <Input
-                        type="text"
-                        placeholder="Ollama API URL"
-                        defaultValue={config.ollamaApiUrl}
-                        onChange={(e) =>
-                          setConfig({
-                            ...config,
-                            ollamaApiUrl: e.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                    <div className="flex flex-col space-y-1">
-                      <p className="text-black/70 dark:text-white/70 text-sm">
-                        GROQ API Key
-                      </p>
-                      <Input
-                        type="text"
-                        placeholder="GROQ API Key"
-                        defaultValue={config.groqApiKey}
-                        onChange={(e) =>
-                          setConfig({
-                            ...config,
-                            groqApiKey: e.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                    <div className="flex flex-col space-y-1">
-                      <p className="text-black/70 dark:text-white/70 text-sm">
-                        Anthropic API Key
-                      </p>
-                      <Input
-                        type="text"
-                        placeholder="Anthropic API key"
-                        defaultValue={config.anthropicApiKey}
-                        onChange={(e) =>
-                          setConfig({
-                            ...config,
-                            anthropicApiKey: e.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                    <div className="flex flex-col space-y-1">
-                      <p className="text-black/70 dark:text-white/70 text-sm">
-                        Gemini API Key
-                      </p>
-                      <Input
-                        type="text"
-                        placeholder="Gemini API key"
-                        defaultValue={config.geminiApiKey}
-                        onChange={(e) =>
-                          setConfig({
-                            ...config,
-                            geminiApiKey: e.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                  </div>
-                )}
-                {isLoading && (
-                  <div className="w-full flex items-center justify-center mt-6 text-black/70 dark:text-white/70 py-6">
-                    <RefreshCcw className="animate-spin" />
-                  </div>
-                )}
-                <div className="w-full mt-6 space-y-2">
-                  <p className="text-xs text-black/50 dark:text-white/50">
-                    We&apos;ll refresh the page after updating the settings.
-                  </p>
-                  <button
-                    onClick={handleSubmit}
-                    className="bg-[#24A0ED] flex flex-row items-center space-x-2 text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full px-4 py-2"
-                    disabled={isLoading || isUpdating}
-                  >
-                    {isUpdating ? (
-                      <RefreshCw size={20} className="animate-spin" />
-                    ) : (
-                      <CloudUpload size={20} />
-                    )}
-                  </button>
-                </div>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  );
-};
-
-export default SettingsDialog;

ui/components/Sidebar.tsx

@@ -6,7 +6,6 @@ import Link from 'next/link';
 import { useSelectedLayoutSegments } from 'next/navigation';
 import React, { useState, type ReactNode } from 'react';
 import Layout from './Layout';
-import SettingsDialog from './SettingsDialog';
 
 const VerticalIconContainer = ({ children }: { children: ReactNode }) => {
   return (
@@ -67,15 +66,9 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
             ))}
           </VerticalIconContainer>
 
-          <Settings
-            onClick={() => setIsSettingsOpen(!isSettingsOpen)}
-            className="cursor-pointer"
-          />
-
-          <SettingsDialog
-            isOpen={isSettingsOpen}
-            setIsOpen={setIsSettingsOpen}
-          />
+          <Link href="/settings">
+            <Settings className="cursor-pointer" />
+          </Link>
         </div>
       </div>
 

ui/components/theme/Switcher.tsx

@@ -1,8 +1,7 @@
 'use client';
 import { useTheme } from 'next-themes';
-import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
-import { Select } from '../SettingsDialog';
+import Select from '../ui/Select';
 
 type Theme = 'dark' | 'light' | 'system';
 

ui/components/ui/Select.tsx

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import { SelectHTMLAttributes } from 'react';
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  options: { value: string; label: string; disabled?: boolean }[];
+}
+
+export const Select = ({ className, options, ...restProps }: SelectProps) => {
+  return (
+    <select
+      {...restProps}
+      className={cn(
+        'bg-light-secondary dark:bg-dark-secondary px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm',
+        className,
+      )}
+    >
+      {options.map(({ label, value, disabled }) => {
+        return (
+          <option key={value} value={value} disabled={disabled}>
+            {label}
+          </option>
+        );
+      })}
+    </select>
+  );
+};
+
+export default Select;