Skip to content

Commit 4af738a

Browse files
druvkotwanidruvkotwani
committed
bottom nav done
1 parent d970b4f commit 4af738a

File tree

1 file changed

+58
-23
lines changed

1 file changed

+58
-23
lines changed

‎client/src/components/LeetCodeWrapped.jsx‎

Lines changed: 58 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import React from 'react'
2-
2+
import { useState } from 'react'
33
const LeetCodeWrapped = () => {
4+
const [activeButton, setActiveButton] = useState('profile');
5+
6+
const handleClick = (button) => {
7+
if (button !== activeButton) {
8+
setActiveButton(button);
9+
}
10+
};
411
return (
512
<>
613
{/* Header*/}
@@ -40,14 +47,40 @@ const LeetCodeWrapped = () => {
4047
<div className="flex flex-col justify-center">
4148
<h1 className="JakartaSans text-white font-bold text-xl sm:text-2xl">
4249
<strong className='JakartaSans-bold text-3xl sm:text-4xl '>2023 </strong>
43-
<br />
50+
<br className="sm:hidden" />
4451
LeetCode Wrap-Up</h1>
4552
<p className="JakartaSans text-gray-200 text-sm hidden sm:block">Review your LeetCode activity from the past year</p>
4653
</div>
54+
</div>
55+
56+
{/* Bottom navigation */}
57+
58+
<div className="btm-nav">
59+
<button
60+
className={`text-accent ${activeButton === 'button1' ? 'active' : ''}`}
61+
onClick={() => handleClick('button1')}
62+
>
63+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
4764

65+
</button>
66+
<button
67+
className={`text-accent ${activeButton === 'profile' ? 'active' : ''}`}
68+
onClick={() => handleClick('profile')}
69+
>
70+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
4871

72+
</button>
73+
<button
74+
className={`text-accent ${activeButton === 'button2' ? 'active' : ''}`}
75+
onClick={() => handleClick('button2')}
76+
>
77+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
78+
79+
</button>
4980
</div>
5081

82+
<div style={{ height: '0.5px', backgroundColor: '#E0E0E0' }} className="h-[0.5px] bg-white" />
83+
5184
{/* Profile Card */}
5285

5386

@@ -57,30 +90,32 @@ const LeetCodeWrapped = () => {
5790

5891

5992
{/* Community Stat */}
60-
<div className="stats shadow ">
61-
<div className="stat">
62-
<div className="stat-figure text-secondary">
63-
<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>
93+
<div className="flex ">
94+
<div className="stats shadow ">
95+
<div className="stat">
96+
<div className="stat-figure text-secondary">
97+
<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>
98+
</div>
99+
<div className="stat-title">Profile Views</div>
100+
<div className="stat-value text-secondary">2.6M</div>
101+
<div className="stat-desc">Last Week: 0</div>
64102
</div>
65-
<div className="stat-title">Profile Views</div>
66-
<div className="stat-value text-secondary">2.6M</div>
67-
<div className="stat-desc">Last Week: 0</div>
68-
</div>
69-
<div className="stat">
70-
<div className="stat-figure text-primary">
71-
<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>
103+
<div className="stat">
104+
<div className="stat-figure text-primary">
105+
<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>
106+
</div>
107+
<div className="stat-title">Total Likes</div>
108+
<div className="stat-value text-primary">25.6K</div>
109+
<div className="stat-desc">Last Week: 0</div>
72110
</div>
73-
<div className="stat-title">Total Likes</div>
74-
<div className="stat-value text-primary">25.6K</div>
75-
<div className="stat-desc">Last Week: 0</div>
76-
</div>
77-
<div className="stat">
78-
<div className="stat-figure text-primary">
79-
<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>
111+
<div className="stat">
112+
<div className="stat-figure text-primary">
113+
<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>
114+
</div>
115+
<div className="stat-title ">Reputation</div>
116+
<div className="stat-value text-[#FCD53F]">25.6K</div>
117+
<div className="stat-desc">Last Week: 0</div>
80118
</div>
81-
<div className="stat-title ">Reputation</div>
82-
<div className="stat-value text-[#FCD53F]">25.6K</div>
83-
<div className="stat-desc">Last Week: 0</div>
84119
</div>
85120
</div>
86121
</>

0 commit comments

Comments
 (0)