src/components/tag.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTag } from '@fortawesome/free-solid-svg-icons/faTag'
import { css } from '@emotion/core'
import { margins, colours } from './globals'

const tagIconStyle = css`
  margin-right: ${margins.xsm}px;
`

export const Tag = p => {
  const tagStyle = css`
    margin: ${margins.sm}px 0;
    padding: ${margins.xsm}px;
    border-radius: 5px;
    color: ${colours.background};
    background: ${colours.main};
    ${p.fontSize ? `font-size: ${p.fontSize}` : ''};
    line-height: 1.5em;
  `
  return (
    <div css={tagStyle}>
      <FontAwesomeIcon icon={faTag} css={tagIconStyle} />
      {p.children}
    </div>
  )
}