phx-react
Version:
PHX REACT
27 lines • 1.08 kB
JavaScript
import React from 'react';
import { PHXHorizontalStack } from '../HorizontalStack';
import { PHXTextV2 } from '../TextV2';
export const PHXLegend = ({ children }) => {
return (React.createElement(PHXHorizontalStack, { gapX: 'loose', gapY: 'loose', items: 'start' }, children));
};
const Item = ({ color, label }) => {
const colorMap = {
default: 'bg-gray-800',
subdued: 'bg-gray-500',
critical: 'bg-red-600',
success: 'bg-emerald-600',
primary: 'bg-gray-900',
warning: 'bg-[#FFD6A4]',
info: 'bg-[#91D0FF]',
highlight: 'bg-[#89F5B5]',
neutral: 'bg-[#F0F0F0]',
attention: 'bg-[#FFEF9D]',
decorative: 'bg-[#F8D1FF]',
danger: 'bg-[#FFC1BF]',
};
return (React.createElement(PHXHorizontalStack, { gapX: 'atomic', justify: 'center', items: 'center' },
React.createElement("div", { className: `w-3 h-3 rounded-sm ${colorMap[color]}` }),
React.createElement(PHXTextV2, { size: 'micro' }, label)));
};
PHXLegend.Item = Item;
//# sourceMappingURL=Legend.js.map