Skip to content

Commit b33f3b8

Browse files
devvsakibdevvsakib
committed
feat: add animated loader to Resources page and update dependencies
- Implemented a loader component in Resources.jsx to enhance user experience during data fetching. - Updated yarn.lock to include new dependencies and their respective versions, including @babel/runtime, d3 types, and zustand.
1 parent ca1d4bd commit b33f3b8

7 files changed

Lines changed: 624 additions & 10 deletions

File tree

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"prettier": "^3.3.3",
2121
"react": "^18.2.0",
2222
"react-dom": "^18.2.0",
23+
"react-flow-renderer": "^10.3.17",
2324
"react-hot-toast": "^2.4.0",
2425
"react-icons": "^4.7.1",
2526
"react-json-pretty": "^2.2.0",
@@ -29,7 +30,8 @@
2930
"react-syntax-highlighter": "^15.5.0",
3031
"react-transition-group": "^4.4.5",
3132
"remark-gfm": "^4.0.0",
32-
"sonner": "^1.5.0"
33+
"sonner": "^1.5.0",
34+
"uuid": "^10.0.0"
3335
},
3436
"devDependencies": {
3537
"@types/react": "^18.0.26",

‎src/index.css‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -452,4 +452,148 @@ html {
452452
max-height: 130px;
453453
max-width: 340px;
454454
}
455+
}
456+
457+
458+
459+
/*# sourceMappingURL=index.css.map */
460+
.loader svg {
461+
display: inline-block;
462+
width: 64px;
463+
height: 64px;
464+
}
465+
466+
.inline-block {
467+
display: inline-block;
468+
}
469+
470+
.loader {
471+
display: flex;
472+
margin: 0.25em 0;
473+
}
474+
475+
.w-2 {
476+
width: 0.5em;
477+
}
478+
479+
.dash {
480+
animation: dashArray 2s ease-in-out infinite,
481+
dashOffset 2s linear infinite;
482+
}
483+
484+
.spin {
485+
animation: spinDashArray 2s ease-in-out infinite,
486+
spin 8s ease-in-out infinite,
487+
dashOffset 2s linear infinite;
488+
transform-origin: center;
489+
}
490+
491+
@keyframes dashArray {
492+
0% {
493+
stroke-dasharray: 0 1 359 0;
494+
}
495+
496+
50% {
497+
stroke-dasharray: 0 359 1 0;
498+
}
499+
500+
100% {
501+
stroke-dasharray: 359 1 0 0;
502+
}
503+
}
504+
505+
@keyframes spinDashArray {
506+
0% {
507+
stroke-dasharray: 270 90;
508+
}
509+
510+
50% {
511+
stroke-dasharray: 0 360;
512+
}
513+
514+
100% {
515+
stroke-dasharray: 270 90;
516+
}
517+
}
518+
519+
@keyframes dashOffset {
520+
0% {
521+
stroke-dashoffset: 365;
522+
}
523+
524+
100% {
525+
stroke-dashoffset: 5;
526+
}
527+
}
528+
529+
@keyframes spin {
530+
0% {
531+
rotate: 0deg;
532+
}
533+
534+
12.5%,
535+
25% {
536+
rotate: 270deg;
537+
}
538+
539+
37.5%,
540+
50% {
541+
rotate: 540deg;
542+
}
543+
544+
62.5%,
545+
75% {
546+
rotate: 810deg;
547+
}
548+
549+
87.5%,
550+
100% {
551+
rotate: 1080deg;
552+
}
553+
}
554+
555+
/* flow */
556+
.flow-designer {
557+
display: flex;
558+
height: 100vh;
559+
}
560+
561+
.sidebar {
562+
width: 200px;
563+
background-color: #f0f0f0;
564+
padding: 20px;
565+
}
566+
567+
.action-item {
568+
margin-bottom: 10px;
569+
padding: 10px;
570+
background-color: #ddd;
571+
cursor: move;
572+
}
573+
574+
.canvas {
575+
flex-grow: 1;
576+
position: relative;
577+
background-color: #fff;
578+
}
579+
580+
.flow-node {
581+
position: absolute;
582+
padding: 10px;
583+
border-radius: 5px;
584+
user-select: none;
585+
}
586+
587+
.action {
588+
background-color: #66cc66;
589+
}
590+
591+
.condition {
592+
background-color: #ff9966;
593+
}
594+
595+
.branch {
596+
margin-top: 5px;
597+
padding: 5px;
598+
background-color: rgba(255, 255, 255, 0.2);
455599
}

