c9cf99e166
- Removed unnecessary React imports. - Adjusted package.json scripts for Electron integration. - Updated components to replace Next.js-specific imports with Electron-compatible alternatives. - Minor tsconfig.json changes for better compatibility.
63 lines
2.7 KiB
TypeScript
63 lines
2.7 KiB
TypeScript
import {ChangeEvent} from "react";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
|
|
import {SelectBoxProps} from "@/shared/interface";
|
|
|
|
interface SearchInputWithSelectProps {
|
|
selectValue: string;
|
|
setSelectValue: (value: string) => void;
|
|
selectOptions: SelectBoxProps[];
|
|
inputValue: string;
|
|
setInputValue: (value: string) => void;
|
|
inputPlaceholder?: string;
|
|
searchIcon: IconDefinition;
|
|
onSearch: () => void;
|
|
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
}
|
|
|
|
export default function SearchInputWithSelect(
|
|
{
|
|
selectValue,
|
|
setSelectValue,
|
|
selectOptions,
|
|
inputValue,
|
|
setInputValue,
|
|
inputPlaceholder,
|
|
searchIcon,
|
|
onSearch,
|
|
onKeyDown
|
|
}: SearchInputWithSelectProps) {
|
|
return (
|
|
<div className="flex items-center space-x-3">
|
|
<select
|
|
value={selectValue}
|
|
onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectValue(e.target.value)}
|
|
className="bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50 focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary hover:bg-secondary hover:border-secondary outline-none transition-all duration-200 font-medium"
|
|
>
|
|
{selectOptions.map((option: SelectBoxProps) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<div className="flex-1 relative">
|
|
<input
|
|
type="text"
|
|
value={inputValue}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}
|
|
placeholder={inputPlaceholder}
|
|
className="w-full bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50 focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary hover:bg-secondary hover:border-secondary placeholder:text-muted/60 outline-none transition-all duration-200 pr-12"
|
|
onKeyDown={onKeyDown}
|
|
/>
|
|
<button
|
|
onClick={onSearch}
|
|
className="absolute right-0 top-0 h-full px-4 text-primary hover:text-primary-light hover:scale-110 transition-all duration-200"
|
|
>
|
|
<FontAwesomeIcon icon={searchIcon} className="w-5 h-5"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|