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;
};

const Navbar: React.FunctionComponent<Props> = ({
  onClick,
  navbarState,
  children,
}) => {
  return (
    <Wrapper>
      <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={() => { onClick(ele.content); }}
          />
        ))
      }
      {children}
    </Wrapper>
  );
};

export default Navbar;