Dither Badge

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type DitherBadgeProps = {  children?: ReactNode  icon?: ReactNode  as?: 'span' | 'button' | 'a'  href?: string  type?: 'button' | 'submit' | 'reset'  disabled?: boolean  tone?: DitherBadgeTone  inks?: DitherBadgeInks  iconInks?: DitherBadgeInks  labelColor?: string  size?: DitherBadgeSize  iconSide?: 'start' | 'end'  dot?: number  shimmer?: boolean  sway?: boolean  iconFill?: boolean  style?: CSSProperties  className?: string}export function DitherBadge({  children,  icon,  as = 'span',  href,  type = 'button',  disabled,  tone = 'bubblegum',  inks,  iconInks,  labelColor,  size = 'md',  iconSide = 'end',  dot = 2,  shimmer = true,  sway = true,  iconFill = false,  style,  className,}: DitherBadgeProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}