‎src/main.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import DocDetail from "./pages/Doc/single doc";
1414
import Resources from "./pages/Resources";
1515
import DevArea from "./pages/DevArea";
1616
import DevTools from "./pages/DevArea/DevTools";
17+
import Flow from "./pages/Flow";
1718

1819
const router = createBrowserRouter(
1920
[
@@ -45,6 +46,10 @@ const router = createBrowserRouter(
4546
path: '/contributors',
4647
element: <Contributors />
4748
},
49+
{
50+
path: '/flow',
51+
element: <Flow />
52+
},
4853
{
4954
path: '*',
5055
element: <NotFound />

‎src/pages/Doc/single doc/index.jsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const DocDetail = () => {
3030
const [error, setError] = useState(null);
3131
const [activeSection, setActiveSection] = useState(null);
3232
const [headings, setHeadings] = useState([]);
33-
33+
console.log(content)
3434
useEffect(() => {
3535
const fetchContent = async () => {
3636
try {
@@ -80,8 +80,6 @@ const DocDetail = () => {
8080
}
8181
}, [content]);
8282

83-
if (loading) return <div className="flex justify-center items-center h-screen"><Spin size="large" /></div>;
84-
if (error) return <Alert message="Error" description={error} type="error" />;
8583
const headingToId = (children) => String(children).toLowerCase().replace(/\s+/g, '-');
8684
return (
8785
<Layout>

‎src/pages/Flow/index.jsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { v4 as uuidv4 } from 'uuid';
3+
4+
const EventTransform = ({ id, x, y, label, color }) => (
5+
<g transform={`translate(${x},${y})`} id={id}>
6+
<rect width="120" height="60" rx="5" fill={color} />
7+
<text x="60" y="30" textAnchor="middle" fill="white">{label}</text>
8+
</g>
9+
);
10+
11+
const Trigger = ({ id, x, y, label, color }) => (
12+
<g transform={`translate(${x},${y})`} id={id}>
13+
<rect width="120" height="60" rx="5" fill={color} />
14+
<text x="60" y="30" textAnchor="middle" fill="white">{label}</text>
15+
</g>
16+
);
17+
18+
const Connection = ({ startX, startY, endX, endY, gradientId }) => (
19+
<path
20+
d={`M${startX},${startY} C${(startX + endX) / 2},${startY} ${(startX + endX) / 2},${endY} ${endX},${endY}`}
21+
fill="none"
22+
stroke={`url(#${gradientId})`}
23+
strokeWidth="2"
24+
/>
25+
);
26+
27+
const Flow = () => {
28+
const [nodes, setNodes] = useState([
29+
{ id: uuidv4(), type: 'eventTransform', x: 100, y: 50, label: 'Event', color: 'red' },
30+
{ id: uuidv4(), type: 'eventTransform', x: 100, y: 200, label: 'Event', color: 'blue' },
31+
{ id: uuidv4(), type: 'eventTransform', x: 100, y: 400, label: 'Event', color: 'green' },
32+
{ id: uuidv4(), type: 'trigger', x: 400, y: 300, label: 'Trigger', color: 'orange' },
33+
]);
34+
35+
const [connections, setConnections] = useState([]);
36+
37+
// Dynamically calculate the connections once the nodes are set up
38+
useEffect(() => {
39+
const newConnections = nodes.slice(0, nodes.length - 1).map((node, index) => ({
40+
start: node.id,
41+
end: nodes[index + 1].id,
42+
gradientId: `grad-${node.id}-${nodes[index + 1].id}`,
43+
}));
44+
45+
setConnections(newConnections); // Update the state with new connections
46+
}, [nodes]); // Trigger this effect whenever nodes change
47+
48+
return (
49+
<svg width="800" height="600" style={{ background: '#333' }}>
50+
{/* Render nodes */}
51+
{nodes.map(node =>
52+
node.type === 'eventTransform'
53+
? <EventTransform key={node.id} {...node} />
54+
: <Trigger key={node.id} {...node} />
55+
)}
56+
<defs>
57+
{connections.map(conn => {
58+
const startNode = nodes.find(n => n.id === conn.start);
59+
const endNode = nodes.find(n => n.id === conn.end);
60+
61+
return (
62+
<linearGradient key={conn.gradientId} id={conn.gradientId}>
63+
<stop offset="0%" stopColor={startNode.color} />
64+
<stop offset="100%" stopColor={endNode.color} />
65+
</linearGradient>
66+
);
67+
})}
68+
</defs>
69+
70+
{/* Render connections before nodes */}
71+
{connections.map(conn => {
72+
const start = nodes.find(n => n.id === conn.start);
73+
const end = nodes.find(n => n.id === conn.end);
74+
return (
75+
<Connection
76+
key={`${conn.start}-${conn.end}`}
77+
startX={start.x + 60} startY={start.y + 30}
78+
endX={end.x + 60} endY={end.y + 30}
79+
gradientId={conn.gradientId}
80+
/>
81+
);
82+
})}
83+
84+
85+
</svg>
86+
);
87+
};
88+
89+
export default Flow;

‎src/pages/Resources.jsx‎

Lines changed: 64 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,64 @@ const Resources = () => {
5757
return (
5858
<Layout>
5959
<div className="container mx-auto p-4">
60+
{/* <div className="loader h-24 w-full">
61+
<svg height="0" width="0" viewBox="0 0 64 64" className="absolute">
62+
<defs>
63+
<linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b">
64+
<stop stop-color="#973BED"></stop>
65+
<stop stop-color="#007CFF" offset="1"></stop>
66+
</linearGradient>
67+
<linearGradient gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c">
68+
<stop stop-color="#FFC800"></stop>
69+
<stop stop-color="#F0F" offset="1"></stop>
70+
</linearGradient>
71+
<linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d">
72+
<stop stop-color="#00E0ED"></stop>
73+
<stop stop-color="#00DA72" offset="1"></stop>
74+
</linearGradient>
75+
</defs>
76+
</svg>
77+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
78+
<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>
79+
</svg>
80+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
81+
<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>
82+
</svg>
83+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
84+
<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>
85+
</svg>
86+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
87+
<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>
88+
</svg>
89+
<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">
90+
<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>
91+
</svg>
92+
<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">
93+
<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>
94+
</svg>
95+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
96+
<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>
97+
</svg>
98+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
99+
<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>
100+
</svg>
101+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
102+
<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>
103+
</svg>
104+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
105+
<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>
106+
</svg>
107+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
108+
<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>
109+
</svg>
110+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
111+
<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>
112+
</svg>
113+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
114+
<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>
115+
</svg>
116+
</div> */}
117+
60118
<MainTitle
61119
title="Free Resources for"
62120
highlight="Web Development"
@@ -74,15 +132,15 @@ const Resources = () => {
74132
</div>
75133
</div>
76134
{Object.keys(filteredResources).map((key, index) => (
77-
<ResourceSection
78-
key={index}
79-
id={key}
135+
<ResourceSection
136+
key={index}
137+
id={key}
80138
title={
81139
key
82-
.replace(/(^[a-z])/g,($1)=>{return $1.toUpperCase()})
83-
.replace(/([A-Z])/g," $1")
140+
.replace(/(^[a-z])/g, ($1) => { return $1.toUpperCase() })
141+
.replace(/([A-Z])/g, " $1")
84142
}
85-
resources={filteredResources[key]}
143+
resources={filteredResources[key]}
86144
/>
87145
))}
88146
</div>

0 commit comments

Comments
 (0)