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 | 1x 1x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 60x 188x 188x 188x 188x 248x 248x 248x 247x 247x 247x 247x 247x 247x 247x 247x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 60x 188x 248x 248x 248x 248x 248x | import { ReactNode } from 'react';
// Utils
import { combineClasses } from '@shared/utils';
interface CommentStatCardProps {
count: number;
label: string;
icon: ReactNode;
iconBgClassName: string;
iconColorClassName: string;
countClassName: string;
activeBgClassName: string;
hoverBorderClassName?: string;
isActive?: boolean;
onClick?: () => void;
className?: string;
}
export const CommentStatCard = ({
count = 0,
label,
icon,
iconBgClassName,
iconColorClassName,
countClassName,
activeBgClassName,
hoverBorderClassName,
isActive = false,
onClick,
className,
}: CommentStatCardProps) => (
<div
onClick={onClick}
className={combineClasses(
'flex items-center h-20 border rounded-lg pl-5.5 pr-4 gap-3.5 cursor-pointer',
isActive
? combineClasses(activeBgClassName, 'border-transparent')
: combineClasses(
'bg-white dark:bg-gray-800 border-border-500 dark:border-white/10',
hoverBorderClassName,
),
className,
)}
>
{icon && (
<div
className={combineClasses(
'shrink-0 size-10 rounded-full flex items-center justify-center',
iconBgClassName,
iconColorClassName,
)}
>
{icon}
</div>
)}
<div className="flex flex-col min-w-0">
<span
className={combineClasses(
'text-3.5xl font-semibold leading-md',
isActive ? 'text-white dark:text-white' : countClassName,
)}
>
{count}
</span>
<span
className={combineClasses(
'text-3xs font-medium leading-[12px] mt-1 whitespace-nowrap',
isActive
? 'text-white dark:text-white'
: 'text-muted-foreground dark:text-background',
)}
>
{label}
</span>
</div>
</div>
);
|