54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import {
|
|
Icon,
|
|
IconButton,
|
|
Input,
|
|
InputGroup,
|
|
InputLeftElement,
|
|
InputRightElement,
|
|
Select,
|
|
useControllableState
|
|
} from '@chakra-ui/react';
|
|
|
|
import React from 'react';
|
|
import { TbCircleX } from 'react-icons/tb';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface SearchInputProps {
|
|
icon: React.ReactNode;
|
|
placeholder: string;
|
|
value?: string;
|
|
onChange?: (value: string) => void;
|
|
}
|
|
|
|
const SearchLanguage: React.FC<SearchInputProps> = ({ placeholder, icon, value, onChange }) => {
|
|
const [controlledValue, setControlledValue] = useControllableState({
|
|
value,
|
|
onChange,
|
|
defaultValue: ''
|
|
});
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<InputGroup>
|
|
|
|
<InputLeftElement pointerEvents="none" children={icon} />
|
|
|
|
<Select defaultValue={''} className={value !== '' ? 'active' : ''} placeholder={placeholder} onChange={(e) => setControlledValue(e.target.value)}>
|
|
<option value={"Chinese"}>{t('languages.chinese')}</option>
|
|
<option value={"English"}>{t('languages.english')}</option>
|
|
<option value={"French"}>{t('languages.french')}</option>
|
|
<option value={"German"}>{t('languages.german')}</option>
|
|
<option value={"Japanese"}>{t('languages.japanese')}</option>
|
|
<option value={"Italian"}>{t('languages.italian')}</option>
|
|
<option value={"Portuguese"}>{t('languages.portuguese')}</option>
|
|
<option value={"Spanish"}>{t('languages.spanish')}</option>
|
|
<option value={"Other"}>{t('languages.other')}</option>
|
|
<option value={"input"}>{t('languages.input')}</option>
|
|
</Select>
|
|
|
|
</InputGroup>
|
|
);
|
|
};
|
|
|
|
export default SearchLanguage;
|