mirror of https://github.com/portainer/portainer
46 lines
1014 B
TypeScript
46 lines
1014 B
TypeScript
|
import clsx from 'clsx';
|
||
|
|
|
||
|
|
import { Icon, IconProps } from '@@/Icon';
|
||
|
|
|
||
|
|
export type BadgeSize = 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
||
|
|
|
||
|
|
export interface Props extends IconProps {
|
||
|
|
size?: BadgeSize;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function BadgeIcon({ icon, featherIcon, size = '3xl' }: Props) {
|
||
|
|
const sizeClasses = iconSizeToClasses(size);
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={clsx(
|
||
|
|
sizeClasses,
|
||
|
|
`badge-icon
|
||
|
|
bg-blue-3 text-blue-8
|
||
|
|
th-dark:bg-gray-9 th-dark:text-blue-3
|
||
|
|
rounded-full
|
||
|
|
inline-flex items-center justify-center
|
||
|
|
`
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon icon={icon} feather={featherIcon} className="feather !flex" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function iconSizeToClasses(size: BadgeSize) {
|
||
|
|
switch (size) {
|
||
|
|
case 'md':
|
||
|
|
return 'h-6 w-6 text-md';
|
||
|
|
case 'lg':
|
||
|
|
return 'h-8 w-8 text-lg';
|
||
|
|
case 'xl':
|
||
|
|
return 'h-10 w-10 text-xl';
|
||
|
|
case '2xl':
|
||
|
|
return 'h-12 w-12 text-2xl';
|
||
|
|
case '3xl':
|
||
|
|
return 'h-14 w-14 text-3xl';
|
||
|
|
default:
|
||
|
|
return 'h-14 w-14 text-3xl';
|
||
|
|
}
|
||
|
|
}
|