74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import type { DrawerProps } from 'antd';
|
|
import { Drawer, Space } from 'antd';
|
|
import { BsArrowLeft } from 'react-icons/bs';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { FaShoppingBag } from 'react-icons/fa';
|
|
import { LuUser2 } from "react-icons/lu";
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { CgProfile } from 'react-icons/cg';
|
|
import SettingDrawerSingleTab from '../Setting/SettingDrawerSingleTab';
|
|
import { IoMdHeartEmpty } from 'react-icons/io';
|
|
import { CiLogout } from 'react-icons/ci';
|
|
import { LocalStorageEnum } from '../../api/utils/LocalStorage';
|
|
import useAuthState from '../../state/AuthState';
|
|
|
|
|
|
const SettingDrawer: React.FC = () => {
|
|
|
|
const {t} = useTranslation();
|
|
const SettingDrawerData = [
|
|
{ tabName: "Orders", icon: FaShoppingBag },
|
|
{ tabName: "Wish List", icon: IoMdHeartEmpty },
|
|
];
|
|
|
|
const {logout} = useAuthState()
|
|
const [open, setOpen] = useState(false);
|
|
const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
|
|
const User = JSON.parse(localStorage.getItem(LocalStorageEnum.USER_KEY) ?? "");
|
|
|
|
return (
|
|
<>
|
|
<Space>
|
|
<div className='icon_navbar'onClick={()=>setOpen(true)}><LuUser2 /></div>
|
|
|
|
</Space>
|
|
<Drawer
|
|
title={""}
|
|
placement={placement}
|
|
closable={false}
|
|
onClose={() => setOpen(false)}
|
|
open={open}
|
|
key={placement}
|
|
width={270}
|
|
style={{maxHeight:"44%"}}
|
|
>
|
|
<div className="setting_drawer_first_section">
|
|
<p>{t("Profile")}</p>
|
|
<span onClick={()=>setOpen(false)}><BsArrowLeft/> {t("Back")}</span>
|
|
</div>
|
|
<div className='setting_drawer_body'>
|
|
<div className='setting_drawer_tab'>
|
|
<CgProfile/>
|
|
<div>
|
|
<h4>{User?.name}</h4>
|
|
<h4>{User?.email}</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='setting_drawer_tabs'>
|
|
{SettingDrawerData.map((data, index) => (
|
|
<SettingDrawerSingleTab onCLick={() => setOpen(false)} key={index} Icon={data.icon} tabName={data.tabName} />
|
|
))}
|
|
<SettingDrawerSingleTab onCLick={logout} link='/' Icon={CiLogout} tabName={"Logout"} />
|
|
|
|
</div>
|
|
</div>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SettingDrawer;
|
|
|