Skip to content

Commit 2190ba4

Browse files
druvkotwanidruvkotwani
committed
stats layout done
1 parent ff637b6 commit 2190ba4

File tree

1 file changed

+110
-37
lines changed

1 file changed

+110
-37
lines changed

‎client/src/components/LeetCodeWrapped.jsx‎

Lines changed: 110 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,9 @@ import React from 'react'
22
import '../index.css'
33
import { useState } from 'react'
44
import { Link } from 'react-router-dom'
5-
import Heatmap from './Heatmap';
6-
import Profile from './Profile';
7-
import About from './About';
8-
import Stat from './Stat';
9-
import data from '../utils/tempdata'
10-
115

126
const LeetCodeWrapped = () => {
7+
138
const [activeButton, setActiveButton] = useState('profile');
149

1510

@@ -65,45 +60,123 @@ const LeetCodeWrapped = () => {
6560
</div>
6661
<div style={{ height: '0.5px', backgroundColor: '#E0E0E0' }} className="h-[0.5px] bg-white" />
6762

63+
{/* Input bar */}
64+
65+
<div className=' flex items-center justify-center'>
66+
<input type="text" placeholder="Generate Your LeetCode-Wrap" className="my-2 w-[250px] input input-bordered input-warning " />
67+
<button className="btn btn-success ml-3">Generate</button>
68+
</div>
6869

6970
{/* Community Stat */}
70-
<div className=''>
71-
<div className="stats shadow flex flex-col sm:flex-row items-center justify-center rounded-none ">
72-
<div className="stat">
73-
<div className="stat-figure text-secondary">
74-
<div className="avatar">
75-
<div className="w-16 rounded-full">
76-
<img src="/assets/profile.png" />
77-
</div>
71+
<div className="flex sm:flex-col items-center justify-center">
72+
<div className="stats shadow flex sm:flex-col overflow-hidden items-center justify-center rounded-none">
73+
<div className='sm:flex '>
74+
<div className="stat">
75+
<div className="stat-figure text-secondary">
76+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-8 h-8 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
7877
</div>
78+
<div className="stat-title">Profile Views</div>
79+
<div className="stat-value text-secondary">2.6M</div>
80+
<div className="stat-desc">Last Week: 0</div>
7981
</div>
80-
<div className="stat-value">86%</div>
81-
<div className="stat-title">Tasks done</div>
82-
<div className="stat-desc text-secondary">31 tasks remaining</div>
83-
</div>
84-
<div className="stat">
85-
<div className="stat-figure text-secondary">
86-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-8 h-8 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
82+
<div className="stat">
83+
<div className="stat-figure text-primary">
84+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-8 h-8 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
85+
</div>
86+
<div className="stat-title">Total Likes</div>
87+
<div className="stat-value text-primary">25.6K</div>
88+
<div className="stat-desc">Last Week: 0</div>
8789
</div>
88-
<div className="stat-title">Profile Views</div>
89-
<div className="stat-value text-secondary">2.6M</div>
90-
<div className="stat-desc">Last Week: 0</div>
91-
</div>
92-
<div className="stat">
93-
<div className="stat-figure text-primary">
94-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-8 h-8 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
90+
<div className="stat">
91+
<div className="stat-figure text-primary">
92+
<svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(0)"><g id="SVGRepo_bgCarrier" strokeWidth="0"></g><g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.2691 4.41115C11.5006 3.89177 11.6164 3.63208 11.7776 3.55211C11.9176 3.48263 12.082 3.48263 12.222 3.55211C12.3832 3.63208 12.499 3.89177 12.7305 4.41115L14.5745 8.54808C14.643 8.70162 14.6772 8.77839 14.7302 8.83718C14.777 8.8892 14.8343 8.93081 14.8982 8.95929C14.9705 8.99149 15.0541 9.00031 15.2213 9.01795L19.7256 9.49336C20.2911 9.55304 20.5738 9.58288 20.6997 9.71147C20.809 9.82316 20.8598 9.97956 20.837 10.1342C20.8108 10.3122 20.5996 10.5025 20.1772 10.8832L16.8125 13.9154C16.6877 14.0279 16.6252 14.0842 16.5857 14.1527C16.5507 14.2134 16.5288 14.2807 16.5215 14.3503C16.5132 14.429 16.5306 14.5112 16.5655 14.6757L17.5053 19.1064C17.6233 19.6627 17.6823 19.9408 17.5989 20.1002C17.5264 20.2388 17.3934 20.3354 17.2393 20.3615C17.0619 20.3915 16.8156 20.2495 16.323 19.9654L12.3995 17.7024C12.2539 17.6184 12.1811 17.5765 12.1037 17.56C12.0352 17.5455 11.9644 17.5455 11.8959 17.56C11.8185 17.5765 11.7457 17.6184 11.6001 17.7024L7.67662 19.9654C7.18404 20.2495 6.93775 20.3915 6.76034 20.3615C6.60623 20.3354 6.47319 20.2388 6.40075 20.1002C6.31736 19.9408 6.37635 19.6627 6.49434 19.1064L7.4341 14.6757C7.46898 14.5112 7.48642 14.429 7.47814 14.3503C7.47081 14.2807 7.44894 14.2134 7.41394 14.1527C7.37439 14.0842 7.31195 14.0279 7.18708 13.9154L3.82246 10.8832C3.40005 10.5025 3.18884 10.3122 3.16258 10.1342C3.13978 9.97956 3.19059 9.82316 3.29993 9.71147C3.42581 9.58288 3.70856 9.55304 4.27406 9.49336L8.77835 9.01795C8.94553 9.00031 9.02911 8.99149 9.10139 8.95929C9.16534 8.93081 9.2226 8.8892 9.26946 8.83718C9.32241 8.77839 9.35663 8.70162 9.42508 8.54808L11.2691 4.41115Z" stroke="#FCD53F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> </g></svg>
93+
</div>
94+
<div className="stat-title ">Reputation</div>
95+
<div className="stat-value text-[#FCD53F]">25.6K</div>
96+
<div className="stat-desc">Last Week: 0</div>
9597
</div>
96-
<div className="stat-title">Total Likes</div>
97-
<div className="stat-value text-primary">25.6K</div>
98-
<div className="stat-desc">Last Week: 0</div>
9998
</div>
100-
<div className="stat">
101-
<div className="stat-figure text-primary">
102-
<svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(0)"><g id="SVGRepo_bgCarrier" strokeWidth="0"></g><g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.2691 4.41115C11.5006 3.89177 11.6164 3.63208 11.7776 3.55211C11.9176 3.48263 12.082 3.48263 12.222 3.55211C12.3832 3.63208 12.499 3.89177 12.7305 4.41115L14.5745 8.54808C14.643 8.70162 14.6772 8.77839 14.7302 8.83718C14.777 8.8892 14.8343 8.93081 14.8982 8.95929C14.9705 8.99149 15.0541 9.00031 15.2213 9.01795L19.7256 9.49336C20.2911 9.55304 20.5738 9.58288 20.6997 9.71147C20.809 9.82316 20.8598 9.97956 20.837 10.1342C20.8108 10.3122 20.5996 10.5025 20.1772 10.8832L16.8125 13.9154C16.6877 14.0279 16.6252 14.0842 16.5857 14.1527C16.5507 14.2134 16.5288 14.2807 16.5215 14.3503C16.5132 14.429 16.5306 14.5112 16.5655 14.6757L17.5053 19.1064C17.6233 19.6627 17.6823 19.9408 17.5989 20.1002C17.5264 20.2388 17.3934 20.3354 17.2393 20.3615C17.0619 20.3915 16.8156 20.2495 16.323 19.9654L12.3995 17.7024C12.2539 17.6184 12.1811 17.5765 12.1037 17.56C12.0352 17.5455 11.9644 17.5455 11.8959 17.56C11.8185 17.5765 11.7457 17.6184 11.6001 17.7024L7.67662 19.9654C7.18404 20.2495 6.93775 20.3915 6.76034 20.3615C6.60623 20.3354 6.47319 20.2388 6.40075 20.1002C6.31736 19.9408 6.37635 19.6627 6.49434 19.1064L7.4341 14.6757C7.46898 14.5112 7.48642 14.429 7.47814 14.3503C7.47081 14.2807 7.44894 14.2134 7.41394 14.1527C7.37439 14.0842 7.31195 14.0279 7.18708 13.9154L3.82246 10.8832C3.40005 10.5025 3.18884 10.3122 3.16258 10.1342C3.13978 9.97956 3.19059 9.82316 3.29993 9.71147C3.42581 9.58288 3.70856 9.55304 4.27406 9.49336L8.77835 9.01795C8.94553 9.00031 9.02911 8.99149 9.10139 8.95929C9.16534 8.93081 9.2226 8.8892 9.26946 8.83718C9.32241 8.77839 9.35663 8.70162 9.42508 8.54808L11.2691 4.41115Z" stroke="#FCD53F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> </g></svg>
99+
</div>
100+
101+
<div className="stats shadow flex sm:flex-col overflow-hidden items-center justify-center rounded-none ">
102+
<div className='sm:flex '>
103+
<div className="stat">
104+
<div className="stat-figure text-secondary">
105+
<svg
106+
width="32px"
107+
height="32px"
108+
viewBox="0 0 24 24"
109+
fill="none"
110+
xmlns="http://www.w3.org/2000/svg"
111+
>
112+
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
113+
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
114+
<g id="SVGRepo_iconCarrier">
115+
<path
116+
d="M17 17H17.01M15.6 14H18C18.9319 14 19.3978 14 19.7654 14.1522C20.2554 14.3552 20.6448 14.7446 20.8478 15.2346C21 15.6022 21 16.0681 21 17C21 17.9319 21 18.3978 20.8478 18.7654C20.6448 19.2554 20.2554 19.6448 19.7654 19.8478C19.3978 20 18.9319 20 18 20H6C5.06812 20 4.60218 20 4.23463 19.8478C3.74458 19.6448 3.35523 19.2554 3.15224 18.7654C3 18.3978 3 17.9319 3 17C3 16.0681 3 15.6022 3 15.2346C3.15224 14.7446 3.35523 14.3552 3.15224 14.1522C3 14 3 14 3 14H8.4M12 15V4M12 4L15 7M12 4L9 7"
117+
stroke="#03AAEE"
118+
strokeWidth="2"
119+
strokeLinecap="round"
120+
strokeLinejoin="round"
121+
></path>
122+
</g>
123+
</svg>
124+
</div>
125+
<div className="stat-title ">Submissions</div>
126+
<div className="stat-value text-[#03AAEE]">2.6M</div>
127+
<div className="stat-desc">Total Submission</div>
128+
</div>
129+
<div className="stat">
130+
<div className="stat-figure text-primary">
131+
<svg
132+
fill="#00A96E"
133+
height="32px"
134+
width="32px"
135+
version="1.1"
136+
xmlns="http://www.w3.org/2000/svg"
137+
xmlnsXlink="http://www.w3.org/1999/xlink"
138+
viewBox="0 0 24 24"
139+
xmlSpace="preserve"
140+
stroke="#00A96E"
141+
>
142+
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
143+
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
144+
<g id="SVGRepo_iconCarrier">
145+
<g id="active">
146+
<path d="M8.6,20.1l-7.8-8l1.4-1.4l6.4,6.5L21.8,3.9l1.4,1.4L8.6,20.1z"></path>
147+
</g>
148+
</g>
149+
</svg> </div>
150+
<div className="stat-title">Active Days</div>
151+
<div className="stat-value text-[#00A96E]">25.6K</div>
152+
<div className="stat-desc">Total Active Days</div>
153+
</div>
154+
<div className="stat">
155+
<div className="stat-figure text-primary">
156+
<svg
157+
width="32px"
158+
height="32px"
159+
viewBox="0 0 24 24"
160+
fill="none"
161+
xmlns="http://www.w3.org/2000/svg"
162+
>
163+
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
164+
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
165+
<g id="SVGRepo_iconCarrier">
166+
<path
167+
d="M3 5.5L5 3.5M21 5.5L19 3.5M12 8.5V12.5L14 14.5M20 12.5C20 16.9183 16.4183 20.5 12 20.5C7.58172 20.5 4 16.9183 4 12.5C4 8.08172 7.58172 4.5 12 4.5C16.4183 4.5 20 8.08172 20 12.5Z"
168+
stroke="#B2F302"
169+
strokeWidth="2"
170+
strokeLinecap="round"
171+
strokeLinejoin="round"
172+
></path>
173+
</g>
174+
</svg>
175+
</div>
176+
<div className="stat-title ">Max Streak</div>
177+
<div className="stat-value text-[#B2F302]">25.6K</div>
178+
<div className="stat-desc">Overall Max Streak</div>
103179
</div>
104-
<div className="stat-title ">Reputation</div>
105-
<div className="stat-value text-[#FCD53F]">25.6K</div>
106-
<div className="stat-desc">Last Week: 0</div>
107180
</div>
108181
</div>
109182
</div>

0 commit comments

Comments
 (0)