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

import React from 'react';

import Icon from '../Icon';
import Typography from '../Typography';
import Search from '../Search';
import Annotations from '../Annotations';
import Thumbnails from '../Thumbnails';

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

type Props = {
  onClick: (state: string) => void;
  navbarState: string;
};

const Navbar: React.FunctionComponent<Props> = ({
  onClick,
  navbarState,
}) => {
  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); }}
          />
        ))
      }
      <Search isActive={navbarState === 'search'} close={() => { onClick(''); }} />
      <Annotations isActive={navbarState === 'annotation'} />
      <Thumbnails isActive={navbarState === 'thumbnail'} />
    </Wrapper>
  );
};

export default Navbar;