aura-glass/dist/esm/components/collaboration/GlassCollaborativeCursor.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { useCollaboration } from './GlassCollaborationProvider.js';
import { cn } from '../../lib/utilsComprehensive.js';

const CursorIcon = ({
  color,
  name
}) => jsxs("div", {
  className: 'relative',
  children: [jsx("svg", {
    width: "24",
    height: "24",
    viewBox: "0 0 24 24",
    fill: "none",
    className: 'drop-shadow-sm',
    children: jsx("path", {
      d: "M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z",
      fill: color,
      stroke: "white",
      strokeWidth: "1"
    })
  }), jsx("div", {
    className: 'absolute left-6 glass-top-1 glass-px-2 glass-py-1 glass-radius text-primary glass-text-xs font-medium whitespace-nowrap pointer-events-none select-none',
    style: {
      backgroundColor: color
    },
    children: name
  })]
});
const GlassCollaborativeCursor = ({
  className
}) => {
  const {
    users,
    currentUser,
    showCursors
  } = useCollaboration();
  const [visibleCursors, setVisibleCursors] = useState([]);
  useEffect(() => {
    if (!showCursors) {
      setVisibleCursors([]);
      return;
    }
    // Filter out current user and users without cursor data
    const otherUsers = users.filter(user => user.id !== currentUser?.id && user.cursor && Date.now() - user.lastActive < 30000 // Show cursor for 30 seconds after last activity
    );
    setVisibleCursors(otherUsers);
  }, [users, currentUser, showCursors]);
  const isEmpty = !showCursors || visibleCursors.length === 0;
  return jsx("div", {
    "data-glass-component": true,
    className: cn("fixed inset-0 pointer-events-none z-50", className),
    "data-empty": isEmpty || undefined,
    "aria-hidden": isEmpty || undefined,
    children: !isEmpty && visibleCursors.map(user => {
      if (!user.cursor) return null;
      return jsx("div", {
        className: 'absolute transition-all duration-100 ease-out',
        style: {
          left: user.cursor.x,
          top: user.cursor.y,
          transform: "translate(-2px, -2px)"
        },
        children: jsx(CursorIcon, {
          color: user.color,
          name: user.name
        })
      }, user.id);
    })
  });
};

export { GlassCollaborativeCursor };
//# sourceMappingURL=GlassCollaborativeCursor.js.map