You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
import styled from 'styled-components';
|
|
import { closeRightPanel } from '../../../../../state/ducks/conversations';
|
|
import { resetRightOverlayMode } from '../../../../../state/ducks/section';
|
|
import { Flex } from '../../../../basic/Flex';
|
|
import { SessionIconButton } from '../../../../icon';
|
|
|
|
const StyledTitle = styled.h2`
|
|
font-family: var(--font-default);
|
|
text-align: center;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
`;
|
|
|
|
const StyledSubTitle = styled.h3`
|
|
font-family: var(--font-default);
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
margin-top: 0;
|
|
`;
|
|
|
|
type HeaderProps = {
|
|
title: string;
|
|
subtitle: string;
|
|
};
|
|
|
|
export const Header = (props: HeaderProps) => {
|
|
const { title, subtitle } = props;
|
|
const dispatch = useDispatch();
|
|
|
|
return (
|
|
<Flex container={true} width={'100%'} padding={'32px var(--margins-lg) var(--margins-md)'}>
|
|
<SessionIconButton
|
|
iconSize={'medium'}
|
|
iconType={'chevron'}
|
|
iconRotation={90}
|
|
onClick={() => {
|
|
dispatch(resetRightOverlayMode());
|
|
}}
|
|
/>
|
|
<Flex
|
|
container={true}
|
|
flexDirection={'column'}
|
|
justifyContent={'flex-start'}
|
|
alignItems={'center'}
|
|
width={'100%'}
|
|
margin={'-5px auto auto'}
|
|
>
|
|
<StyledTitle>{title}</StyledTitle>
|
|
<StyledSubTitle>{subtitle}</StyledSubTitle>
|
|
</Flex>
|
|
<SessionIconButton
|
|
iconSize={'tiny'}
|
|
iconType={'exit'}
|
|
onClick={() => {
|
|
dispatch(closeRightPanel());
|
|
dispatch(resetRightOverlayMode());
|
|
}}
|
|
/>
|
|
</Flex>
|
|
);
|
|
};
|