From aacde5a7a5a0fe27996caede7dfcec889c7bc9da Mon Sep 17 00:00:00 2001
From: WanQuanXie <i2cherry941219@gmail.com>
Date: Wed, 8 May 2024 11:50:34 +0800
Subject: [PATCH] feat(StyledInput): reexport the <input> component with styled

---
 ui/components/SettingsDialog.tsx     | 19 +++++++------------
 ui/components/common/StyledInput.tsx | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 12 deletions(-)
 create mode 100644 ui/components/common/StyledInput.tsx

diff --git a/ui/components/SettingsDialog.tsx b/ui/components/SettingsDialog.tsx
index be94db2..d8fc971 100644
--- a/ui/components/SettingsDialog.tsx
+++ b/ui/components/SettingsDialog.tsx
@@ -1,6 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react';
 import { CloudUpload, RefreshCcw, RefreshCw } from 'lucide-react';
 import React, { Fragment, useEffect, useState } from 'react';
+import { StyledInput } from './common/StyledInput';
 
 interface SettingsType {
   chatModelProviders: {
@@ -232,42 +233,39 @@ const SettingsDialog = ({
                         <>
                           <div className="flex flex-col space-y-1">
                             <p className="text-white/70 text-sm">Model name</p>
-                            <input
+                            <StyledInput
                               type="text"
                               placeholder="Model name"
                               defaultValue={selectedChatModel!}
                               onChange={(e) =>
                                 setSelectedChatModel(e.target.value)
                               }
-                              className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
                             />
                           </div>
                           <div className="flex flex-col space-y-1">
                             <p className="text-white/70 text-sm">
                               Custom OpenAI API Key
                             </p>
-                            <input
+                            <StyledInput
                               type="text"
                               placeholder="Custom OpenAI API Key"
                               defaultValue={customOpenAIApiKey!}
                               onChange={(e) =>
                                 setCustomOpenAIApiKey(e.target.value)
                               }
-                              className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
                             />
                           </div>
                           <div className="flex flex-col space-y-1">
                             <p className="text-white/70 text-sm">
                               Custom OpenAI Base URL
                             </p>
-                            <input
+                            <StyledInput
                               type="text"
                               placeholder="Custom OpenAI Base URL"
                               defaultValue={customOpenAIBaseURL!}
                               onChange={(e) =>
                                 setCustomOpenAIBaseURL(e.target.value)
                               }
-                              className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
                             />
                           </div>
                         </>
@@ -337,7 +335,7 @@ const SettingsDialog = ({
                     )}
                     <div className="flex flex-col space-y-1">
                       <p className="text-white/70 text-sm">OpenAI API Key</p>
-                      <input
+                      <StyledInput
                         type="text"
                         placeholder="OpenAI API Key"
                         defaultValue={config.openaiApiKey}
@@ -347,12 +345,11 @@ const SettingsDialog = ({
                             openaiApiKey: e.target.value,
                           })
                         }
-                        className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
                       />
                     </div>
                     <div className="flex flex-col space-y-1">
                       <p className="text-white/70 text-sm">Ollama API URL</p>
-                      <input
+                      <StyledInput
                         type="text"
                         placeholder="Ollama API URL"
                         defaultValue={config.ollamaApiUrl}
@@ -362,12 +359,11 @@ const SettingsDialog = ({
                             ollamaApiUrl: e.target.value,
                           })
                         }
-                        className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
                       />
                     </div>
                     <div className="flex flex-col space-y-1">
                       <p className="text-white/70 text-sm">GROQ API Key</p>
-                      <input
+                      <StyledInput
                         type="text"
                         placeholder="GROQ API Key"
                         defaultValue={config.groqApiKey}
@@ -377,7 +373,6 @@ const SettingsDialog = ({
                             groqApiKey: e.target.value,
                           })
                         }
-                        className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
                       />
                     </div>
                   </div>
diff --git a/ui/components/common/StyledInput.tsx b/ui/components/common/StyledInput.tsx
new file mode 100644
index 0000000..de5a751
--- /dev/null
+++ b/ui/components/common/StyledInput.tsx
@@ -0,0 +1,16 @@
+import { cn } from '@/lib/utils';
+import type { InputHTMLAttributes } from 'react';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+export const StyledInput = function StyledInput({
+  className,
+  ...restProps
+}: InputProps) {
+  return (
+    <input
+      className={cn("bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm", className)}
+      {...restProps}
+    />
+  );
+};