@@ -7,6 +7,21 @@ const LeetCodeWrapped = () => {
77
88 const [ activeButton , setActiveButton ] = useState ( 'profile' ) ;
99
10+ const tempData = {
11+ fullName : "Dhruv Kotwani" ,
12+ imageUrl : "/assets/profile.png" ,
13+ totalQuestions : 3013 ,
14+ totalSolved : 1072 ,
15+ Views : "621" ,
16+ Solution : "9" ,
17+ Reputation : "22" ,
18+ submissions : "950" ,
19+ activeDays : "214" ,
20+ maxStreak : "145"
21+ }
22+
23+ const questionsDone = Math . floor ( tempData . totalSolved / tempData . totalQuestions * 100 ) ;
24+ const questionsRemain = 100 - questionsDone ;
1025
1126 const handleClick = ( button ) => {
1227 if ( button !== activeButton ) {
@@ -15,7 +30,6 @@ const LeetCodeWrapped = () => {
1530 } ;
1631 return (
1732 < div className = 'h-screen w-screen' >
18-
1933 { /* Header*/ }
2034 < div className = "flex sm:gap-4 items-center justify-center p-4" >
2135 { /* SVG */ }
@@ -69,66 +83,66 @@ const LeetCodeWrapped = () => {
6983
7084 { /* Community Stat */ }
7185 < div className = 'flex items-center justify-center ' >
72- < div className = "stats shadow flex sm:flex overflow-hidden sm:w-[580px ] items-center justify-center rounded-none" >
86+ < div className = "stats shadow flex sm:flex overflow-hidden sm:w-[550px ] items-center justify-center rounded-none" >
7387 < div className = 'flex ' >
7488 < div className = "stat " >
7589 < div className = "stat-figure text-primary" >
7690 </ div >
7791 < div className = "stat-title " > Hey!</ div >
78- < div className = "stat-value text-[#FF8866]" > Dhruv </ div >
92+ < div className = "stat-value text-[#FF8866]" > { tempData . fullName . split ( ' ' ) [ 0 ] } </ div >
7993 < div className = "stat-desc" > How was your 2023?</ div >
8094 </ div >
8195
82- < div className = "stat " >
96+ < div className = "stat pl-3 " >
8397 < div className = "stat-figure text-secondary" >
8498 < div className = "avatar" >
8599 < div className = "w-16 rounded-full" >
86100 < img src = "/assets/profile.png" />
87101 </ div >
88102 </ div >
89103 </ div >
90- < div className = "stat-value" > 86 %</ div >
104+ < div className = "stat-value" > { questionsDone } %</ div >
91105 < div className = "stat-title" > Questions Done</ div >
92- < div className = "stat-desc text-[secondary]" > 31 % Questions remains</ div >
106+ < div className = "stat-desc text-[secondary]" > { questionsRemain } % Questions remains</ div >
93107 </ div >
94108 </ div >
95109 </ div >
96110 </ div >
97111
98112 < div className = "flex sm:flex-col items-center justify-center" >
99113 { /* Div 2 */ }
100- < div className = "stats shadow flex sm:flex-col overflow-hidden items-center justify-center rounded-none" >
114+ < div className = "stats shadow flex sm:flex-col overflow-hidden sm:w-[550px] items-center justify-center rounded-none" >
101115 < div className = 'sm:flex ' >
102116 < div className = "stat" >
103117 < div className = "stat-figure text-secondary" >
104118 < 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 >
105119 </ div >
106120 < div className = "stat-title" > Profile Views</ div >
107- < div className = "stat-value text-secondary" > 2.6M </ div >
108- < div className = "stat-desc" > Last Week: 0 </ div >
121+ < div className = "stat-value text-secondary" > { tempData . Views } </ div >
122+ < div className = "stat-desc" > Total Profile Views </ div >
109123 </ div >
110124 < div className = "stat" >
111125 < div className = "stat-figure text-primary" >
112126 < 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 >
113127 </ div >
114128 < div className = "stat-title" > Solutions</ div >
115- < div className = "stat-value text-primary" > 25.6K </ div >
116- < div className = "stat-desc" > Last Week: 0 </ div >
129+ < div className = "stat-value text-primary" > { tempData . Solution } </ div >
130+ < div className = "stat-desc" > Total Solutions </ div >
117131 </ div >
118132 < div className = "stat" >
119133 < div className = "stat-figure text-primary" >
120134 < 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 >
121135 </ div >
122136 < div className = "stat-title " > Reputation</ div >
123- < div className = "stat-value text-[#FCD53F]" > 25.6K </ div >
124- < div className = "stat-desc" > Last Week: 0 </ div >
137+ < div className = "stat-value text-[#FCD53F]" > { tempData . Reputation } </ div >
138+ < div className = "stat-desc" > Total Reputataion </ div >
125139 </ div >
126140 </ div >
127141 </ div >
128142
129143
130144 { /* Div 3 */ }
131- < div className = "stats shadow flex sm:flex-col overflow-hidden items-center justify-center rounded-none " >
145+ < div className = "stats shadow flex sm:flex-col overflow-hidden sm:w-[550px] items-center justify-center rounded-none " >
132146 < div className = 'sm:flex ' >
133147 < div className = "stat" >
134148 < div className = "stat-figure text-secondary" >
@@ -153,7 +167,7 @@ const LeetCodeWrapped = () => {
153167 </ svg >
154168 </ div >
155169 < div className = "stat-title " > Submissions</ div >
156- < div className = "stat-value text-[#03AAEE]" > 2.6M </ div >
170+ < div className = "stat-value text-[#03AAEE]" > { tempData . Solution } </ div >
157171 < div className = "stat-desc" > Total Submission</ div >
158172 </ div >
159173 < div className = "stat" >
@@ -176,9 +190,10 @@ const LeetCodeWrapped = () => {
176190 < 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 >
177191 </ g >
178192 </ g >
179- </ svg > </ div >
193+ </ svg >
194+ </ div >
180195 < div className = "stat-title" > Active Days</ div >
181- < div className = "stat-value text-[#00A96E]" > 25.6K </ div >
196+ < div className = "stat-value text-[#00A96E]" > { tempData . activeDays } </ div >
182197 < div className = "stat-desc" > Total Active Days</ div >
183198 </ div >
184199 < div className = "stat" >
@@ -204,7 +219,7 @@ const LeetCodeWrapped = () => {
204219 </ svg >
205220 </ div >
206221 < div className = "stat-title " > Max Streak</ div >
207- < div className = "stat-value text-[#B2F302]" > 25.6K </ div >
222+ < div className = "stat-value text-[#B2F302]" > { tempData . maxStreak } </ div >
208223 < div className = "stat-desc" > Overall Max Streak</ div >
209224 </ div >
210225 </ div >
0 commit comments