jamesf/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(StyledInput): reexport the <input> component with styled

Browse source
This commit is contained in:
WanQuanXie 2024-05-08 11:50:34 +08:00
parent d9ba36794a
commit aacde5a7a5
2 changed files with 23 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/components/SettingsDialog.tsx
View file

@ -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>

16
ui/components/common/StyledInput.tsx Normal file
View file

@ -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}
/>
);
};