chore: migrated to using custom Input component to address redundant twClasses

This commit is contained in:
utin-francis-peter
2024-07-03 12:34:13 +01:00
parent 0a533b64e1
commit b21230c4d6
6 changed files with 87 additions and 38 deletions

View File

@@ -7,6 +7,7 @@ import { getDocs } from '../preferences/preferenceApi';
import { setSelectedDocs, setSourceDocs } from '../preferences/preferenceSlice';
import Dropdown from '../components/Dropdown';
import { useTranslation } from 'react-i18next';
import Input from '../components/Input';
function Upload({
modalState,
@@ -272,7 +273,9 @@ function Upload({
},
});
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const { name, value } = e.target;
if (name === 'search_queries' && value.length > 0) {
setRedditData({
@@ -323,12 +326,12 @@ function Upload({
{activeTab === 'file' && (
<>
<input
<Input
type="text"
className="h-[42px] w-full rounded-full border-2 border-gray-5000 px-3 outline-none dark:bg-transparent dark:text-silver"
className="border-gray-5000 dark:text-silver"
value={docName}
onChange={(e) => setDocName(e.target.value)}
></input>
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.name')}
@@ -373,25 +376,25 @@ function Upload({
/>
{urlType.label !== 'Reddit' ? (
<>
<input
<Input
placeholder={`Enter ${t('modals.uploadDoc.name')}`}
type="text"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
hasSilverBorder
value={urlName}
onChange={(e) => setUrlName(e.target.value)}
></input>
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.name')}
</span>
</div>
<input
<Input
placeholder={t('modals.uploadDoc.urlLink')}
type="text"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
hasSilverBorder
value={url}
onChange={(e) => setUrl(e.target.value)}
></input>
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.link')}
@@ -400,66 +403,66 @@ function Upload({
</>
) : (
<>
<input
<Input
placeholder="Enter client ID"
type="text"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
hasSilverBorder
name="client_id"
value={redditData.client_id}
onChange={handleChange}
></input>
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.id')}
</span>
</div>
<input
<Input
placeholder="Enter client secret"
type="text"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
hasSilverBorder
name="client_secret"
value={redditData.client_secret}
onChange={handleChange}
></input>
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.secret')}
</span>
</div>
<input
<Input
placeholder="Enter user agent"
type="text"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
hasSilverBorder
name="user_agent"
value={redditData.user_agent}
onChange={handleChange}
></input>
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.agent')}
</span>
</div>
<input
<Input
placeholder="Enter search queries"
type="text"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
hasSilverBorder
name="search_queries"
value={redditData.search_queries}
onChange={handleChange}
></input>
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.searchQueries')}
</span>
</div>
<input
<Input
placeholder="Enter number of posts"
type="number"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
hasSilverBorder
name="number_posts"
value={redditData.number_posts}
onChange={handleChange}
></input>
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.numberOfPosts')}