33 lines
498 B
TypeScript
33 lines
498 B
TypeScript
import { useTheme } from '@emotion/react';
|
|
|
|
import {
|
|
Wrapper,
|
|
Label,
|
|
Bar,
|
|
Grade,
|
|
} from './legendStyle';
|
|
|
|
const Legend = ({
|
|
min,
|
|
max,
|
|
...props
|
|
}) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Wrapper>
|
|
<Label>{min}/{max} available</Label>
|
|
|
|
<Bar>
|
|
{[...Array(max-min+1).keys()].map(i =>
|
|
<Grade key={i} color={`${theme.primary}${Math.round((i/(max-min))*255).toString(16)}`} />
|
|
)}
|
|
</Bar>
|
|
|
|
<Label>{max}/{max} available</Label>
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
export default Legend;
|