Marc Mintel
103d71851c
Some checks failed
🧪 CI (QA) / 🧪 Quality Assurance (push) Failing after 1m3s
- Restructure to pnpm monorepo (site moved to apps/web) - Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config - Implement Docker service architecture (Varnish, Directus, Gatekeeper) - Setup environment-aware Gitea Actions deployment
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { MousePointer2 } from 'lucide-react';
|
|
|
|
interface MouseCursorProps {
|
|
x: number;
|
|
y: number;
|
|
isClicking?: boolean;
|
|
}
|
|
|
|
export const MouseCursor: React.FC<MouseCursorProps> = ({ x, y, isClicking }) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
transform: `translate3d(${x}px, ${y}px, 0)`,
|
|
zIndex: 1000,
|
|
pointerEvents: 'none',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
transform: isClicking ? 'scale(0.85)' : 'scale(1)',
|
|
}}
|
|
>
|
|
<MousePointer2
|
|
className="text-slate-900 fill-white"
|
|
size={48}
|
|
style={{
|
|
filter: 'drop-shadow(0 8px 16px rgba(0,0,0,0.2))',
|
|
transform: 'rotate(-15deg)'
|
|
}}
|
|
/>
|
|
{isClicking && (
|
|
<div
|
|
className="absolute top-0 left-0 w-12 h-12 border-4 border-slate-400 rounded-full opacity-50"
|
|
style={{ transform: 'scale(1.2)' }}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|