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

import React from 'react';

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

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

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

const Navbar: React.FC<Props> = ({
  onClick,
  navbarState,
  children,
  displayMode,
  fileName,
}: Props) => (
  <Container isHidden={displayMode === 'full'}>
    <Typography variant="title">{fileName}</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}
  </Container>
);

export default Navbar;