78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import { useUserSelector } from '@/store/userStore';
|
|
import { Avatar } from 'antd';
|
|
import Title from 'antd/es/typography/Title';
|
|
import { useState } from 'react';
|
|
import ContentDrawer from './ContentDrawer';
|
|
import UserEdit from './UserEdit';
|
|
|
|
interface HeaderProps {
|
|
title: string;
|
|
additionalContent?: React.ReactNode;
|
|
}
|
|
|
|
export default function Header({ title, additionalContent }: HeaderProps) {
|
|
const [openEdit, setOpenEdit] = useState(false);
|
|
|
|
const showEditDrawer = () => setOpenEdit(true);
|
|
const closeEditDrawer = () => {
|
|
setOpenEdit(false);
|
|
};
|
|
const user = useUserSelector();
|
|
return (
|
|
<div
|
|
style={{
|
|
height: '72px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
<Title style={{ marginLeft: '16px' }} level={3}>
|
|
{title}
|
|
</Title>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '24px',
|
|
marginRight: '26px',
|
|
}}
|
|
>
|
|
{additionalContent}
|
|
<img
|
|
src="./icons/header/more.svg"
|
|
alt="more"
|
|
style={{ height: '16px', width: '16px' }}
|
|
/>
|
|
<div
|
|
style={{
|
|
borderRadius: '50%',
|
|
border: '2px solid #8BC34A',
|
|
height: '32px',
|
|
width: '32px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
onClick={showEditDrawer}
|
|
>
|
|
<Avatar
|
|
size={25.77}
|
|
src={`https://gamma.heado.ru/go/ava?name=${user?.login}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ContentDrawer
|
|
login={user?.login}
|
|
name={user?.name}
|
|
email={user?.email}
|
|
open={openEdit}
|
|
closeDrawer={closeEditDrawer}
|
|
type="edit"
|
|
>
|
|
{user?.id && <UserEdit closeDrawer={closeEditDrawer} userId={user?.id} />}
|
|
</ContentDrawer>
|
|
</div>
|
|
);
|
|
}
|