Skip to content

Commit 548ec06

Browse files
druvkotwanidruvkotwani
committed
Added framer motion
1 parent fb97394 commit 548ec06

File tree

4 files changed

+138
-31
lines changed

4 files changed

+138
-31
lines changed

‎client/package-lock.json‎

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"axios": "^1.6.2",
1414
"dotenv": "^16.3.1",
1515
"firebase": "^10.6.0",
16+
"framer-motion": "^10.16.16",
1617
"html-to-image": "^1.11.11",
1718
"react": "^18.2.0",
1819
"react-dom": "^18.2.0",

‎client/src/App.jsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import StatsGenerator from "./components/StatsGenerator";
44
import { useEffect, useState } from "react";
55
import { collection, getDocs, onSnapshot } from "firebase/firestore";
66
import { firestore } from "./firebase";
7+
import { motion } from "framer-motion";
78

89
import "./App.css";
910

@@ -66,8 +67,19 @@ export default function App() {
6667
<div className="grid grid-cols-1 gap-4 py-4 ">
6768
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
6869
{
69-
filteredData.map(data => (
70-
<Stat key={data.username} data={data} />
70+
filteredData.map((data, index) => (
71+
// displaying each stat
72+
<>
73+
<motion.div
74+
initial={{ opacity: 0, x: -50 }}
75+
whileInView={{ opacity: 1, x: 0 }}
76+
viewport={{ once: true }}
77+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.3 }}
78+
>
79+
<Stat key={data.username} data={data} />
80+
</motion.div>
81+
82+
</>
7183
))
7284
}
7385
</div>

‎client/src/components/Stat.jsx‎

Lines changed: 84 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Circle from "./Circle";
33
import { useState, useEffect } from "react";
44
import Profile from "./Profile";
55
import About from "./About";
6+
import { motion } from "framer-motion";
7+
68

79
export default function Stat({ data }) {
810
const [userData, setUserData] = useState({});
@@ -49,46 +51,99 @@ export default function Stat({ data }) {
4951
}
5052
}, [data]);
5153

52-
53-
54+
const random1 = Math.random() * 1;
55+
const random2 = Math.random() * 2;
5456
return (
5557
<div className="flex justify-center flex-col items-center rounded-lg h-[280px] bg-[#292829]">
5658
<div>
5759
<div className="flex gap-1 xl:gap-4 items-center justify-between ">
58-
<Profile userData={userData?.profileData} />
59-
<About result={userData?.aboutData} />
60+
{/* Profile */}
61+
<motion.div
62+
initial={{ opacity: 0, x: -50 }}
63+
whileInView={{ opacity: 1, x: 0 }}
64+
viewport={{ once: true }}
65+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random1 % 4) * 0.2 }}
66+
>
67+
<Profile userData={userData?.profileData} />
68+
</motion.div>
69+
70+
{/* About */}
71+
<motion.div
72+
initial={{ opacity: 0, x: -50 }}
73+
whileInView={{ opacity: 1, x: 0 }}
74+
viewport={{ once: true }}
75+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random2 % 4) * 0.2 + 0.2 }}
76+
>
77+
<About result={userData?.aboutData} />
78+
</motion.div>
6079
</div>
6180
<div style={{ height: '0.5px', backgroundColor: '#E0E0E0' }} className="h-[0.5px] bg-white" />
81+
6282
<div className=" flex lg:flex-row gap-5 items-center justify-center mt-4">
63-
<Circle total={data?.totalSolved} />
83+
{/* Circle */}
84+
<motion.div
85+
initial={{ opacity: 0, x: -40 }}
86+
whileInView={{ opacity: 1, x: 0 }}
87+
viewport={{ once: true }}
88+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random1 % 4) * 0.3 }}
89+
>
90+
<Circle total={data?.totalSolved} />
91+
</motion.div>
92+
6493
<div className="flex flex-col gap-3">
65-
<Questions
66-
type={'Easy'}
67-
solved={data?.easySolved}
68-
total={data?.easyTotal}
69-
beats={data?.easyBeats}
70-
line='bg-[#2db55d26]'
71-
line2='bg-[#01B8A2]'
72-
/>
73-
<Questions
74-
type={'Medium'}
75-
solved={data?.mediumSolved}
76-
total={data?.mediumTotal}
77-
beats={data?.mediumBeats}
78-
line='bg-[#ffb80026]'
79-
line2='bg-[#FFC11F]'
80-
/>
81-
<Questions
82-
type={'Hard'}
83-
solved={data?.hardSolved}
84-
total={data?.hardTotal}
85-
beats={data?.hardBeats}
86-
line='bg-[#ef474326]'
87-
line2='bg-[#EF4642]'
88-
/>
94+
{/* Questions */}
95+
<motion.div
96+
initial={{ opacity: 0, x: -20 }}
97+
whileInView={{ opacity: 1, x: 0 }}
98+
viewport={{ once: true }}
99+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random2 % 4) * 0.4 }}
100+
>
101+
<Questions
102+
type={'Easy'}
103+
solved={data?.easySolved}
104+
total={data?.easyTotal}
105+
beats={data?.easyBeats}
106+
line='bg-[#2db55d26]'
107+
line2='bg-[#01B8A2]'
108+
/>
109+
</motion.div>
110+
111+
<motion.div
112+
initial={{ opacity: 0, x: -30 }}
113+
whileInView={{ opacity: 1, x: 0 }}
114+
viewport={{ once: true }}
115+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random2 % 4) * 0.3 }}
116+
>
117+
<Questions
118+
type={'Medium'}
119+
solved={data?.mediumSolved}
120+
total={data?.mediumTotal}
121+
beats={data?.mediumBeats}
122+
line='bg-[#ffb80026]'
123+
line2='bg-[#FFC11F]'
124+
/>
125+
</motion.div>
126+
127+
<motion.div
128+
initial={{ opacity: 0, x: -50 }}
129+
whileInView={{ opacity: 1, x: 0 }}
130+
viewport={{ once: true }}
131+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random2 % 4) * 0.5 }}
132+
>
133+
<Questions
134+
type={'Hard'}
135+
solved={data?.hardSolved}
136+
total={data?.hardTotal}
137+
beats={data?.hardBeats}
138+
line='bg-[#ef474326]'
139+
line2='bg-[#EF4642]'
140+
/>
141+
</motion.div>
89142
</div>
90143
</div>
91144

145+
146+
92147
</div>
93148
</div>
94149

0 commit comments

Comments
 (0)