58 lines
1.1 KiB
JavaScript
58 lines
1.1 KiB
JavaScript
import { styled } from 'styled-components';
|
|
import Button from '../common/button/Button';
|
|
|
|
import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper } from '../../styles/Components';
|
|
|
|
const LandSearchBar = () => {
|
|
return (
|
|
<>
|
|
<FormWrapper>
|
|
<SearchbarStyle>
|
|
<SearchItem>
|
|
<InputLabel>랜드 조회</InputLabel>
|
|
<TextInput type="text" width="300px" placeholder="랜드 ID를 입력하세요." />
|
|
</SearchItem>
|
|
<BtnWrapper $gap="8px">
|
|
<Button theme="reset" />
|
|
<Button
|
|
theme="gray"
|
|
text="검색"
|
|
handleClick={e => {
|
|
e.preventDefault();
|
|
}}
|
|
/>
|
|
</BtnWrapper>
|
|
</SearchbarStyle>
|
|
</FormWrapper>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LandSearchBar;
|
|
|
|
const SearchbarStyle = styled.div`
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px 0;
|
|
font-size: 14px;
|
|
padding: 20px;
|
|
border-top: 1px solid #000;
|
|
border-bottom: 1px solid #000;
|
|
margin-bottom: 40px;
|
|
`;
|
|
const SearchItem = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-right: 50px;
|
|
|
|
${TextInput}, ${SelectInput} {
|
|
height: 35px;
|
|
}
|
|
${TextInput} {
|
|
padding: 0 10px;
|
|
max-width: 400px;
|
|
}
|
|
`;
|