Skip to content

Commit 7687b54

Browse files
d-crypticd-cryptic
committed
Statistics card page done
1 parent 0aa7a72 commit 7687b54

File tree

7 files changed

+496
-3
lines changed

7 files changed

+496
-3
lines changed

‎src/App.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import SignUp from "./pages/SignUp";
55
import LogIn from "./pages/LogIn";
66
import Onboarding from "./pages/Onboarding";
77
import Task from "./pages/Home";
8-
// import Navbar from "./pages/helper/Navbar";
8+
import pageNotFound from "./pageNotFound";
99

1010
function App() {
1111
useEffect(() => {
@@ -14,6 +14,7 @@ function App() {
1414

1515
return (
1616
<div className="App">
17+
{/* <pageNotFound /> */}
1718
{/* <Navbar /> */}
1819
<Task />
1920
{/* <Onboarding /> */}

‎src/pageNotFound.jsx

Lines changed: 278 additions & 0 deletions
Large diffs are not rendered by default.

‎src/pages/Home/StatisticsCard/RestDaysCard.jsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from "react";
2+
3+
const RestDaysCard = () => {
4+
return (
5+
<div>
6+
<div class="shadow-lg rounded-2xl p-4 bg-white dark:bg-gray-700 w-full">
7+
<div class="flex items-center justify-between mb-6">
8+
<div class="flex items-center">
9+
{/* <span class="rounded-xl relative p-2 bg-blue-100"></span> */}
10+
<div class="flex flex-col">
11+
<span class="font-bold text-md text-black dark:text-white ml-2">
12+
Consistency is important but don't forget to take rest too
13+
</span>
14+
{/* <span class="text-sm text-gray-500 dark:text-white ml-2">
15+
Check your daily status here
16+
</span> */}
17+
</div>
18+
</div>
19+
</div>
20+
<div class="flex items-center justify-between mb-4 space-x-12">
21+
<span class="px-2 py-1 flex items-center font-semibold text-xs rounded-md text-green-700 bg-green-50">
22+
REST DAYS REMAINING
23+
</span>
24+
<span class="px-2 py-1 flex items-center font-semibold text-xs rounded-md text-green-600 border border-green-600 bg-white">
25+
Beware
26+
</span>
27+
</div>
28+
<div class="block m-auto">
29+
<div>
30+
<span class="text-sm inline-block text-gray-500 text-3xl dark:text-gray-100">
31+
Rest Days : {""}
32+
<span class="text-gray-700 dark:text-white font-bold">50</span>
33+
/50
34+
</span>
35+
</div>
36+
<div>
37+
<div class="bg-white rounded-lg block p-4 m-auto">
38+
<div class="w-full h-4 bg-gray-400 rounded-full mt-3">
39+
<div class="w-3/4 h-full text-center text-xs text-white bg-pink-300 rounded-full">
40+
75%
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
<div class="flex items-center justify-start my-4 space-x-4">
47+
<span class="px-2 py-1 flex items-center text-xs rounded-md font-semibold text-green-500 bg-green-50">
48+
{""}Next Rest Day:
49+
</span>
50+
{/* <span class="px-2 py-1 flex items-center text-xs rounded-md text-yellow-600 font-semibold bg-yellow-200"></span> */}
51+
</div>
52+
53+
<span class="px-2 py-1 flex w-36 mt-4 items-center text-xs rounded-md font-semibold text-yellow-500 bg-yellow-100">
54+
18 JUN
55+
</span>
56+
</div>
57+
</div>
58+
);
59+
};
60+
61+
export default RestDaysCard;

‎src/pages/Home/StatisticsCard/StarStreakCard.jsx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from "react";
2+
3+
const StarStreakCard = () => {
4+
return (
5+
<div>
6+
<div class="shadow-lg rounded-2xl p-4 bg-white dark:bg-gray-700 w-full">
7+
<div class="flex items-center justify-between mb-6">
8+
<div class="flex items-center">
9+
{/* <span class="rounded-xl relative p-2 bg-blue-100"></span> */}
10+
<div class="flex flex-col">
11+
<span class="font-bold text-md text-black dark:text-white ml-2">
12+
Your Daily Streak
13+
</span>
14+
<span class="text-sm text-gray-500 dark:text-white ml-2">
15+
Each star is your medal of consistency
16+
</span>
17+
</div>
18+
</div>
19+
</div>
20+
<div class="flex item-center mt-2">
21+
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
22+
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"></path>
23+
</svg>
24+
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
25+
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"></path>
26+
</svg>
27+
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
28+
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"></path>
29+
</svg>
30+
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
31+
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"></path>
32+
</svg>
33+
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
34+
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"></path>
35+
</svg>
36+
</div>
37+
<div class="flex items-center justify-between mb-4 space-x-12">
38+
<span class="px-2 py-1 flex items-center font-semibold text-xs rounded-md text-green-700 bg-green-50">
39+
REST DAYS REMAINING
40+
</span>
41+
<span class="px-2 py-1 flex items-center font-semibold text-xs rounded-md text-green-600 border border-green-600 bg-white">
42+
Beware
43+
</span>
44+
</div>
45+
<div class="block m-auto">
46+
<div>
47+
<span class="text-sm inline-block text-gray-500 text-3xl dark:text-gray-100">
48+
Rest Days : {""}
49+
<span class="text-gray-700 dark:text-white font-bold">50</span>
50+
/50
51+
</span>
52+
</div>
53+
<div class="w-full h-2 bg-gray-200 rounded-full mt-2">
54+
<div class="w-full h-full text-center text-xs text-white bg-pink-400 rounded-full"></div>
55+
</div>
56+
</div>
57+
<div class="flex items-center justify-start my-4 space-x-4">
58+
<span class="px-2 py-1 flex items-center text-xs rounded-md font-semibold text-green-500 bg-green-50">
59+
{""}Next Rest Day:
60+
</span>
61+
{/* <span class="px-2 py-1 flex items-center text-xs rounded-md text-yellow-600 font-semibold bg-yellow-200"></span> */}
62+
</div>
63+
64+
<span class="px-2 py-1 flex w-36 mt-4 items-center text-xs rounded-md font-semibold text-yellow-500 bg-yellow-100">
65+
18 JUN
66+
</span>
67+
</div>
68+
</div>
69+
);
70+
};
71+
72+
export default StarStreakCard;

‎src/pages/Home/StatisticsCard/TotalTaskCard.jsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from "react";
2+
3+
const TotalTaskCard = () => {
4+
return (
5+
<div>
6+
<div class="shadow-lg rounded-2xl p-4 bg-white dark:bg-gray-700 w-full">
7+
<div class="flex items-center justify-between mb-6">
8+
<div class="flex items-center">
9+
{/* <span class="rounded-xl relative p-2 bg-blue-100"></span> */}
10+
<div class="flex flex-col">
11+
<span class="font-bold text-md text-black dark:text-white ml-2">
12+
You are doing great Name
13+
</span>
14+
<span class="text-sm text-gray-500 dark:text-white ml-2">
15+
Check your daily status here
16+
</span>
17+
</div>
18+
</div>
19+
</div>
20+
<div class="flex items-center justify-between mb-4 space-x-12">
21+
<span class="px-2 py-1 flex items-center font-semibold text-xs rounded-md text-green-700 bg-green-50">
22+
COMPLETED
23+
</span>
24+
<span class="px-2 py-1 flex items-center font-semibold text-xs rounded-md text-green-600 border border-green-600 bg-white">
25+
Let's Go
26+
</span>
27+
</div>
28+
<div class="block m-auto">
29+
<div>
30+
<span class="text-sm inline-block text-gray-500 text-3xl dark:text-gray-100">
31+
Task done :
32+
<span class="text-gray-700 dark:text-white font-bold">50</span>
33+
/50
34+
</span>
35+
</div>
36+
<div>
37+
<div class="bg-white rounded-lg block p-4 m-auto">
38+
<div class="w-full h-4 bg-gray-400 rounded-full mt-3">
39+
<div class="w-3/4 h-full text-center text-xs text-white bg-pink-300 rounded-full">
40+
75%
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
<div class="flex items-center justify-start my-4 space-x-4">
47+
<span class="px-2 py-1 flex items-center text-xs rounded-md font-semibold text-green-500 bg-green-50">
48+
Day 1
49+
</span>
50+
<span class="px-2 py-1 flex items-center text-xs rounded-md text-yellow-600 font-semibold bg-yellow-200">
51+
Task Name
52+
</span>
53+
</div>
54+
55+
<span class="px-2 py-1 flex w-36 mt-4 items-center text-xs rounded-md font-semibold text-yellow-500 bg-yellow-100">
56+
Next Task: 18 JUN
57+
</span>
58+
</div>
59+
</div>
60+
);
61+
};
62+
63+
export default TotalTaskCard;

‎src/pages/Home/StatisticsCard/index.jsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import TotalTaskCard from "./TotalTaskCard";
3+
// import StarStreakCard from "./StarStreakCard";
4+
import RestDaysCard from "./RestDaysCard";
5+
6+
const StatisticsCard = () => {
7+
return (
8+
<div className="grid grid-cols-3 gap-3 mx-8 mt-4">
9+
<TotalTaskCard />
10+
{/* <StarStreakCard /> */}
11+
<RestDaysCard />
12+
</div>
13+
);
14+
};
15+
16+
export default StatisticsCard;

‎src/pages/Home/index.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ import React, { useState } from "react";
33
import Days from "./Days";
44
import Task from "./Task";
55
import TaskCard from "./TaskCard";
6+
import StatisticsCard from "./StatisticsCard";
67

78
const Index = () => {
89
const [showForm, setShowForm] = useState(false);
910
return (
1011
<div>
1112
{/* <Navbar></Navbar> */}
12-
{showForm ? <Task></Task> : <Days></Days>}
13-
<TaskCard />
13+
{/* {showForm ? <Task></Task> : <Days></Days>} */}
14+
{/* <TaskCard /> */}
15+
<StatisticsCard />
1416
</div>
1517
);
1618
};

0 commit comments

Comments
 (0)