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 | 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>
);
|