Merge pull request #17 from AET-DevOps25/15-whiteboard-component-implement

Add initial whiteboard component

Author: ArmanpreetGhotra

client/package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/themes": "^3.2.1",
+    "@xyflow/react": "^12.6.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.509.0",
@@ -21,10 +22,10 @@
     "tailwind-merge": "^3.2.0"
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^5.75.7",
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
     "@tanstack/eslint-plugin-query": "^5.74.7",
+    "@tanstack/react-query-devtools": "^5.75.7",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

client/package.json

@@ -1,5 +1,19 @@
-import { Button } from "@/components/ui/button";
+import React from "react";
+import {
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  Controls,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
 
 export default function Home() {
-  return <Button>Button</Button>;
+  return (
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <ReactFlow fitView>
+        <Controls position="bottom-right" />
+        <Background variant={BackgroundVariant.Dots} gap={16} size={1} />
+      </ReactFlow>
+    </div>
+  );
 }