1import { FC } from 'react'
 2import { scaleOrdinal } from '@visx/scale';
 3import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
 4
 5const legendGlyphSize = 15;
 6
 7const ordinalColorScale = scaleOrdinal({
 8    domain: ["Active", "Online", "Expired", "On Hold", "Limited"],
 9    range: ['#3b82f6', '#10b981', '#4b5563', '#A855F7', '#ef4444'],
10});
11
12export const UsersStatsLegend: FC = () => {
13    return (
14        <LegendOrdinal scale={ordinalColorScale}>
15            {(labels) => (
16                <div className="border border-solid border-[rgba(255, 255, 255, 0.3)] rounded-lg flex flex-row flex-wrap md:flex-col h-full p-3">
17                    {labels.map((label, i) => (
18                        <LegendItem
19                            key={`legend-quantile-${i}`}
20                            margin="0 5px"
21                        >
22                            <svg width={legendGlyphSize} height={legendGlyphSize}>
23                                <circle
24                                    className="rounded-full"
25                                    fill={label.value}
26                                    r={legendGlyphSize / 2}
27                                    cx={legendGlyphSize / 2}
28                                    cy={legendGlyphSize / 2}
29                                />
30                            </svg>
31                            <LegendLabel align="left" margin="0 0 0 4px">
32                                {label.text}
33                            </LegendLabel>
34                        </LegendItem>
35                    ))}
36                </div>
37            )}
38        </LegendOrdinal>
39    )
40}