Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x 1x | import { combineClasses } from '@shared/utils';
interface LocationLegendItem {
id: string;
color: string;
location: string;
}
interface LocationLegendProps {
data: LocationLegendItem[];
className?: string;
}
export const LocationLegend = ({ data, className }: LocationLegendProps) => {
return (
<ul
className={combineClasses(
'grid gap-x-10 gap-y-4 max-w-[612px] mx-auto',
'grid-cols-[repeat(2,max-content)]',
'justify-center',
'sm:flex sm:justify-between sm:gap-10 sm:grid-cols-none',
className,
)}
>
{data.map((item) => (
<li key={item.id} className="flex gap-2.75 items-center">
<span
className={combineClasses(
'w-2.75 h-2.75 rounded-[2px] shrink-0',
item.color,
)}
/>
<span className="font-medium text-3xs leading-3 text-frost-900">
{item.location}
</span>
</li>
))}
</ul>
);
};
|