| // src/components/threads/ThreadBadge.tsx | |
| interface ThreadBadgeProps { | |
| /** Number of threads/replies to display */ | |
| count: number; | |
| /** Maximum number before showing "max+" (default 99) */ | |
| max?: number; | |
| /** Visual variant */ | |
| variant?: "default" | "primary" | "secondary" | "destructive"; | |
| /** Size of the badge */ | |
| size?: "sm" | "md"; | |
| /** Optional tooltip text (appears on hover) */ | |
| tooltip?: string; | |
| /** Additional CSS classes */ | |
| className?: string; | |
| } | |
| const variantClasses = { | |
| default: "bg-gray-500 text-white", | |
| primary: "bg-primary text-white", | |
| secondary: "bg-secondary text-white", | |
| destructive: "bg-red-500 text-white", | |
| }; | |
| const sizeClasses = { | |
| sm: "min-w-[18px] h-4 text-[10px] px-1", | |
| md: "min-w-[20px] h-5 text-[10px] px-1.5", | |
| }; | |
| export function ThreadBadge({ | |
| count, | |
| max = 99, | |
| variant = "default", | |
| size = "md", | |
| tooltip, | |
| className = "", | |
| }: ThreadBadgeProps) { | |
| if (count <= 0) return null; | |
| const displayCount = count > max ? `${max}+` : count; | |
| const badgeClasses = `inline-flex items-center justify-center rounded-full font-bold leading-none ${variantClasses[variant]} ${sizeClasses[size]} ${className}`; | |
| return ( | |
| <span | |
| className={badgeClasses} | |
| aria-label={`${count} threads`} | |
| title={tooltip} | |
| > | |
| {displayCount} | |
| </span> | |
| ); | |
| } |
Xet Storage Details
- Size:
- 1.32 kB
- Xet hash:
- 3c7b032ca7a9b94704d5fffbb1772dbdc3901c10ab0a530c64eb3a0b39c7fa08
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.