feat: liveblocks intergration, and custom cursor

package.json

@@ -77,6 +77,7 @@
     "nextjs-progressbar": "^0.0.16",
     "node-fetch": "^3.3.2",
     "react": "^18.3.1",
+    "react-animated-cursor": "^2.11.2",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-icons": "^5.3.0",

src/app/_components/liveblocks/Cursor.tsx

@@ -1,43 +1,50 @@
-import React from 'react';
+import React from "react";
 
 type Props = {
   color: string;
   x: number;
   y: number;
-  message?: string;
 };
 
-export default function Cursor({ color, x, y, message }: Props) {
+
+export default function Cursor({ color, x, y }: Props) {
   return (
-    <div
-      className="pointer-events-none absolute top-0 left-0"
-      style={{
-        transform: `translateX(${x}px) translateY(${y}px)`,
-      }}
-    >
       <svg
-        className="relative"
-        width="24"
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          transform: `translateX(${x}px) translateY(${y}px)`,
+        }}
+        width="32"
         height="36"
-        viewBox="0 0 24 36"
-        fill="none"
-        stroke="white"
-        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 32 36"
+        fill={color}        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
-          fill={color}
-        />
+        <g filter="url(#filter0_d_2913_90)">
+          <path d="M10.6978 10.9458C10.6978 8.53665 11.9024 6.85028 13.4683 6.60934C14.6729 6.97074 14.7934 8.05485 14.9138 9.13894C14.9826 9.75807 15.0348 10.464 15.0348 11.1867C15.0343 13.5959 14.0706 14.6522 12.6251 14.3186C11.0592 13.9572 10.6978 12.5118 10.6978 10.9458Z" fill={color} />
+          <path d="M14.4364 4.68203L13.9546 2.63426C13.8605 2.39905 13.8342 2.15244 13.7137 2.03198C13.6667 1.98267 13.6403 1.99658 13.5932 2.03198C13.5932 2.03198 13.4728 2.15244 13.3523 2.63426L12.8705 4.68203C12.75 5.0434 12.75 5.40477 12.8705 5.52523C13.1114 6.00706 14.0751 6.12751 14.4364 5.52523C14.5305 5.36841 14.5548 4.98663 14.4364 4.68203Z" fill={color} />
+          <path d="M16.9616 10.8253C17.2025 8.65713 16.9616 6.85028 18.648 6.60934C19.469 6.60934 20.5798 7.57302 21.0571 9.37988C21.2568 10.1356 21.2529 10.1636 21.298 11.0663C21.4185 13.4754 19.8421 14.6381 18.648 14.4391C17.2025 14.1982 16.8411 11.9095 16.9616 10.8253Z" fill={color} />
+          <path d="M19.1298 4.68203L18.648 2.63426C18.5539 2.39905 18.5275 2.15244 18.4071 2.03198C18.36 1.98267 18.3337 1.99658 18.2866 2.03198C18.2866 2.03198 18.1662 2.15244 18.0457 2.63426L17.5639 4.68203C17.4434 5.0434 17.4434 5.40477 17.5639 5.52523C17.8048 6.00706 18.7684 6.12751 19.1298 5.52523C19.2239 5.36841 19.2481 4.98663 19.1298 4.68203Z" fill={color} />
+          <path d="M21.539 15.6436C22.2617 13.355 22.2617 11.4276 23.8276 11.3072C24.6486 11.3072 25.3981 12.0299 25.8754 13.8368C26.0345 14.4391 25.9959 14.9209 25.9959 15.6436C25.8754 17.9323 24.4299 19.35 22.9844 19.0164C21.4185 18.6551 21.4185 16.9687 21.539 15.6436Z" fill={color} />
+          <path d="M24.5789 9.29242L24.0971 7.24465C24.003 7.00944 23.9766 6.76283 23.8562 6.64237C23.8092 6.59306 23.7828 6.60697 23.7357 6.64237C23.7357 6.64237 23.6153 6.76283 23.4948 7.24465L23.013 9.29242C22.8925 9.65379 22.8925 10.0152 23.013 10.1356C23.2539 10.6174 24.2176 10.7379 24.5789 10.1356C24.673 9.9788 24.6972 9.59702 24.5789 9.29242Z" fill={color} />
+          <path d="M13.3479 16.2447C14.6729 15.2815 17.2025 15.2815 18.648 16.2447C19.0829 16.5346 19.8526 17.3294 20.4548 18.5334C22.0208 20.8226 23.3458 21.7863 23.2254 23.4722C23.2254 24.4363 22.5026 25.7614 20.8162 25.8813C19.6116 25.967 17.4434 25.0386 15.9979 24.9177C14.3115 25.0386 12.8661 25.8813 10.9387 25.8813C9.73417 25.8813 8.77051 24.5567 8.77051 23.4722C8.77051 21.921 9.67708 20.8125 11.4906 18.595L11.541 18.5334C11.9992 17.6813 12.284 17.1987 13.3479 16.2447Z" fill={color} />
+          <path d="M8.16823 11.3065C6.60229 11.6678 6 13.1133 6 15.5224C6.12046 17.4498 6.8432 18.6543 8.40914 19.0157C9.85463 19.3493 10.6978 18.052 10.4569 15.7634C10.3596 15.0653 10.2546 14.6792 10.0955 14.077C9.61825 12.2701 8.98923 11.3065 8.16823 11.3065Z" fill={color} />
+          <path d="M8.5296 7.33138L9.01143 9.37914C9.12975 9.68375 9.10552 10.0655 9.01143 10.2223C8.65006 10.8246 7.6864 10.7042 7.44548 10.2223C7.32503 10.1019 7.32503 9.74052 7.44548 9.37914L7.92731 7.33138C8.04777 6.84955 8.16823 6.7291 8.16823 6.7291C8.2153 6.6937 8.24165 6.67979 8.28868 6.7291C8.40914 6.84955 8.43552 7.09617 8.5296 7.33138Z" fill={color} />
+        </g>
+        <defs>
+          <filter id="filter0_d_2913_90" x="0" y="0" width="32" height="35.8867" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="3" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2913_90" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2913_90" result="shape" />
+          </filter>
+        </defs>
       </svg>
 
-      {message && (
-        <div
-          className="absolute top-5 left-2 rounded-3xl px-4 py-2"
-          style={{ backgroundColor: color, borderRadius: 20 }}
-        >
-          <p className="whitespace-nowrap text-sm leading-relaxed text-white">{message}</p>
-        </div>
-      )}
-    </div>
   );
 }

src/app/_components/liveblocks/index.ts

@@ -1,3 +1 @@
 export * from './Cursor';
-export * from './FlyingReaction';
-export * from './ReactionSelector';