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

Geoprocessing and reporting framework for SeaSketch 2.0

import React from "react";
import { styled } from "styled-components";
export const StyledPill = styled.span `
  background-color: ${(props) => props.color || "#CCC"};
  border-radius: 6px;
  padding: 3px 5px;
`;
export const Pill = ({ children, color, }) => {
    return React.createElement(StyledPill, { color: color }, children);
};
export const PillColumn = ({ children, }) => {
    return (React.createElement("span", { style: { display: "flex" } },
        children,
        React.createElement("span", { style: { flex: 1 } })));
};
/**
 * Pill with colors assigned to each group name
 */
export const GroupPill = ({ group, groupColorMap, children, }) => {
    return (React.createElement(Pill, { color: groupColorMap[group], "aria-label": `Group: ${group}` }, children));
};
export const WarningPill = ({ children, }) => {
    return (React.createElement(Pill, { color: "#FFE1A3", "aria-label": "Warning Highlight" }, children));
};
export const GreenPill = ({ children, }) => {
    return (React.createElement(Pill, { "aria-label": "Green Highlight", color: "#BEE4BE" }, children));
};
//# sourceMappingURL=Pill.js.map