Realtime Cursor

1import { MousePointer2 } from 'lucide-react'
2 
3import { cn } from '@/lib/utils'
4 
5export const Cursor = ({
6  className,
7  style,
8  color,
9  name,
10}: {
11  className?: string
12  style?: React.CSSProperties
13  color: string
14  name: string
15}) => {
16  return (
17    <div className={cn('pointer-events-none', className)} style={style}>
18      <MousePointer2 color={color} fill={color} size={30} />
19 
20      <div
21        className="mt-1 px-2 py-1 rounded-sm text-xs font-bold text-white text-center"
22        style={{ backgroundColor: color }}
23      >
24        {name}
25      </div>
26    </div>
27  )
28}