@while-and-for/tremor-react
Version:
The React library to build dashboards faster.
2 lines (1 loc) • 1.25 kB
JavaScript
import{__rest as e}from"tslib";import t from"react";import{sizing as r}from"../../../lib/sizing.js";import{spacing as o}from"../../../lib/spacing.js";import{colorPalette as a,themeColorRange as m}from"../../../lib/theme.js";import{makeClassName as l,getColorClassNames as n}from"../../../lib/utils.js";import{tremorTwMerge as c}from"../../../lib/tremorTwMerge.js";const i=l("Legend"),s=({name:e,color:m})=>t.createElement("li",{className:c(i("legendItem"),"inline-flex items-center truncate","text-tremor-content","dark:text-dark-tremor-content",o.md.marginRight)},t.createElement("svg",{className:c("flex-none",n(m,a.text).textColor,r.xs.height,r.xs.width,o.xs.marginRight),fill:"currentColor",viewBox:"0 0 8 8"},t.createElement("circle",{cx:4,cy:4,r:4})),t.createElement("p",{className:c("whitespace-nowrap truncate text-tremor-default","text-tremor-content","dark:text-dark-tremor-content")},e)),f=t.forwardRef(((r,o)=>{const{categories:a,colors:l=m,className:n}=r,f=e(r,["categories","colors","className"]);return t.createElement("ol",Object.assign({ref:o,className:c(i("root"),"flex flex-wrap overflow-hidden truncate",n)},f),a.map(((e,r)=>t.createElement(s,{key:`item-${r}`,name:e,color:l[r]}))))}));f.displayName="Legend";export{f as default};