Skip to content

Commit a6e07ee

Browse files
makaipmakaip
committed
dark mode + ts error fix
1 parent 357c4c4 commit a6e07ee

File tree

7 files changed

+171
-41
lines changed

7 files changed

+171
-41
lines changed

‎components/DarkModeToggle.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React, { useState, useEffect } from 'react'
2+
import { Moon, Sun } from 'lucide-react'
3+
4+
const DarkModeToggle: React.FC = () => {
5+
const [isDark, setIsDark] = useState(false)
6+
const [mounted, setMounted] = useState(false)
7+
8+
useEffect(() => {
9+
setMounted(true)
10+
// Check for saved theme or default to light mode
11+
const savedTheme = localStorage.getItem('theme')
12+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
13+
14+
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
15+
setIsDark(true)
16+
document.documentElement.classList.add('dark')
17+
} else {
18+
setIsDark(false)
19+
document.documentElement.classList.remove('dark')
20+
}
21+
}, [])
22+
23+
const toggleDarkMode = () => {
24+
const newIsDark = !isDark
25+
setIsDark(newIsDark)
26+
27+
if (newIsDark) {
28+
document.documentElement.classList.add('dark')
29+
localStorage.setItem('theme', 'dark')
30+
} else {
31+
document.documentElement.classList.remove('dark')
32+
localStorage.setItem('theme', 'light')
33+
}
34+
}
35+
36+
// Prevent hydration mismatch
37+
if (!mounted) {
38+
return (
39+
<button className="p-2 rounded-lg bg-gray-200 dark:bg-hc-darkless transition-colors duration-200">
40+
<div className="w-5 h-5" />
41+
</button>
42+
)
43+
}
44+
45+
return (
46+
<button
47+
onClick={toggleDarkMode}
48+
className="p-2 rounded-lg bg-hc-snow dark:bg-hc-darkless text-hc-black dark:text-white hover:bg-hc-smoke dark:hover:bg-hc-steel transition-colors duration-200"
49+
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
50+
>
51+
{isDark ? (
52+
<Sun className="w-5 h-5" />
53+
) : (
54+
<Moon className="w-5 h-5" />
55+
)}
56+
</button>
57+
)
58+
}
59+
60+
export default DarkModeToggle

‎package-lock.json‎

Lines changed: 4 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
},
2222
"devDependencies": {
2323
"@types/node": "^20.14.0",
24-
"@types/react": "^18.3.0",
25-
"@types/react-dom": "^18.3.0",
24+
"@types/react": "^18.3.24",
25+
"@types/react-dom": "^18.3.7",
2626
"autoprefixer": "^10.4.19",
2727
"eslint": "^8.57.0",
2828
"eslint-config-next": "^14.2.0",

‎pages/index.tsx‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
Gift,
2020
MessageCircle
2121
} from 'lucide-react'
22+
import DarkModeToggle from '../components/DarkModeToggle'
2223

