Initial commit of my folder

frontend/src/components/VirtualCanvas.jsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+const VirtualCanvas = ({ surfaces, onVertexMove, onSurfaceSelect }) => {
+  return (
+    <div className="relative w-full aspect-video bg-gray-900 border-2 border-gray-700 rounded-lg overflow-hidden cursor-crosshair">
+      <svg
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none"
+        className="w-full h-full"
+      >
+        {surfaces.map((surface, sIndex) => (
+          <g key={sIndex} onClick={() => onSurfaceSelect(sIndex)}>
+            <polygon
+              points={surface.vertices.map(v => `${v.x * 100},${v.y * 100}`).join(' ')}
+              className={`${
+                surface.selected ? 'fill-blue-500/50 stroke-blue-400' : 'fill-white/20 stroke-white/50'
+              } stroke-1 transition-colors duration-200`}
+            />
+            {surface.selected && surface.vertices.map((v, vIndex) => (
+              <circle
+                key={vIndex}
+                cx={v.x * 100}
+                cy={v.y * 100}
+                r="1.5"
+                className="fill-blue-400 stroke-white stroke-[0.2] hover:fill-blue-200 cursor-move"
+                onMouseDown={(e) => onVertexMove(e, sIndex, vIndex)}
+              />
+            ))}
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+};
+
+export default VirtualCanvas;