maher
33 lines
684 B
TypeScript
Executable File
33 lines
684 B
TypeScript
Executable File
import {ReactNode} from 'react';
|
|
import clsx from 'clsx';
|
|
|
|
export interface BadgeProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
withBorder?: boolean;
|
|
top?: string;
|
|
right?: string;
|
|
}
|
|
export function Badge({
|
|
children,
|
|
className,
|
|
withBorder = true,
|
|
top = 'top-2',
|
|
right = 'right-4',
|
|
}: BadgeProps) {
|
|
return (
|
|
<span
|
|
className={clsx(
|
|
'absolute flex items-center justify-center whitespace-nowrap rounded-full bg-warning text-xs font-bold text-white shadow',
|
|
withBorder && 'border-2 border-white',
|
|
children ? 'h-18 w-18' : 'h-12 w-12',
|
|
className,
|
|
top,
|
|
right
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|