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

import React from 'react';

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

import { Group, Item, Circle } from '../../global/toolStyled';

import data from './data';

const ColorSelect = () => {
  return (
    <>
      <Typography variant="subtitle" style={{marginTop: '8px'}}>Color</Typography>
      <Group>
        {data.map((ele) => (
          <Item key={ele.key}>
            <Circle color={ele.color} />
          </Item>
        ))}
        <Item>
          <Icon glyph="color-picker" />
        </Item>
      </Group>
    </>
  );
};

export default ColorSelect;