'use client'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { AvatarStack } from '@/components/ui/kibo-ui/avatar-stack'; import { Cursor, CursorBody, CursorMessage, CursorName, CursorPointer, } from '@/components/ui/kibo-ui/cursor'; import { cn } from '@/lib/utils'; import Image from 'next/image'; import { useEffect, useState } from 'react'; const users = [ { id: 1, name: 'Hayden Bleasel', avatar: 'https://github.com/haydenbleasel.png', }, { id: 2, name: 'shadcn', avatar: 'https://github.com/shadcn.png', message: 'Can we adjust the color?', }, { id: 3, name: 'Lee Robinson', avatar: 'https://github.com/leerob.png', }, ]; const colors = [ { foreground: 'text-emerald-800', background: 'bg-emerald-50', }, { foreground: 'text-rose-800', background: 'bg-rose-50', }, { foreground: 'text-sky-800', background: 'bg-sky-50', }, ]; // Helper function to generate random position const getRandomPosition = () => ({ x: Math.floor(Math.random() * 80) + 10, // Keep within 10-90% range y: Math.floor(Math.random() * 80) + 10, // Keep within 10-90% range }); const Example = () => { const [user1Position, setUser1Position] = useState({ x: 10, y: 8, }); const [user2Position, setUser2Position] = useState({ x: 30, y: 40, }); const [user3Position, setUser3Position] = useState({ x: 70, y: 50, }); // Store all user positions in a single array for easier access const userPositions = [user1Position, user2Position, user3Position]; // Create separate useEffects for each user to move at different intervals useEffect(() => { const interval = setInterval( () => { setUser1Position(getRandomPosition()); }, Math.random() * 3000 + 2000 ); // Random interval between 2-5 seconds return () => clearInterval(interval); }, []); useEffect(() => { const interval = setInterval( () => { setUser2Position(getRandomPosition()); }, Math.random() * 4000 + 3000 ); // Random interval between 3-7 seconds return () => clearInterval(interval); }, []); useEffect(() => { const interval = setInterval( () => { setUser3Position(getRandomPosition()); }, Math.random() * 2500 + 1500 ); // Random interval between 1.5-4 seconds return () => clearInterval(interval); }, []); // Assign positions to users const usersWithPositions = users.map((user, index) => ({ ...user, position: userPositions[index], })); return (

{usersWithPositions.map((user) => ( {user.name.slice(0, 2)} ))}

{usersWithPositions.map((user, index) => (

{user.name}

{user.message && {user.message}} ))}

); }; export default Example;

Collaborative Canvas