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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 5x 5x 5x 5x 5x 5x 33x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 1x | import { memo, ReactNode } from 'react';
// Components
import { Tooltip } from '@shared/ui';
// Utils
import { combineClasses } from '@shared/utils';
interface LabelFilterProps {
icon: ReactNode;
label?: string;
selected?: boolean;
variant?: 'default' | 'primary' | 'secondary' | 'danger';
className?: string;
gapSize?: 'sm' | 'md';
tooltipContent?: string;
}
const variants: Record<NonNullable<LabelFilterProps['variant']>, string> = {
default: 'text-gray-400',
primary: 'text-secondary-150',
secondary: 'text-secondary-200',
danger: 'text-primary-350',
};
const gaps: Record<NonNullable<LabelFilterProps['gapSize']>, string> = {
sm: 'gap-[7px]',
md: 'gap-2.5',
};
export const FilterLabel = memo(
({
icon,
label,
selected = false,
variant = 'default',
gapSize = 'sm',
className = '',
tooltipContent = '',
}: LabelFilterProps) => {
const colorClass = selected ? variants[variant] : variants.default;
const fontWeight = selected ? 'font-semibold' : 'font-medium';
return (
<div
className={combineClasses(
'flex items-center cursor-pointer',
gaps[gapSize],
className,
)}
>
{icon && (
<>
{tooltipContent ? (
<Tooltip
content={tooltipContent}
className="bg-frost-900 capitalize"
arrowClassName="border-frost-900"
>
<span className={combineClasses(colorClass)}>{icon}</span>
</Tooltip>
) : (
<span className={combineClasses(colorClass)}>{icon}</span>
)}
</>
)}
{label && (
<span
className={combineClasses(
'text-4xs leading-4 capitalize mt-2',
fontWeight,
colorClass,
)}
>
{label}
</span>
)}
</div>
);
},
);
|