@seasketch/geoprocessing/dist/src/components/Circle.js

Geoprocessing and reporting framework for SeaSketch 2.0

import React from "react";
import { styled } from "styled-components";
/** Default style for Circle */
export const StyledCircle = styled.span `
  background-color: ${(props) => props.color || "#DDD"};
  padding: 3px 5px;
  border-radius: ${(props) => (props.size ? `${props.size}px` : "17px")};
  min-width: ${(props) => (props.size ? `${props.size}px` : "17px")};
  max-width: ${(props) => (props.size ? `${props.size}px` : "17px")};
  height: ${(props) => (props.size ? `${props.size + 4}px` : "21px")};
  display: flex;
  justify-content: center;
  align-items: center;
`;
/** Circle with user-defined component inside */
export const Circle = ({ children, color, size, ariaLabel, }) => {
    return (React.createElement(StyledCircle, { color: color, size: size, "aria-label": ariaLabel || `Circle highlighted with ${color || "#DDD"} color` }, children));
};
/**
 * Circle with user-defined group colors
 */
export const GroupCircle = ({ children, group, groupColorMap, }) => {
    return (React.createElement(Circle, { color: groupColorMap[group], ariaLabel: `Circle highlighted with group ${group} color ${groupColorMap[group]}` }, children));
};
//# sourceMappingURL=Circle.js.map