diff --git a/package.json b/package.json
index 02f2c2e..847c3fb 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"prettier": "^3.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-flow-renderer": "^10.3.17",
"react-hot-toast": "^2.4.0",
"react-icons": "^4.7.1",
"react-json-pretty": "^2.2.0",
@@ -29,7 +30,8 @@
"react-syntax-highlighter": "^15.5.0",
"react-transition-group": "^4.4.5",
"remark-gfm": "^4.0.0",
- "sonner": "^1.5.0"
+ "sonner": "^1.5.0",
+ "uuid": "^10.0.0"
},
"devDependencies": {
"@types/react": "^18.0.26",
diff --git a/src/index.css b/src/index.css
index e4d6a2e..108a604 100644
--- a/src/index.css
+++ b/src/index.css
@@ -169,9 +169,9 @@ html {
.white {
max-height: 63px;
- max-width: 307px;
+ max-width: 507px;
border-radius: 10px;
- filter: blur(2px);
+ filter: blur(3px);
}
.white::before {
@@ -452,4 +452,148 @@ html {
max-height: 130px;
max-width: 340px;
}
+}
+
+
+
+/*# sourceMappingURL=index.css.map */
+.loader svg {
+ display: inline-block;
+ width: 64px;
+ height: 64px;
+}
+
+.inline-block {
+ display: inline-block;
+}
+
+.loader {
+ display: flex;
+ margin: 0.25em 0;
+}
+
+.w-2 {
+ width: 0.5em;
+}
+
+.dash {
+ animation: dashArray 2s ease-in-out infinite,
+ dashOffset 2s linear infinite;
+}
+
+.spin {
+ animation: spinDashArray 2s ease-in-out infinite,
+ spin 8s ease-in-out infinite,
+ dashOffset 2s linear infinite;
+ transform-origin: center;
+}
+
+@keyframes dashArray {
+ 0% {
+ stroke-dasharray: 0 1 359 0;
+ }
+
+ 50% {
+ stroke-dasharray: 0 359 1 0;
+ }
+
+ 100% {
+ stroke-dasharray: 359 1 0 0;
+ }
+}
+
+@keyframes spinDashArray {
+ 0% {
+ stroke-dasharray: 270 90;
+ }
+
+ 50% {
+ stroke-dasharray: 0 360;
+ }
+
+ 100% {
+ stroke-dasharray: 270 90;
+ }
+}
+
+@keyframes dashOffset {
+ 0% {
+ stroke-dashoffset: 365;
+ }
+
+ 100% {
+ stroke-dashoffset: 5;
+ }
+}
+
+@keyframes spin {
+ 0% {
+ rotate: 0deg;
+ }
+
+ 12.5%,
+ 25% {
+ rotate: 270deg;
+ }
+
+ 37.5%,
+ 50% {
+ rotate: 540deg;
+ }
+
+ 62.5%,
+ 75% {
+ rotate: 810deg;
+ }
+
+ 87.5%,
+ 100% {
+ rotate: 1080deg;
+ }
+}
+
+/* flow */
+.flow-designer {
+ display: flex;
+ height: 100vh;
+}
+
+.sidebar {
+ width: 200px;
+ background-color: #f0f0f0;
+ padding: 20px;
+}
+
+.action-item {
+ margin-bottom: 10px;
+ padding: 10px;
+ background-color: #ddd;
+ cursor: move;
+}
+
+.canvas {
+ flex-grow: 1;
+ position: relative;
+ background-color: #fff;
+}
+
+.flow-node {
+ position: absolute;
+ padding: 10px;
+ border-radius: 5px;
+ user-select: none;
+}
+
+.action {
+ background-color: #66cc66;
+}
+
+.condition {
+ background-color: #ff9966;
+}
+
+.branch {
+ margin-top: 5px;
+ padding: 5px;
+ background-color: rgba(255, 255, 255, 0.2);
}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 12e590d..fa3447e 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -14,6 +14,7 @@ import DocDetail from "./pages/Doc/single doc";
import Resources from "./pages/Resources";
import DevArea from "./pages/DevArea";
import DevTools from "./pages/DevArea/DevTools";
+import Flow from "./pages/Flow";
const router = createBrowserRouter(
[
@@ -45,6 +46,10 @@ const router = createBrowserRouter(
path: '/contributors',
element:
},
+ {
+ path: '/flow',
+ element:
+ },
{
path: '*',
element:
diff --git a/src/pages/Doc/single doc/index.jsx b/src/pages/Doc/single doc/index.jsx
index 402cfde..e818450 100644
--- a/src/pages/Doc/single doc/index.jsx
+++ b/src/pages/Doc/single doc/index.jsx
@@ -30,7 +30,7 @@ const DocDetail = () => {
const [error, setError] = useState(null);
const [activeSection, setActiveSection] = useState(null);
const [headings, setHeadings] = useState([]);
-
+console.log(content)
useEffect(() => {
const fetchContent = async () => {
try {
@@ -80,8 +80,6 @@ const DocDetail = () => {
}
}, [content]);
- if (loading) return
;
- if (error) return ;
const headingToId = (children) => String(children).toLowerCase().replace(/\s+/g, '-');
return (
diff --git a/src/pages/Flow/index.jsx b/src/pages/Flow/index.jsx
new file mode 100644
index 0000000..7fb23bf
--- /dev/null
+++ b/src/pages/Flow/index.jsx
@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+const EventTransform = ({ id, x, y, label, color }) => (
+
+
+ {label}
+
+);
+
+const Trigger = ({ id, x, y, label, color }) => (
+
+
+ {label}
+
+);
+
+const Connection = ({ startX, startY, endX, endY, gradientId }) => (
+
+);
+
+const Flow = () => {
+ const [nodes, setNodes] = useState([
+ { id: uuidv4(), type: 'eventTransform', x: 100, y: 50, label: 'Event', color: 'red' },
+ { id: uuidv4(), type: 'eventTransform', x: 100, y: 200, label: 'Event', color: 'blue' },
+ { id: uuidv4(), type: 'eventTransform', x: 100, y: 400, label: 'Event', color: 'green' },
+ { id: uuidv4(), type: 'trigger', x: 400, y: 300, label: 'Trigger', color: 'orange' },
+ ]);
+
+ const [connections, setConnections] = useState([]);
+
+ // Dynamically calculate the connections once the nodes are set up
+ useEffect(() => {
+ const newConnections = nodes.slice(0, nodes.length - 1).map((node, index) => ({
+ start: node.id,
+ end: nodes[index + 1].id,
+ gradientId: `grad-${node.id}-${nodes[index + 1].id}`,
+ }));
+
+ setConnections(newConnections); // Update the state with new connections
+ }, [nodes]); // Trigger this effect whenever nodes change
+
+ return (
+
+ );
+};
+
+export default Flow;
diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx
index 794a187..3c8d2a5 100644
--- a/src/pages/Resources.jsx
+++ b/src/pages/Resources.jsx
@@ -57,6 +57,64 @@ const Resources = () => {
return (
+ {/*
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
*/}
+
{