49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
import { memo, useState } from 'react';
|
|
import { withTranslation } from 'react-i18next';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import SearchInput from '../../shared-components/SearchInput';
|
|
|
|
function Welcome({ t }) {
|
|
const [query, setQuery] = useState('');
|
|
const navigate = useNavigate();
|
|
|
|
const onInputType = (event) => {
|
|
const { target } = event;
|
|
const value = target?.value ?? '';
|
|
setQuery(value);
|
|
};
|
|
|
|
const onSearch = () => {
|
|
const trimmedQuery = query.trim();
|
|
if (!trimmedQuery) {
|
|
return;
|
|
}
|
|
|
|
navigate(`/rent-and-buy/search?query=${trimmedQuery}`);
|
|
};
|
|
|
|
return (
|
|
<section className="h-[calc(100vh-72px)] mb-[105px] bg-home-welcome bg-cover">
|
|
<div className="flex flex-col max-w-8xl w-full mx-auto pt-160 px-10">
|
|
<h1 className="max-w-[910px] mb-[30px] text-7xl font-bold text-primary-light">
|
|
{t('title')}
|
|
</h1>
|
|
<p className="max-w-[820px] mb-[100px] text-2xl font-medium text-primary-light">
|
|
{t('subtitle')}
|
|
</p>
|
|
<SearchInput
|
|
className="max-w-[780px]"
|
|
mode="simple"
|
|
placeholder={t('main_input_placeholder')}
|
|
btnText={t('main_input_btn')}
|
|
query={query}
|
|
onType={onInputType}
|
|
onSearch={onSearch}
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default withTranslation('homePage')(memo(Welcome));
|