Skip to content

Commit a8c2a10

Browse files
Richajaishwal0Richajaishwal0
committed
solved conflict
2 parents 70746e1 + e99d67e commit a8c2a10

File tree

2 files changed

+192
-63
lines changed

2 files changed

+192
-63
lines changed

‎src/css/custom.css‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1628,10 +1628,43 @@ html {
16281628
border-color: #ef4444 !important;
16291629
}
16301630

1631-
[data-theme="dark"] .star-border-yellow {
1632-
border-color: #eab308 !important;
1631+
/* Fix: Remove extra box/space above dropdown nav items in sidebar */
1632+
.navbar-sidebar__item,
1633+
.navbar-sidebar__link,
1634+
.navbar-sidebar__brand {
1635+
margin-top: 0 !important;
1636+
padding-top: 0 !important;
1637+
border-top: none !important;
1638+
box-shadow: none !important;
1639+
}
1640+
.navbar-sidebar__item:first-child,
1641+
.navbar-sidebar__link:first-child {
1642+
margin-top: 0 !important;
1643+
padding-top: 0 !important;
1644+
border-top: none !important;
1645+
box-shadow: none !important;
1646+
}
1647+
/* Remove any unwanted hr or divider above dropdowns */
1648+
.navbar-sidebar hr,
1649+
.navbar-sidebar__item hr {
1650+
display: none !important;
1651+
margin: 0 !important;
1652+
padding: 0 !important;
1653+
border: none !important;
1654+
}
1655+
/* Remove grid gap above dropdowns */
1656+
.navbar-sidebar .grid {
1657+
gap: 0 !important;
1658+
margin-top: 0 !important;
1659+
padding-top: 0 !important;
16331660
}
16341661

1662+
1663+
/* STAR section border fixes for dark mode */
1664+
[data-theme='dark'] .star-border-red {
1665+
border-color: #ef4444 !important;
1666+
}
1667+
16351668
[data-theme="dark"] .star-border-green {
16361669
border-color: #22c55e !important;
16371670
}
@@ -1693,6 +1726,11 @@ html {
16931726
color: white;
16941727
}
16951728

1729+
.interview-prep-discord-btn{
1730+
color:white;
1731+
1732+
}
1733+
16961734
[data-theme='dark'] .overview-sidebar-blue{
16971735
border-color:#3b82f6
16981736
}

‎src/pages/dashboard/giveaway/index.tsx‎

Lines changed: 152 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
1-
import React, { useEffect, useState } from "react";
2-
import Layout from "@theme/Layout";
3-
import Head from "@docusaurus/Head";
4-
import type confettiType from "canvas-confetti";
1+
import React, { useEffect, useState } from 'react';
2+
import Layout from '@theme/Layout';
3+
import Head from '@docusaurus/Head';
4+
import NavbarIcon from "../../../components/navbar/NavbarIcon";
5+
import { useHistory } from "@docusaurus/router";
6+
import type confettiType from 'canvas-confetti';
7+
import "../dashboard.css";
58

69
const GiveawayPage: React.FC = () => {
10+
const history = useHistory();
11+
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
12+
const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
713
const [timeLeft, setTimeLeft] = useState({
814
days: "--",
915
hours: "--",
1016
minutes: "--",
1117
seconds: "--",
1218
});
1319

14-
const countdownTarget = new Date("2025-08-15T23:59:59").getTime(); // Update the deadline if needed
20+
const countdownTarget = new Date('2025-08-15T23:59:59').getTime();
1521

1622
// Countdown Timer Effect
1723
useEffect(() => {
@@ -63,70 +69,155 @@ const GiveawayPage: React.FC = () => {
6369
return () => clearTimeout(timer);
6470
}, []);
6571

72+
const handleTabChange = (tab: "home" | "discuss" | "leaderboard" | "giveaway") => {
73+
setIsMobileSidebarOpen(false);
74+
if (tab === "discuss") {
75+
history.push("/dashboard#discuss");
76+
} else if (tab === "leaderboard") {
77+
history.push("/dashboard#leaderboard");
78+
} else if (tab === "home") {
79+
history.push("/dashboard");
80+
}
81+
};
82+
6683
return (
67-
<Layout>
84+
<Layout title="Giveaway" description="RecodeHive Giveaway">
6885
<Head>
6986
<title>🎁 RecodeHive Giveaway</title>
7087
</Head>
88+
<div className={`dashboard-layout ${isMobileSidebarOpen ? 'sidebar-open' : ''}`}>
89+
{/* Mobile Menu Button */}
90+
<button
91+
className={`mobile-menu-btn ${isMobileSidebarOpen ? 'open' : ''}`}
92+
onClick={() => setIsMobileSidebarOpen(!isMobileSidebarOpen)}
93+
aria-label="Toggle mobile menu"
94+
/>
95+
96+
{/* Sidebar Navigation */}
97+
<nav
98+
className={`dashboard-sidebar ${
99+
isSidebarCollapsed ? "collapsed" : ""
100+
} ${isMobileSidebarOpen ? "show" : ""}`}
101+
>
102+
<div className="sidebar-header">
103+
<div className="sidebar-logo">
104+
<h2>RecodeHive</h2>
105+
</div>
106+
<button
107+
className="sidebar-toggle"
108+
onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
109+
aria-label={
110+
isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"
111+
}
112+
>
113+
{isSidebarCollapsed ? "→" : "←"}
114+
</button>
115+
</div>
116+
<ul className="sidebar-nav">
117+
<li
118+
className="nav-item"
119+
onClick={() => handleTabChange("home")}
120+
>
121+
<span className="nav-icon">
122+
<NavbarIcon name="Dashboard" />
123+
</span>
124+
<span className="nav-text">Home</span>
125+
</li>
126+
<li
127+
className="nav-item"
128+
onClick={() => handleTabChange("discuss")}
129+
>
130+
<span className="nav-icon">
131+
<NavbarIcon name="Broadcast" />
132+
</span>
133+
<span className="nav-text">Discuss</span>
134+
</li>
135+
<li
136+
className="nav-item"
137+
onClick={() => handleTabChange("leaderboard")}
138+
>
139+
<span className="nav-icon">
140+
<NavbarIcon name="Badges" />
141+
</span>
142+
<span className="nav-text">Leaderboard</span>
143+
</li>
144+
<li
145+
className="nav-item active"
146+
>
147+
<span className="nav-icon">
148+
<NavbarIcon name="Donate" />
149+
</span>
150+
<span className="nav-text">Giveaway</span>
151+
</li>
152+
</ul>
153+
<div className="sidebar-footer">
154+
<button
155+
className="sidebar-toggle bottom-toggle"
156+
onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
157+
aria-label={
158+
isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"
159+
}
160+
>
161+
{isSidebarCollapsed ? "→" : "←"}
162+
</button>
163+
</div>
164+
</nav>
165+
166+
<main
167+
className={`dashboard-main ${
168+
isSidebarCollapsed ? "sidebar-collapsed" : ""
169+
}`}
170+
>
171+
<div className="min-h-screen bg-gradient-to-br from-[#0f0c29] via-[#302b63] to-[#24243e] text-white py-10 px-6">
172+
<div className="max-w-4xl mx-auto text-center">
173+
<h1 className="text-4xl sm:text-5xl font-bold mb-6">🎉 RecodeHive Giveaway</h1>
174+
<p className="text-lg mb-8">Participate now and win exclusive swag, resources, and more!</p>
175+
176+
<div className="flex justify-center gap-4 text-center mb-12">
177+
{['days', 'hours', 'minutes', 'seconds'].map((unit) => (
178+
<div key={unit} className="bg-white/10 px-6 py-4 rounded-xl shadow-md">
179+
<div className="text-3xl font-bold">{timeLeft[unit as keyof typeof timeLeft]}</div>
180+
<div className="text-sm uppercase tracking-widest">{unit}</div>
181+
</div>
182+
))}
183+
</div>
71184

72-
<div className="min-h-screen bg-gradient-to-br from-[#0f0c29] via-[#302b63] to-[#24243e] text-white py-10 px-6">
73-
<div className="max-w-4xl mx-auto text-center">
74-
<h1 className="text-4xl sm:text-5xl font-bold mb-6">
75-
🎉 RecodeHive Giveaway
76-
</h1>
77-
<p className="text-lg mb-8">
78-
Participate now and win exclusive swag, resources, and more!
79-
</p>
80-
81-
<div className="flex justify-center gap-4 text-center mb-12">
82-
{["days", "hours", "minutes", "seconds"].map((unit) => (
83-
<div
84-
key={unit}
85-
className="bg-white/10 px-6 py-4 rounded-xl shadow-md"
86-
>
87-
<div className="text-3xl font-bold">
88-
{timeLeft[unit as keyof typeof timeLeft]}
89-
</div>
90-
<div className="text-sm uppercase tracking-widest">{unit}</div>
185+
<div className="bg-white/10 p-6 rounded-xl shadow-xl mb-10">
186+
<h2 className="text-2xl font-semibold mb-4">🏆 Leaderboard</h2>
187+
<table className="w-full text-left border-collapse">
188+
<thead>
189+
<tr className="border-b border-white/20">
190+
<th className="pb-2">Rank</th>
191+
<th className="pb-2">Username</th>
192+
<th className="pb-2">Points</th>
193+
</tr>
194+
</thead>
195+
<tbody>
196+
<tr className="border-b border-white/10">
197+
<td>1</td>
198+
<td>OpenSourcePro</td>
199+
<td>1200</td>
200+
</tr>
201+
<tr className="border-b border-white/10">
202+
<td>2</td>
203+
<td>CodeWizard</td>
204+
<td>950</td>
205+
</tr>
206+
<tr>
207+
<td>3</td>
208+
<td>DevChampion</td>
209+
<td>875</td>
210+
</tr>
211+
</tbody>
212+
</table>
91213
</div>
92-
))}
93-
</div>
94214

95-
<div className="bg-white/10 p-6 rounded-xl shadow-xl mb-10">
96-
<h2 className="text-2xl font-semibold mb-4">🏆 Leaderboard</h2>
97-
<table className="w-full border-collapse">
98-
<thead>
99-
<tr className="border-b border-white/20">
100-
<th className="pb-2 text-center">Rank</th>
101-
<th className="pb-2 text-center">Username</th>
102-
<th className="pb-2 text-center">Points</th>
103-
</tr>
104-
</thead>
105-
<tbody>
106-
<tr className="border-b border-white/10">
107-
<td className="text-center">1</td>
108-
<td className="text-center">OpenSourcePro</td>
109-
<td className="text-center">1200</td>
110-
</tr>
111-
<tr className="border-b border-white/10">
112-
<td className="text-center">2</td>
113-
<td className="text-center">CodeWizard</td>
114-
<td className="text-center">950</td>
115-
</tr>
116-
<tr>
117-
<td className="text-center">3</td>
118-
<td className="text-center">DevChampion</td>
119-
<td className="text-center">875</td>
120-
</tr>
121-
</tbody>
122-
</table>
215+
<p className="text-sm text-white text-opacity-60 italic">
216+
Winners will be announced after the countdown ends. Stay active on the dashboard to climb up the leaderboard!
217+
</p>
218+
</div>
123219
</div>
124-
125-
<p className="text-sm text-white text-opacity-60 italic">
126-
Winners will be announced after the countdown ends. Stay active on
127-
the dashboard to climb up the leaderboard!
128-
</p>
129-
</div>
220+
</main>
130221
</div>
131222
</Layout>
132223
);

0 commit comments

Comments
 (0)