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 91 92 93 94 95 96 97 98 99 100 101 102 103 | 1x 1x 1x 1x 1x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 4x 4x 4x 3x 1x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 10x 10x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x | // Constants
import { legendBoxColorVariants } from '@/constants';
// Types
import { ChartKey } from '@/types';
// Utils
import { combineClasses } from '@shared/utils';
// Components
import { LegendBox } from '../LegendBox';
import {
ChartIcon,
LikedIcon,
DislikedIcon,
DecreaseIcon,
IncreaseIcon,
FoodCoverIcon,
} from '../icons/reacts';
interface ComparisonBoxesProps {
resultTotal: string;
resultAvg: string;
mode: ChartKey;
colorVariant: keyof typeof legendBoxColorVariants;
changeNumber?: number;
isIncrease?: boolean;
}
export const ComparisonBoxes = ({
resultTotal,
resultAvg,
mode,
colorVariant,
changeNumber = 0,
isIncrease,
}: ComparisonBoxesProps) => {
const variant =
legendBoxColorVariants[colorVariant] || legendBoxColorVariants.default;
const iconColor = variant.title.md;
// const getModeIcon = () => {
// const modeIcons = {
// [ChartKey.LIKE]: (
// <LikedIcon width={22} height={24} className={iconColor} />
// ),
// [ChartKey.DISLIKE]: <DislikedIcon className={iconColor} />,
// [ChartKey.SLOT]: <FoodCoverIcon className={iconColor} />,
// };
// return modeIcons[mode] ?? <FoodCoverIcon className={iconColor} />;
// };
const renderExtra = () => {
if (!changeNumber || changeNumber <= 0) return;
return (
<div className="flex gap-1 items-center">
{isIncrease ? (
<IncreaseIcon className="text-primary-450" />
) : (
<DecreaseIcon className="text-secondary-650" />
)}
<p
data-testid="comparison-change-number"
className={combineClasses(
'font-semibold text-4xs leading-none',
isIncrease ? 'text-primary-450' : 'text-secondary-650',
)}
>
{changeNumber}%
</p>
</div>
);
};
const getTitleClass = () => {
return variant?.title?.md ?? '';
};
return (
<div data-testid="comparison-boxes" className="flex gap-2.75">
<LegendBox
// icon={getModeIcon()}
id="legend-box-total"
title="Total:"
result={resultTotal}
colorVariant={colorVariant}
extra={renderExtra()}
titleClassName={getTitleClass()}
resultClassName="text-frost-900"
/>
<LegendBox
// icon={<ChartIcon className={iconColor} />}
id="legend-box-total"
title="Avg:"
result={resultAvg}
colorVariant={colorVariant}
titleClassName={getTitleClass()}
resultClassName="text-frost-900"
/>
</div>
);
};
|