GitFOSS

import Color from "color";
import styled, { css } from "styled-components";

export const Chip = styled.div<{ color?: string }>`
  ${({ color = undefined }) => css`
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;

    padding: 3px 8px;
    font-size: 14px;
    line-height: 14px;

    font-weight: bold;
    text-transform: uppercase;

    color: ${color ? Color(color).alpha(1).toString() : "black"};
    background-color: ${color
      ? Color(color).alpha(0.3).toString()
      : "rgba(0, 0, 0, 0.3)"};
    border-radius: 8px;
  `};
`;