Pill to card

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type PillToCardProps = {  name: string  role?: string  avatar?: ReactNode  children?: ReactNode  open?: boolean  defaultOpen?: boolean  onOpenChange?: (open: boolean) => void  closeLabel?: string  className?: string}export function PillToCard({  name,  role,  avatar,  children,  open,  defaultOpen = false,  onOpenChange,  closeLabel = 'Close profile',  className,}: PillToCardProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}