Realtime Cursor for Nuxt and Supabase

1<script setup lang="ts">
2import { MousePointer2 } from 'lucide-vue-next'
3import type { CSSProperties } from 'vue'
4// @ts-ignore
5import { cn } from '@/lib/utils'
6 
7defineProps<{
8  className?: string
9  style?: CSSProperties
10  color: string
11  name: string
12}>()
13</script>
14 
15<template>
16  <div
17    :class="cn('pointer-events-none', className)"
18    :style="style"
19  >
20    <MousePointer2
21      :color="color"
22      :fill="color"
23      :size="30"
24    />
25 
26    <div
27      class="mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center"
28      :style="{ backgroundColor: color }"
29    >
30      {{ name }}
31    </div>
32  </div>
33</template>