Skip to content

various changes : #273 #272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devvsakib merged 2 commits into from
Oct 6, 2025
Merged

various changes : #273 #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca1d4bd
minor UI chanegs
devvsakib Aug 12, 2024
b33f3b8
feat: add animated loader to Resources page and update dependencies
devvsakib Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"prettier": "^3.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-flow-renderer": "^10.3.17",
Copy link

@coderabbitai coderabbitai bot Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove unused dependency.

The react-flow-renderer package is added to dependencies but is never imported or used in the codebase. The Flow component at src/pages/Flow/index.jsx implements custom SVG rendering instead of using this library.

Apply this diff to remove the unused dependency:

-    "react-flow-renderer": "^10.3.17",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"react-flow-renderer": "^10.3.17",
🤖 Prompt for AI Agents 
In package.json at line 23, the dependency "react-flow-renderer": "^10.3.17" is
unused; remove that entry from the dependencies object, save package.json, then
run your package manager (npm install or yarn install) to update the lockfile
(package-lock.json or yarn.lock) accordingly; finally run the test/build to
ensure no usages remain and commit both the updated package.json and updated
lockfile.

"react-hot-toast": "^2.4.0",
"react-icons": "^4.7.1",
"react-json-pretty": "^2.2.0",
Expand All @@ -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",
Expand Down
148 changes: 146 additions & 2 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
5 changes: 5 additions & 0 deletions src/main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
[
Expand Down Expand Up @@ -45,6 +46,10 @@ const router = createBrowserRouter(
path: '/contributors',
element: <Contributors />
},
{
path: '/flow',
element: <Flow />
},
{
path: '*',
element: <NotFound />
Expand Down
4 changes: 1 addition & 3 deletions src/pages/Doc/single doc/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const DocDetail = () => {
const [error, setError] = useState(null);
const [activeSection, setActiveSection] = useState(null);
const [headings, setHeadings] = useState([]);

console.log(content)
Copy link

@coderabbitai coderabbitai bot Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove debugging artifact.

The console.log(content) statement appears to be a debugging artifact that should be removed before merging to production.

Apply this diff to remove the console.log:

-console.log(content)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
console.log(content)
🤖 Prompt for AI Agents 
In src/pages/Doc/single doc/index.jsx around line 33 there is a leftover
debugging statement `console.log(content)`; remove that line from the file so no
console logging of content remains in production.

useEffect(() => {
const fetchContent = async () => {
try {
Expand Down Expand Up @@ -80,8 +80,6 @@ const DocDetail = () => {
}
}, [content]);

if (loading) return <div className="flex justify-center items-center h-screen"><Spin size="large" /></div>;
if (error) return <Alert message="Error" description={error} type="error" />;
const headingToId = (children) => String(children).toLowerCase().replace(/\s+/g, '-');
return (
<Layout>
Expand Down
89 changes: 89 additions & 0 deletions src/pages/Flow/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React, { useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';

const EventTransform = ({ id, x, y, label, color }) => (
<g transform={`translate(${x},${y})`} id={id}>
<rect width="120" height="60" rx="5" fill={color} />
<text x="60" y="30" textAnchor="middle" fill="white">{label}</text>
</g>
);

const Trigger = ({ id, x, y, label, color }) => (
<g transform={`translate(${x},${y})`} id={id}>
<rect width="120" height="60" rx="5" fill={color} />
<text x="60" y="30" textAnchor="middle" fill="white">{label}</text>
</g>
);

const Connection = ({ startX, startY, endX, endY, gradientId }) => (
<path
d={`M${startX},${startY} C${(startX + endX) / 2},${startY} ${(startX + endX) / 2},${endY} ${endX},${endY}`}
fill="none"
stroke={`url(#${gradientId})`}
strokeWidth="2"
/>
);

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 (
<svg width="800" height="600" style={{ background: '#333' }}>
{/* Render nodes */}
{nodes.map(node =>
node.type === 'eventTransform'
? <EventTransform key={node.id} {...node} />
: <Trigger key={node.id} {...node} />
)}
<defs>
{connections.map(conn => {
const startNode = nodes.find(n => n.id === conn.start);
const endNode = nodes.find(n => n.id === conn.end);

return (
<linearGradient key={conn.gradientId} id={conn.gradientId}>
<stop offset="0%" stopColor={startNode.color} />
<stop offset="100%" stopColor={endNode.color} />
</linearGradient>
);
})}
</defs>

{/* Render connections before nodes */}
{connections.map(conn => {
const start = nodes.find(n => n.id === conn.start);
const end = nodes.find(n => n.id === conn.end);
return (
<Connection
key={`${conn.start}-${conn.end}`}
startX={start.x + 60} startY={start.y + 30}
endX={end.x + 60} endY={end.y + 30}
gradientId={conn.gradientId}
/>
);
})}
Comment on lines +51 to +82
Copy link

@coderabbitai coderabbitai bot Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix rendering order for proper layering.

The nodes are currently rendered before the connections (line 51 vs line 71). In SVG, elements are rendered in document order, so nodes will appear below connections. For proper visual layering, connections should be rendered first, followed by nodes.

Apply this diff to fix the rendering order:

     <svg width="800" height="600" style={{ background: '#333' }}>
-            {/* Render nodes */}
-            {nodes.map(node =>
-        node.type === 'eventTransform'
-          ? <EventTransform key={node.id} {...node} />
-          : <Trigger key={node.id} {...node} />
-      )}
       <defs>
         {connections.map(conn => {
           const startNode = nodes.find(n => n.id === conn.start);
           const endNode = nodes.find(n => n.id === conn.end);

           return (
             <linearGradient key={conn.gradientId} id={conn.gradientId}>
               <stop offset="0%" stopColor={startNode.color} />
               <stop offset="100%" stopColor={endNode.color} />
             </linearGradient>
           );
         })}
       </defs>

       {/* Render connections before nodes */}
       {connections.map(conn => {
         const start = nodes.find(n => n.id === conn.start);
         const end = nodes.find(n => n.id === conn.end);
         return (
           <Connection
             key={`${conn.start}-${conn.end}`}
             startX={start.x + 60} startY={start.y + 30}
             endX={end.x + 60} endY={end.y + 30}
             gradientId={conn.gradientId}
           />
         );
       })}

+      {/* Render nodes */}
+      {nodes.map(node =>
+        node.type === 'eventTransform'
+          ? <EventTransform key={node.id} {...node} />
+          : <Trigger key={node.id} {...node} />
+      )}

     </svg>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{nodes.map(node =>
node.type === 'eventTransform'
? <EventTransform key={node.id} {...node} />
: <Trigger key={node.id} {...node} />
)}
<defs>
{connections.map(conn => {
const startNode = nodes.find(n => n.id === conn.start);
const endNode = nodes.find(n => n.id === conn.end);
return (
<linearGradient key={conn.gradientId} id={conn.gradientId}>
<stop offset="0%" stopColor={startNode.color} />
<stop offset="100%" stopColor={endNode.color} />
</linearGradient>
);
})}
</defs>
{/* Render connections before nodes */}
{connections.map(conn => {
const start = nodes.find(n => n.id === conn.start);
const end = nodes.find(n => n.id === conn.end);
return (
<Connection
key={`${conn.start}-${conn.end}`}
startX={start.x + 60} startY={start.y + 30}
endX={end.x + 60} endY={end.y + 30}
gradientId={conn.gradientId}
/>
);
})}
<svg width="800" height="600" style={{ background: '#333' }}>
<defs>
{connections.map(conn => {
const startNode = nodes.find(n => n.id === conn.start);
const endNode = nodes.find(n => n.id === conn.end);
return (
<linearGradient key={conn.gradientId} id={conn.gradientId}>
<stop offset="0%" stopColor={startNode.color} />
<stop offset="100%" stopColor={endNode.color} />
</linearGradient>
);
})}
</defs>
{/* Render connections before nodes */}
{connections.map(conn => {
const start = nodes.find(n => n.id === conn.start);
const end = nodes.find(n => n.id === conn.end);
return (
<Connection
key={`${conn.start}-${conn.end}`}
startX={start.x + 60} startY={start.y + 30}
endX={end.x + 60} endY={end.y + 30}
gradientId={conn.gradientId}
/>
);
})}
{/* Render nodes */}
{nodes.map(node =>
node.type === 'eventTransform'
? <EventTransform key={node.id} {...node} />
: <Trigger key={node.id} {...node} />
)}
</svg>
🤖 Prompt for AI Agents 
In src/pages/Flow/index.jsx around lines 51 to 82 the nodes are rendered before
the connections which causes nodes to appear under connection paths in the SVG;
move the block that renders the <defs> (linearGradient entries) and the
connections map so they are rendered before the nodes map (i.e., render
gradients and the connections <Connection /> elements first, then map and render
the node components), keeping existing props/keys intact so layering displays
connections beneath nodes.

Comment on lines +71 to +82
Copy link

@coderabbitai coderabbitai bot Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add error handling for missing nodes.

The code uses nodes.find() to locate start and end nodes for connections (lines 72-73). If a node ID is not found, this will result in undefined, which could cause runtime errors when accessing properties like start.x.

Apply this diff to add error handling:

       {connections.map(conn => {
         const start = nodes.find(n => n.id === conn.start);
         const end = nodes.find(n => n.id === conn.end);
+        
+        // Skip rendering if nodes are not found
+        if (!start || !end) {
+          console.warn(`Connection skipped: missing node (start: ${conn.start}, end: ${conn.end})`);
+          return null;
+        }
+        
         return (
           <Connection
             key={`${conn.start}-${conn.end}`}
             startX={start.x + 60} startY={start.y + 30}
             endX={end.x + 60} endY={end.y + 30}
             gradientId={conn.gradientId}
           />
         );
       })}

Similarly, add error handling for gradient definitions at lines 57-67:

       <defs>
         {connections.map(conn => {
           const startNode = nodes.find(n => n.id === conn.start);
           const endNode = nodes.find(n => n.id === conn.end);

+          // Skip gradient if nodes are not found
+          if (!startNode || !endNode) {
+            return null;
+          }
+
           return (
             <linearGradient key={conn.gradientId} id={conn.gradientId}>
               <stop offset="0%" stopColor={startNode.color} />
               <stop offset="100%" stopColor={endNode.color} />
             </linearGradient>
           );
         })}
       </defs>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{connections.map(conn => {
const start = nodes.find(n => n.id === conn.start);
const end = nodes.find(n => n.id === conn.end);
return (
<Connection
key={`${conn.start}-${conn.end}`}
startX={start.x + 60} startY={start.y + 30}
endX={end.x + 60} endY={end.y + 30}
gradientId={conn.gradientId}
/>
);
})}
// … around line 71 in src/pages/Flow/index.jsx
{connections.map(conn => {
const start = nodes.find(n => n.id === conn.start);
const end = nodes.find(n => n.id === conn.end);
// Skip rendering if nodes are not found
if (!start || !end) {
console.warn(`Connection skipped: missing node (start: ${conn.start}, end: ${conn.end})`);
return null;
}
return (
<Connection
key={`${conn.start}-${conn.end}`}
startX={start.x + 60} startY={start.y + 30}
endX={end.x + 60} endY={end.y + 30}
gradientId={conn.gradientId}
/>
);
})}
// … around lines 57–67 in the same file
<defs>
{connections.map(conn => {
const startNode = nodes.find(n => n.id === conn.start);
const endNode = nodes.find(n => n.id === conn.end);
// Skip gradient if nodes are not found
if (!startNode || !endNode) {
return null;
}
return (
<linearGradient key={conn.gradientId} id={conn.gradientId}>
<stop offset="0%" stopColor={startNode.color} />
<stop offset="100%" stopColor={endNode.color} />
</linearGradient>
);
})}
</defs>
🤖 Prompt for AI Agents 
In src/pages/Flow/index.jsx around lines 71 to 82 (and also check lines 57 to
67), the code assumes nodes and gradients exist when using nodes.find(...) and
gradient lookups which can return undefined; update the rendering to guard
against missing data by checking that start and end nodes are found before
accessing their x/y (skip rendering the Connection and optionally log a warning
or render a placeholder), and likewise verify the gradient definition exists
before referencing it (skip or use a default gradient and log a warning); ensure
these checks are added inline where the map/lookup happens so no runtime
property access occurs on undefined.



</svg>
);
};

export default Flow;
70 changes: 64 additions & 6 deletions src/pages/Resources.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,64 @@ const Resources = () => {
return (
<Layout>
<div className="container mx-auto p-4">
{/* <div className="loader h-24 w-full">
<svg height="0" width="0" viewBox="0 0 64 64" className="absolute">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b">
<stop stop-color="#973BED"></stop>
<stop stop-color="#007CFF" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c">
<stop stop-color="#FFC800"></stop>
<stop stop-color="#F0F" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d">
<stop stop-color="#00E0ED"></stop>
<stop stop-color="#00DA72" offset="1"></stop>
</linearGradient>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 10,4 H 32 C 48,4 54,20 54,32 54,44 48,60 32,60 H 10 Z" className="dash" id="d" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,4 L 32,60 L 60,4" className="dash" id="v" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,4 H 60 M 32,4 V 60" className="dash" id="t" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o2" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 32,4 V 60" className="dash" id="l" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 60,16 C 60,8 52,4 32,4 12,4 4,8 4,16 4,24 12,28 32,28 52,28 60,32 60,40 60,48 52,52 32,52 12,52 4,48 4,40" className="dash" id="s" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 L 32,4 L 60,60 M 16,40 H 48" className="dash" id="a" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,32 V 60 M 4,32 C 4,16 16,16 32,16" className="dash" id="r" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e2" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 V 16 C 4,8 12,4 32,4 52,4 60,8 60,16 V 60" className="dash" id="n" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 60,44 C 60,52 52,60 32,60 12,60 4,52 4,44 V 32 C 4,24 12,16 32,16 52,16 60,24 60,32 V 60" className="dash" id="a2" pathLength="360"></path>
</svg>
</div> */}
Comment on lines +60 to +116
Copy link

@coderabbitai coderabbitai bot Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Remove commented-out code.

The large commented-out loader JSX block (57 lines) should be removed rather than left as dead code. If this loader functionality is needed for future reference, consider keeping it in version control history instead.

Apply this diff to remove the commented block:

-                {/* <div className="loader h-24 w-full">
-                    <svg height="0" width="0" viewBox="0 0 64 64" className="absolute">
-                        <defs>
-                            <linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b">
-                                <stop stop-color="#973BED"></stop>
-                                <stop stop-color="#007CFF" offset="1"></stop>
-                            </linearGradient>
-                            <linearGradient gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c">
-                                <stop stop-color="#FFC800"></stop>
-                                <stop stop-color="#F0F" offset="1"></stop>
-                            </linearGradient>
-                            <linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d">
-                                <stop stop-color="#00E0ED"></stop>
-                                <stop stop-color="#00DA72" offset="1"></stop>
-                            </linearGradient>
-                        </defs>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 10,4 H 32 C 48,4 54,20 54,32 54,44 48,60 32,60 H 10 Z" className="dash" id="d" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,4 L 32,60 L 60,4" className="dash" id="v" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,4 H 60 M 32,4 V 60" className="dash" id="t" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o2" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 32,4 V 60" className="dash" id="l" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 60,16 C 60,8 52,4 32,4 12,4 4,8 4,16 4,24 12,28 32,28 52,28 60,32 60,40 60,48 52,52 32,52 12,52 4,48 4,40" className="dash" id="s" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 L 32,4 L 60,60 M 16,40 H 48" className="dash" id="a" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,32 V 60 M 4,32 C 4,16 16,16 32,16" className="dash" id="r" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e2" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 V 16 C 4,8 12,4 32,4 52,4 60,8 60,16 V 60" className="dash" id="n" pathLength="360"></path>
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
-                        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 60,44 C 60,52 52,60 32,60 12,60 4,52 4,44 V 32 C 4,24 12,16 32,16 52,16 60,24 60,32 V 60" className="dash" id="a2" pathLength="360"></path>
-                    </svg>
-                </div> */}
-
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{/* <div className="loader h-24 w-full">
<svg height="0" width="0" viewBox="0 0 64 64" className="absolute">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b">
<stop stop-color="#973BED"></stop>
<stop stop-color="#007CFF" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c">
<stop stop-color="#FFC800"></stop>
<stop stop-color="#F0F" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d">
<stop stop-color="#00E0ED"></stop>
<stop stop-color="#00DA72" offset="1"></stop>
</linearGradient>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 10,4 H 32 C 48,4 54,20 54,32 54,44 48,60 32,60 H 10 Z" className="dash" id="d" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,4 L 32,60 L 60,4" className="dash" id="v" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,4 H 60 M 32,4 V 60" className="dash" id="t" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o2" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 32,4 V 60" className="dash" id="l" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 60,16 C 60,8 52,4 32,4 12,4 4,8 4,16 4,24 12,28 32,28 52,28 60,32 60,40 60,48 52,52 32,52 12,52 4,48 4,40" className="dash" id="s" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 L 32,4 L 60,60 M 16,40 H 48" className="dash" id="a" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,32 V 60 M 4,32 C 4,16 16,16 32,16" className="dash" id="r" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e2" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 V 16 C 4,8 12,4 32,4 52,4 60,8 60,16 V 60" className="dash" id="n" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 60,44 C 60,52 52,60 32,60 12,60 4,52 4,44 V 32 C 4,24 12,16 32,16 52,16 60,24 60,32 V 60" className="dash" id="a2" pathLength="360"></path>
</svg>
</div> */}
🤖 Prompt for AI Agents 
In src/pages/Resources.jsx around lines 60 to 116, remove the entire large
commented-out loader JSX block (the multi-line /* ... */ wrapper and its SVG
contents) so there is no dead commented code; ensure you also remove any
now-unused imports or extra blank lines introduced by the deletion and run
Prettier/ESLint formatting to keep file style consistent.


<MainTitle
title="Free Resources for"
highlight="Web Development"
Expand All @@ -74,15 +132,15 @@ const Resources = () => {
</div>
</div>
{Object.keys(filteredResources).map((key, index) => (
<ResourceSection
key={index}
id={key}
<ResourceSection
key={index}
id={key}
title={
key
.replace(/(^[a-z])/g,($1)=>{return $1.toUpperCase()})
.replace(/([A-Z])/g," $1")
.replace(/(^[a-z])/g, ($1) => { return $1.toUpperCase() })
.replace(/([A-Z])/g, " $1")
}
resources={filteredResources[key]}
resources={filteredResources[key]}
/>
))}
</div>
Expand Down
Loading