45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { useState } from 'react';
|
|
import type { DrawerProps } from 'antd';
|
|
import { Drawer, Space } from 'antd';
|
|
import { TiDeleteOutline } from "react-icons/ti";
|
|
import SearchButton from '../Utils/Search/SearchButton';
|
|
import { RiSearchLine } from "react-icons/ri";
|
|
import Empty from '../Utils/Search/Empty';
|
|
|
|
const SearchWithDrawer = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
|
|
const [noDataFound, setNoDataFound] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<Space>
|
|
<div onClick={() => setOpen(true)} className="icon_navbar">
|
|
<RiSearchLine />
|
|
</div>
|
|
</Space>
|
|
|
|
<Drawer
|
|
title={""}
|
|
placement={placement}
|
|
closable={false}
|
|
onClose={() => setOpen(false)}
|
|
open={open}
|
|
key={placement}
|
|
width={720}
|
|
style={{ maxHeight: "40%" }}
|
|
>
|
|
<div className="search_first_section">
|
|
<SearchButton setOpen={setOpen} setNoDataFound={setNoDataFound} />
|
|
<span className='delete_icon' onClick={() => setOpen(false)}><TiDeleteOutline /></span>
|
|
</div>
|
|
<div className='not_found_section'>
|
|
{noDataFound ? <Empty />:"" }
|
|
</div>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SearchWithDrawer;
|