JSFiddle - React, Tailwind, and code Playground

by Mac1ovin

JavaScript

import React from "react";
import styled, { css } from "styled-components";
 import { Typography } from "#/ui";
 const Wrapper = styled.View`
  height: 29;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding-horizontal: ${p => p.theme.gaps.medium};
  background-color: ${p => p.theme.color.backgroundGrey};
  border-radius: ${p => p.theme.borderRadius.button};
  margin-right: ${p => p.theme.gaps[p.marginRight]};
  margin-bottom: ${p => p.theme.gaps[p.marginBottom]};
  margin-top: ${p => p.theme.gaps[p.marginTop]};
  margin-left: ${p => p.theme.gaps[p.marginLeft]};
`;
 const RubTypography = Typography.extend`
  color: rgba(136, 33, 91, 0.5);
`;
 const UnactiveRub = () => (
  <RubTypography
    color="primary"
    fontWeight="bold"
    atextAlign="center"
    defaultLineHeight
  >
    ₽
  </RubTypography>
);
 const ActiveRub = () => (
  <Typography
    color="primary"
    fontWeight="bold"
    textAlign="center"
    defaultLineHeight
  >
    ₽
  </Typography>
);
const renderCheck = value => {
  const rubSigns = new Array(4).fill(<ActiveRub />);
  return rubSigns.map((item, index) => {
    return value > index ? item : <UnactiveRub />;
  });
};
 export const CheckChip = ({
  marginLeft,
  marginTop,
  marginBottom,
  marginRight,
  value,
}) => (
  <Wrapper
    marginLeft={marginLeft}
    marginTop={marginTop}
    marginBottom={marginBottom}
    marginRight={marginRight}
  >
    {renderCheck(value)}
  </Wrapper>
);
 CheckChip.defaultProps = {
  marginRight: "small",
  marginLeft: "none",
  marginTop: "none",
  marginBottom: "small",
};