/
wakeupmurad
/
sber-react-js
Обзор
Документация
Войти
/
wakeupmurad
/
sber-react-js
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/components/Header/Header.js
58 строк
2 KB
GAHRAMANOV.MU.IL.OG
make post app with auth firebase
13 июн 2024, 06:50
13 июн 2024, 06:50
4d9c49f
Код
Авторство
О чём код?
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons' import { Flex, Input, Button, Layout } from 'antd' import { useDispatch } from 'react-redux' import { NavLink } from 'react-router-dom' import { useAuth } from '../../hooks/useAuth' import { removeUser } from '../../redux/slices/userSlice' import classes from './Header.module.css' const AntHeader = Layout.Header const { Search } = Input const Header = ({ collapsed, setCollapsed }) => { const { isAuth, email } = useAuth() const dispatch = useDispatch() const onSearch = (value, _e, info) => { console.log(info?.source, value, _e) } const handleBtnClick = () => { localStorage.removeItem('auth') localStorage.removeItem('email') localStorage.removeItem('id') localStorage.removeItem('token') dispatch(removeUser()) } return ( <AntHeader className={classes.header}> <Flex justify={'space-between'} align={'center'} > <Button type="text" icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={() => setCollapsed(!collapsed)} className={classes.collapseBtn} /> <Search placeholder="input search text" onSearch={onSearch} style={{ width: 200, }} /> {isAuth ? ( <Button onClick={handleBtnClick}>Log out {email}</Button> ) : ( <Button> <NavLink to={'login'}>Login</NavLink> </Button> )} </Flex> </AntHeader> ) } export default Header