DotLine

dotline.ts

export const DotLine = styled.div<{ size: number, count: number, distance: number }>`
  background: black;
  width: ${({ size }) => `${size}px`};
  height: ${({ size }) => `${size}px`};
  opacity: 0.65;
  
  border-radius: ${({ size }) => `${size / 2}px`};
  box-shadow: ${({ count, distance }) => count === 1 ? 'none' : Array(count-1).fill(1).map((_, i) => `0 ${(i+1) * distance}px`).join(', ')};
  margin-top: ${({ distance, size }) => `${distance * -(size + size/2)}px`};

  &:not(:last-child) {
    margin-right:  ${({ size }) => `${size + size / 2}px`};
  }
`;