first commit

common/resources/client/ui/badge/badge.tsx

@@ -0,0 +1,32 @@
+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>
+  );
+}