pdf-reader-web/components/Navbar/index.tsx

import React from 'react';

import Icon from '../Icon';
import Typography from '../Typography';

import { Wrapper } from './styled';
import { Separator } from '../../global/otherStyled';
import data from './data';

type Props = {
  onClick: (state: string) => void;
  navbarState: string;
  children: React.ReactNode;
  displayMode: string;
};

const Navbar: React.FunctionComponent<Props> = ({
  onClick,
  navbarState,
  children,
  displayMode,
}: Props) => (
  <Wrapper isHidden={displayMode === 'full'}>
    <Typography variant="title">Title</Typography>
    <Icon glyph="edit" />
    <Separator />
    {
      data.btnGroup.map(ele => (
        <Icon
          key={ele.key}
          glyph={ele.content}
          isActive={navbarState === ele.content}
          onClick={(): void => { onClick(ele.content); }}
        />
      ))
    }
    {children}
  </Wrapper>
);

export default Navbar;