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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 9x 8x 8x 8x 8x 14x 14x 14x 14x 14x 4x 10x 10x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 4x 4x 4x 4x 4x 10x 14x 14x 14x 10x 10x 10x 10x 10x 4x 14x 14x 10x 1x 1x 1x 4x 14x 14x 14x 4x 4x 4x 4x 4x 4x 4x 4x 10x 8x 8x 8x | import { combineClasses } from '@shared/utils';
import { getLegendColors } from '@/utils';
import { CloseIcon, ArrowDownIcon, MonthIcon } from '../icons/reacts';
import { LegendBox } from '../LegendBox';
import { Button } from '../common';
export const renderLegendBoxes = <T,>(
items: T[],
formatter: (item: T) => string,
onRemove: (item: T) => void,
toggleCalendarFn: (index: number | null) => void,
) => {
if (!items?.length) return null;
const colors = getLegendColors(items.length);
return (
<div className="flex gap-2.75">
{items.map((item, i) => {
const formatted = formatter(item);
const showIcon = items.length === 1;
const containerClassName = combineClasses(
items.length > 1 ? 'gap-0' : '',
showIcon
? 'px-2.75'
: items.length > 1
? 'px-5 group-hover:px-2.75 transition-all duration-300'
: '',
);
const legendBox = (
<LegendBox
key={i}
id={formatted}
colorVariant={items.length > 1 ? colors[i] : undefined}
borderVariant="md"
sizeVariant="xs"
containerClassName={containerClassName}
icon={
showIcon ? (
<MonthIcon
className="text-primary-550"
width={16.33}
height={18}
/>
) : undefined
}
result={formatted}
extra={
items.length > 1 ? (
<CloseIcon
width={14}
height={14}
className="text-primary-550"
/>
) : (
<ArrowDownIcon className="text-frost-900 dark:text-background" />
)
}
onExtraClick={
items.length > 1
? (e) => {
e.stopPropagation();
onRemove(item);
}
: undefined
}
enableHoverExtra={items.length > 1}
/>
);
if (showIcon) {
return (
<Button
id="calendar-button"
key={i}
onClick={() => toggleCalendarFn(0)}
>
{legendBox}
</Button>
);
}
return legendBox;
})}
</div>
);
};
|