2324
interface WeeklyActivity {
2425
id: string
@@ -110,70 +111,74 @@ export default function Home() {
110111
const [selectedActivity, setSelectedActivity] = useState<string | null>(null)
111112

112113
return (
113-
<div className="min-h-screen bg-white">
114+
<div className="min-h-screen bg-white dark:bg-hc-dark transition-colors duration-300">
114115
{/* Header */}
115-
<header className="bg-white border-b border-gray-100 sticky top-0 z-50">
116+
<header className="bg-white dark:bg-hc-dark border-b border-gray-100 dark:border-hc-darkless sticky top-0 z-50 transition-colors duration-300">
116117
<div className="container mx-auto px-6">
117118
<div className="flex items-center justify-between h-16">
118119
{/* Logo Section */}
119120
<div className="flex items-center space-x-3">
120121
<div className="w-8 h-8 bg-hc-red rounded-lg flex items-center justify-center">
121122
<Code className="w-5 h-5 text-white" />
122123
</div>
123-
<span className="text-gray-900 font-bold text-lg tracking-tight">FAU Coding Club</span>
124+
<span className="text-gray-900 dark:text-white font-bold text-lg tracking-tight">FAU Coding Club</span>
124125
</div>
125126

126127
{/* Navigation */}
127128
<nav className="hidden md:flex items-center space-x-8">
128-
<a href="#about" className="text-gray-700 hover:text-hc-red font-medium transition-colors duration-200">
129+
<a href="#about" className="text-gray-700 dark:text-gray-300 hover:text-hc-red dark:hover:text-hc-red font-medium transition-colors duration-200">
129130
About
130131
</a>
131-
<a href="#activities" className="text-gray-700 hover:text-hc-red font-medium transition-colors duration-200">
132+
<a href="#activities" className="text-gray-700 dark:text-gray-300 hover:text-hc-red dark:hover:text-hc-red font-medium transition-colors duration-200">
132133
Activities
133134
</a>
134-
<a href="#features" className="text-gray-700 hover:text-hc-red font-medium transition-colors duration-200">
135+
<a href="#features" className="text-gray-700 dark:text-gray-300 hover:text-hc-red dark:hover:text-hc-red font-medium transition-colors duration-200">
135136
Features
136137
</a>
138+
<DarkModeToggle />
137139
<a href="#join" className="bg-hc-red text-white px-4 py-2 rounded-lg font-medium hover:bg-hc-red/90 transition-all duration-200 shadow-sm hover:shadow-md">
138140
Join Us
139141
</a>
140142
</nav>
141143

142144
{/* Mobile menu button */}
143-
<button className="md:hidden p-2 text-gray-700 hover:text-hc-red transition-colors">
144-
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
145-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
146-
</svg>
147-
</button>
145+
<div className="md:hidden flex items-center space-x-2">
146+
<DarkModeToggle />
147+
<button className="p-2 text-gray-700 dark:text-gray-300 hover:text-hc-red dark:hover:text-hc-red transition-colors">
148+
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
149+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
150+
</svg>
151+
</button>
152+
</div>
148153
</div>
149154
</div>
150155
</header>
151156

152157
{/* Hero Section */}
153-
<section className="relative overflow-hidden bg-gradient-to-br from-hc-snow via-white to-hc-smoke py-20">
158+
<section className="relative overflow-hidden bg-gradient-to-br from-hc-snow via-white to-hc-smoke dark:from-hc-darkless dark:via-hc-dark dark:to-hc-darker py-20 transition-colors duration-300">
154159
<div className="container mx-auto px-6">
155160
<div className="max-w-4xl mx-auto text-center">
156161
<div className="inline-flex items-center space-x-2 bg-hc-red/10 text-hc-red px-4 py-2 rounded-full text-sm font-medium mb-6 animate-fade-in">
157162
<Star className="w-4 h-4" />
158163
<span>Official Hack Club Chapter</span>
159164
</div>
160165

161-
<h1 className="text-5xl md:text-7xl font-bold text-hc-black mb-6 animate-fade-in-up">
166+
<h1 className="text-5xl md:text-7xl font-bold text-hc-black dark:text-white mb-6 animate-fade-in-up transition-colors duration-300">
162167
FAU Coding Club
163168
<span className="block gradient-text">for High School Students</span>
164169
</h1>
165170

166-
<p className="text-xl md:text-2xl text-hc-slate mb-8 max-w-3xl mx-auto animate-fade-in">
171+
<p className="text-xl md:text-2xl text-hc-slate dark:text-hc-muted mb-8 max-w-3xl mx-auto animate-fade-in transition-colors duration-300">
167172
Join fellow high school coders in Boca Raton for virtual meetings,
168173
cutting-edge tech workshops, and epic hackathon adventures.
169174
</p>
170175

171176
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12 animate-fade-in">
172-
<div className="flex items-center space-x-2 text-hc-muted">
177+
<div className="flex items-center space-x-2 text-hc-muted dark:text-hc-muted">
173178
<MapPin className="w-5 h-5" />
174179
<span>Boca Raton, FL (Virtual Meetings)</span>
175180
</div>
176-
<div className="flex items-center space-x-2 text-hc-muted">
181+
<div className="flex items-center space-x-2 text-hc-muted dark:text-hc-muted">
177182
<Clock className="w-5 h-5" />
178183
<span>Weekly • Day TBD • 6-7 PM</span>
179184
</div>
@@ -209,13 +214,13 @@ export default function Home() {
209214
</section>
210215

211216
{/* Weekly Activities Section */}
212-
<section id="activities" className="py-20 bg-white">
217+
<section id="activities" className="py-20 bg-white dark:bg-hc-dark transition-colors duration-300">
213218
<div className="container mx-auto px-6">
214219
<div className="text-center mb-16">
215-
<h2 className="text-4xl md:text-5xl font-bold text-hc-black mb-6">
220+
<h2 className="text-4xl md:text-5xl font-bold text-hc-black dark:text-white mb-6 transition-colors duration-300">
216221
Weekly <span className="gradient-text">Activities</span>
217222
</h2>
218-
<p className="text-xl text-hc-slate max-w-3xl mx-auto">
223+
<p className="text-xl text-hc-slate dark:text-hc-muted max-w-3xl mx-auto transition-colors duration-300">
219224
Every week brings new coding challenges, learning opportunities, and ways to level up your skills.
220225
</p>
221226
</div>
@@ -224,7 +229,7 @@ export default function Home() {
224229
{weeklyActivities.map((activity, index) => (
225230
<div
226231
key={activity.id}
227-
className={`card-primary cursor-pointer ${selectedActivity === activity.id ? 'ring-2 ring-hc-red' : ''}`}
232+
className={`bg-white dark:bg-hc-darkless p-6 rounded-xl shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105 cursor-pointer ${selectedActivity === activity.id ? 'ring-2 ring-hc-red' : ''}`}
228233
onClick={() => setSelectedActivity(selectedActivity === activity.id ? null : activity.id)}
229234
style={{animationDelay: `${index * 0.1}s`}}
230235
>
@@ -239,30 +244,30 @@ export default function Home() {
239244
<activity.icon className="w-6 h-6" />
240245
</div>
241246
<div className="flex-1">
242-
<h3 className="font-bold text-hc-black mb-2">{activity.title}</h3>
243-
<p className="text-hc-slate text-sm leading-relaxed">{activity.description}</p>
247+
<h3 className="font-bold text-hc-black dark:text-white mb-2 transition-colors duration-300">{activity.title}</h3>
248+
<p className="text-hc-slate dark:text-hc-muted text-sm leading-relaxed transition-colors duration-300">{activity.description}</p>
244249
</div>
245250
</div>
246251
</div>
247252
))}
248253
</div>
249254

250255
<div className="text-center mt-8">
251-
<p className="text-hc-muted">
256+
<p className="text-hc-muted dark:text-hc-muted transition-colors duration-300">
252257
Activities may change based on member feedback and interests.
253258
</p>
254259
</div>
255260
</div>
256261
</section>
257262

258263
{/* Features Section */}
259-
<section id="features" className="py-20 bg-hc-snow">
264+
<section id="features" className="py-20 bg-hc-snow dark:bg-hc-darkless transition-colors duration-300">
260265
<div className="container mx-auto px-6">
261266
<div className="text-center mb-16">
262-
<h2 className="text-4xl md:text-5xl font-bold text-hc-black mb-6">
267+
<h2 className="text-4xl md:text-5xl font-bold text-hc-black dark:text-white mb-6 transition-colors duration-300">
263268
Why Join <span className="gradient-text">FAU Coding Club?</span>
264269
</h2>
265-
<p className="text-xl text-hc-slate max-w-3xl mx-auto">
270+
<p className="text-xl text-hc-slate dark:text-hc-muted max-w-3xl mx-auto transition-colors duration-300">
266271
We offer unique opportunities through our Hack Club affiliation and FAU partnership.
267272
</p>
268273
</div>
@@ -271,34 +276,34 @@ export default function Home() {
271276
{features.map((feature, index) => (
272277
<div
273278
key={index}
274-
className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 animate-fade-in"
279+
className="bg-white dark:bg-hc-dark p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 animate-fade-in"
275280
style={{animationDelay: `${index * 0.1}s`}}
276281
>
277282
<div className="w-14 h-14 bg-gradient-to-br from-hc-red to-hc-orange rounded-lg flex items-center justify-center mb-6">
278283
<feature.icon className="w-7 h-7 text-white" />
279284
</div>
280-
<h3 className="text-xl font-bold text-hc-black mb-4">{feature.title}</h3>
281-
<p className="text-hc-slate leading-relaxed">{feature.description}</p>
285+
<h3 className="text-xl font-bold text-hc-black dark:text-white mb-4 transition-colors duration-300">{feature.title}</h3>
286+
<p className="text-hc-slate dark:text-hc-muted leading-relaxed transition-colors duration-300">{feature.description}</p>
282287
</div>
283288
))}
284289
</div>
285290
</div>
286291
</section>
287292

288293
{/* About Hack Club Section */}
289-
<section className="py-20 bg-white">
294+
<section className="py-20 bg-white dark:bg-hc-dark transition-colors duration-300">
290295
<div className="container mx-auto px-6">
291296
<div className="max-w-4xl mx-auto text-center">
292297
<div className="inline-flex items-center space-x-2 bg-hc-red text-white px-6 py-3 rounded-full mb-8">
293298
<Globe className="w-5 h-5" />
294299
<span className="font-medium">Part of the Global Hack Club Network</span>
295300
</div>
296301

297-
<h2 className="text-4xl md:text-5xl font-bold text-hc-black mb-8">
302+
<h2 className="text-4xl md:text-5xl font-bold text-hc-black dark:text-white mb-8 transition-colors duration-300">
298303
Connected to <span className="gradient-text">Something Bigger</span>
299304
</h2>
300305

301-
<p className="text-xl text-hc-slate mb-8 leading-relaxed">
306+
<p className="text-xl text-hc-slate dark:text-hc-muted mb-8 leading-relaxed transition-colors duration-300">
302307
As an official Hack Club chapter, we're part of a global community of teenage hackers
303308
who code together, ship amazing projects, and support each other's growth. Through this
304309
network, we're working toward establishing our own 501(c)(3) nonprofit status.
@@ -307,15 +312,15 @@ export default function Home() {
307312
<div className="grid md:grid-cols-3 gap-8 mt-12">
308313
<div className="text-center">
309314
<div className="text-3xl font-bold text-hc-red mb-2">1000+</div>
310-
<div className="text-hc-slate">Hack Clubs Worldwide</div>
315+
<div className="text-hc-slate dark:text-hc-muted transition-colors duration-300">Hack Clubs Worldwide</div>
311316
</div>
312317
<div className="text-center">
313318
<div className="text-3xl font-bold text-hc-orange mb-2">100+</div>
314-
<div className="text-hc-slate">Countries Represented</div>
319+
<div className="text-hc-slate dark:text-hc-muted transition-colors duration-300">Countries Represented</div>
315320
</div>
316321
<div className="text-center">
317322
<div className="text-3xl font-bold text-hc-green mb-2">$40M+</div>
318-
<div className="text-hc-slate">In Grants & Resources</div>
323+
<div className="text-hc-slate dark:text-hc-muted transition-colors duration-300">In Grants & Resources</div>
319324
</div>
320325
</div>
321326

@@ -372,7 +377,7 @@ export default function Home() {
372377
</section>
373378

374379
{/* Footer */}
375-
<footer className="bg-hc-black text-white py-12">
380+
<footer className="bg-hc-black dark:bg-hc-darker text-white py-12 transition-colors duration-300">
376381
<div className="container mx-auto px-6">
377382
<div className="grid md:grid-cols-3 gap-8">
378383
<div>

0 commit comments

Comments
 (0)