Badges

import React, { HTMLAttributes } from "react"
import { cva, type VariantProps } from "class-variance-authority"

import Label from "@/shared/typography/Label"

import { cn } from "@/lib/cn"

const badgeVariants = cva(
  "absolute left-2/3 top-1 select-none flex justify-center items-center bg-error text-onError rounded-full",
  {
    variants: {
      size: {
        small: "w-[6px] h-[6px]",
        large: "min-w-[16px] h-[16px] p-1",
      },
    },
  }
)

interface Props
  extends HTMLAttributes<HTMLDivElement>,
    Required<Pick<VariantProps<typeof badgeVariants>, "size">> {}

const Badge = React.forwardRef<HTMLDivElement, Props>(
  ({ children, className, size, ...props }, forwardedRef) => {
    return (
      <div
        className={cn(badgeVariants({ size }), className)}
        {...props}
        ref={forwardedRef}
      >
        {size === "large" && <Label size="small">{children}</Label>}
      </div>
    )
  }
)
Badge.displayName = "Badge"

export default Badge

<div className="flex gap-4">
  <div className="relative">
    <IconButton appearance="tonal" icon={<Message />} />
    <Badge className="top-2" size="small" />
  </div>
  <div className="relative">
    <IconButton appearance="tonal" icon={<Cart />} />
    <Badge size="large">11</Badge>
  </div>
</div>