30 lines
600 B
TypeScript
30 lines
600 B
TypeScript
import type { HTMLAttributes, ReactNode } from "react";
|
|
|
|
export type CountBadgeProps = HTMLAttributes<HTMLSpanElement> & {
|
|
children: ReactNode;
|
|
tone?: "accent" | "neutral" | "danger";
|
|
size?: "compact" | "default";
|
|
};
|
|
|
|
export default function CountBadge({
|
|
children,
|
|
tone = "accent",
|
|
size = "default",
|
|
className = "",
|
|
...props
|
|
}: CountBadgeProps) {
|
|
return (
|
|
<span
|
|
{...props}
|
|
className={[
|
|
"count-badge",
|
|
`count-badge-${tone}`,
|
|
`count-badge-${size}`,
|
|
className
|
|
].filter(Boolean).join(" ")}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|