Skip to content

Commit 600e7c4

Browse files
Rizwan102003Rizwan102003
authored
Merge pull request #32 from Srushtee1706/main
Added Dark Mode Toggle Button in Header
2 parents 92fbffe + 419ecce commit 600e7c4

File tree

13 files changed

+630
-558
lines changed

13 files changed

+630
-558
lines changed

‎src/App.tsx‎

Lines changed: 56 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Profile } from './components/Profile/Profile';
99
import { SubmitChallenge } from './components/Submit/SubmitChallenge';
1010
import { Community } from './components/Community/Community';
1111
import { Challenge } from './components/Challenges/ChallengeCard';
12+
import { ThemeProvider } from './themeContent'; // Import the new ThemeProvider
1213

1314
function App() {
1415
const [currentPage, setCurrentPage] = useState<string>('home');
@@ -58,67 +59,69 @@ function App() {
5859
};
5960

6061
return (
61-
<div className="min-h-screen bg-white">
62-
<Header currentPage={currentPage} onNavigate={handleNavigate} />
63-
<main>
64-
{renderPage()}
65-
</main>
66-
67-
{/* Footer */}
68-
{currentPage === 'home' && (
69-
<footer className="bg-gray-900 text-white py-16">
70-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
71-
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
72-
<div className="md:col-span-2">
73-
<div className="flex items-center mb-4">
74-
<div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-2 rounded-lg mr-3">
75-
<span className="font-bold text-xl">CT</span>
62+
<ThemeProvider>
63+
<div className="min-h-screen">
64+
<Header currentPage={currentPage} onNavigate={handleNavigate} />
65+
<main>
66+
{renderPage()}
67+
</main>
68+
69+
{/* Footer */}
70+
{currentPage === 'home' && (
71+
<footer className="bg-gray-900 text-white py-16">
72+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
73+
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
74+
<div className="md:col-span-2">
75+
<div className="flex items-center mb-4">
76+
<div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-2 rounded-lg mr-3">
77+
<span className="font-bold text-xl">CT</span>
78+
</div>
79+
<div>
80+
<h3 className="text-xl font-bold">Can I Try This?</h3>
81+
<p className="text-gray-400 text-sm">Real Skills, Real Growth</p>
82+
</div>
7683
</div>
77-
<div>
78-
<h3 className="text-xl font-bold">Can I Try This?</h3>
79-
<p className="text-gray-400 text-sm">Real Skills, Real Growth</p>
84+
<p className="text-gray-400 mb-6">
85+
A platform where learners explore real-world challenges across design, development,
86+
writing, data, and more. Build skills through practice, not just theory.
87+
</p>
88+
<div className="flex space-x-4">
89+
<button className="text-gray-400 hover:text-white transition-colors">Twitter</button>
90+
<button className="text-gray-400 hover:text-white transition-colors">GitHub</button>
91+
<button className="text-gray-400 hover:text-white transition-colors">Discord</button>
8092
</div>
8193
</div>
82-
<p className="text-gray-400 mb-6">
83-
A platform where learners explore real-world challenges across design, development,
84-
writing, data, and more. Build skills through practice, not just theory.
85-
</p>
86-
<div className="flex space-x-4">
87-
<button className="text-gray-400 hover:text-white transition-colors">Twitter</button>
88-
<button className="text-gray-400 hover:text-white transition-colors">GitHub</button>
89-
<button className="text-gray-400 hover:text-white transition-colors">Discord</button>
94+
95+
<div>
96+
<h4 className="font-semibold mb-4">Platform</h4>
97+
<ul className="space-y-2 text-gray-400">
98+
<li><button onClick={() => handleNavigate('challenges')} className="hover:text-white transition-colors">Challenges</button></li>
99+
<li><button onClick={() => handleNavigate('community')} className="hover:text-white transition-colors">Community</button></li>
100+
<li><button onClick={() => handleNavigate('submit')} className="hover:text-white transition-colors">Submit Challenge</button></li>
101+
<li><button className="hover:text-white transition-colors">Mentor Program</button></li>
102+
</ul>
103+
</div>
104+
105+
<div>
106+
<h4 className="font-semibold mb-4">Support</h4>
107+
<ul className="space-y-2 text-gray-400">
108+
<li><button className="hover:text-white transition-colors">Help Center</button></li>
109+
<li><button className="hover:text-white transition-colors">Guidelines</button></li>
110+
<li><button className="hover:text-white transition-colors">Contact Us</button></li>
111+
<li><button className="hover:text-white transition-colors">Privacy Policy</button></li>
112+
</ul>
90113
</div>
91114
</div>
92115

93-
<div>
94-
<h4 className="font-semibold mb-4">Platform</h4>
95-
<ul className="space-y-2 text-gray-400">
96-
<li><button onClick={() => handleNavigate('challenges')} className="hover:text-white transition-colors">Challenges</button></li>
97-
<li><button onClick={() => handleNavigate('community')} className="hover:text-white transition-colors">Community</button></li>
98-
<li><button onClick={() => handleNavigate('submit')} className="hover:text-white transition-colors">Submit Challenge</button></li>
99-
<li><button className="hover:text-white transition-colors">Mentor Program</button></li>
100-
</ul>
101-
</div>
102-
103-
<div>
104-
<h4 className="font-semibold mb-4">Support</h4>
105-
<ul className="space-y-2 text-gray-400">
106-
<li><button className="hover:text-white transition-colors">Help Center</button></li>
107-
<li><button className="hover:text-white transition-colors">Guidelines</button></li>
108-
<li><button className="hover:text-white transition-colors">Contact Us</button></li>
109-
<li><button className="hover:text-white transition-colors">Privacy Policy</button></li>
110-
</ul>
116+
<div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
117+
<p>&copy; 2024 Can I Try This? All rights reserved.</p>
111118
</div>
112119
</div>
113-
114-
<div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
115-
<p>&copy; 2024 Can I Try This? All rights reserved.</p>
116-
</div>
117-
</div>
118-
</footer>
119-
)}
120-
</div>
120+
</footer>
121+
)}
122+
</div>
123+
</ThemeProvider>
121124
);
122125
}
123126

124-
export default App;
127+
export default App;

‎src/components/Challenges/ChallengeBoard.tsx‎

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,8 @@ export const ChallengeBoard: React.FC<ChallengeBoardProps> = ({ onChallengeSelec
8787

8888
const filteredChallenges = mockChallenges.filter(challenge => {
8989
const matchesSearch = challenge.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
90-
challenge.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
91-
challenge.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
90+
challenge.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
91+
challenge.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
9292

9393
const matchesDomain = selectedDomain === 'All' || challenge.domain === selectedDomain;
9494
const matchesDifficulty = selectedDifficulty === 'All' || challenge.difficulty === selectedDifficulty;
@@ -112,26 +112,26 @@ export const ChallengeBoard: React.FC<ChallengeBoardProps> = ({ onChallengeSelec
112112
}));
113113

114114
return (
115-
<div className="min-h-screen bg-gray-50 pt-8">
115+
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 pt-8 transition-colors duration-300">
116116
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
117117
{/* Header */}
118118
<div className="mb-8">
119-
<h1 className="text-3xl font-bold text-gray-900 mb-2">Challenge Board</h1>
120-
<p className="text-gray-600">Discover real-world challenges to level up your skills</p>
119+
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Challenge Board</h1>
120+
<p className="text-gray-600 dark:text-gray-400">Discover real-world challenges to level up your skills</p>
121121
</div>
122122

123123
{/* Filters */}
124-
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
124+
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8 transition-colors duration-300">
125125
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
126126
{/* Search */}
127127
<div className="relative flex-1 max-w-md">
128-
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
128+
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500" />
129129
<input
130130
type="text"
131131
placeholder="Search challenges..."
132132
value={searchTerm}
133133
onChange={(e) => setSearchTerm(e.target.value)}
134-
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
134+
className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
135135
/>
136136
</div>
137137

@@ -140,7 +140,7 @@ export const ChallengeBoard: React.FC<ChallengeBoardProps> = ({ onChallengeSelec
140140
<select
141141
value={selectedDomain}
142142
onChange={(e) => setSelectedDomain(e.target.value)}
143-
className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
143+
className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
144144
>
145145
{domains.map(domain => (
146146
<option key={domain} value={domain}>{domain} Domain</option>
@@ -150,7 +150,7 @@ export const ChallengeBoard: React.FC<ChallengeBoardProps> = ({ onChallengeSelec
150150
<select
151151
value={selectedDifficulty}
152152
onChange={(e) => setSelectedDifficulty(e.target.value)}
153-
className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
153+
className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
154154
>
155155
{difficulties.map(difficulty => (
156156
<option key={difficulty} value={difficulty}>
@@ -159,16 +159,24 @@ export const ChallengeBoard: React.FC<ChallengeBoardProps> = ({ onChallengeSelec
159159
))}
160160
</select>
161161

162-
<div className="flex border border-gray-300 rounded-lg">
162+
<div className="flex border border-gray-300 dark:border-gray-600 rounded-lg">
163163
<button
164164
onClick={() => setViewMode('grid')}
165-
className={`p-2 ${viewMode === 'grid' ? 'bg-purple-100 text-purple-600' : 'text-gray-600 hover:bg-gray-100'} transition-colors`}
165+
className={`p-2 transition-colors duration-200 ${
166+
viewMode === 'grid'
167+
? 'bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-400'
168+
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
169+
}`}
166170
>
167171
<Grid className="h-4 w-4" />
168172
</button>
169173
<button
170174
onClick={() => setViewMode('list')}
171-
className={`p-2 ${viewMode === 'list' ? 'bg-purple-100 text-purple-600' : 'text-gray-600 hover:bg-gray-100'} transition-colors`}
175+
className={`p-2 transition-colors duration-200 ${
176+
viewMode === 'list'
177+
? 'bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-400'
178+
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
179+
}`}
172180
>
173181
<List className="h-4 w-4" />
174182
</button>
@@ -177,8 +185,8 @@ export const ChallengeBoard: React.FC<ChallengeBoardProps> = ({ onChallengeSelec
177185
</div>
178186

179187
{/* Results count */}
180-
<div className="mt-4 pt-4 border-t border-gray-200">
181-
<p className="text-sm text-gray-600">
188+
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
189+
<p className="text-sm text-gray-600 dark:text-gray-400">
182190
Showing {challengesWithBookmarks.length} of {mockChallenges.length} challenges
183191
</p>
184192
</div>
@@ -190,24 +198,24 @@ export const ChallengeBoard: React.FC<ChallengeBoardProps> = ({ onChallengeSelec
190198
? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
191199
: 'grid-cols-1'
192200
}`}>
193-
{challengesWithBookmarks.map((challenge) => (
194-
<ChallengeCard
195-
key={challenge.id}
196-
challenge={challenge}
197-
onSelect={onChallengeSelect}
198-
onBookmark={handleBookmark}
199-
/>
200-
))}
201+
{challengesWithBookmarks.length > 0 ? (
202+
challengesWithBookmarks.map((challenge) => (
203+
<ChallengeCard
204+
key={challenge.id}
205+
challenge={challenge}
206+
onSelect={onChallengeSelect}
207+
onBookmark={handleBookmark}
208+
/>
209+
))
210+
) : (
211+
<div className="text-center py-12 col-span-full">
212+
<Filter className="h-12 w-12 text-gray-400 dark:text-gray-600 mx-auto mb-4" />
213+
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No challenges found</h3>
214+
<p className="text-gray-600 dark:text-gray-400">Try adjusting your search or filters</p>
215+
</div>
216+
)}
201217
</div>
202-
203-
{challengesWithBookmarks.length === 0 && (
204-
<div className="text-center py-12">
205-
<Filter className="h-12 w-12 text-gray-400 mx-auto mb-4" />
206-
<h3 className="text-lg font-medium text-gray-900 mb-2">No challenges found</h3>
207-
<p className="text-gray-600">Try adjusting your search or filters</p>
208-
</div>
209-
)}
210218
</div>
211219
</div>
212220
);
213-
};
221+
};

‎src/components/Challenges/ChallengeCard.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,25 @@ export const ChallengeCard: React.FC<ChallengeCardProps> = ({
2626
onBookmark
2727
}) => {
2828
const difficultyColors = {
29-
Easy: 'bg-green-100 text-green-800',
30-
Medium: 'bg-yellow-100 text-yellow-800',
31-
Hard: 'bg-red-100 text-red-800'
29+
Easy: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
30+
Medium: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
31+
Hard: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
3232
};
3333

3434
const domainColors: Record<string, string> = {
35-
Design: 'bg-pink-100 text-pink-800',
36-
Development: 'bg-blue-100 text-blue-800',
37-
Writing: 'bg-purple-100 text-purple-800',
38-
Data: 'bg-indigo-100 text-indigo-800',
39-
Creative: 'bg-orange-100 text-orange-800'
35+
Design: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
36+
Development: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
37+
Writing: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
38+
Data: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
39+
Creative: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300'
4040
};
4141

4242
return (
43-
<div className="bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 group hover:transform hover:-translate-y-1">
43+
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-all duration-200 group hover:transform hover:-translate-y-1">
4444
<div className="p-6">
4545
<div className="flex items-start justify-between mb-4">
4646
<div className="flex items-center space-x-2">
47-
<span className={`px-2 py-1 rounded-full text-xs font-medium ${domainColors[challenge.domain] || 'bg-gray-100 text-gray-800'}`}>
47+
<span className={`px-2 py-1 rounded-full text-xs font-medium ${domainColors[challenge.domain] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'}`}>
4848
{challenge.domain}
4949
</span>
5050
<span className={`px-2 py-1 rounded-full text-xs font-medium ${difficultyColors[challenge.difficulty]}`}>
@@ -59,21 +59,21 @@ export const ChallengeCard: React.FC<ChallengeCardProps> = ({
5959
className={`p-1 rounded transition-colors ${
6060
challenge.isBookmarked
6161
? 'text-yellow-500 hover:text-yellow-600'
62-
: 'text-gray-400 hover:text-yellow-500'
62+
: 'text-gray-400 dark:text-gray-500 hover:text-yellow-500'
6363
}`}
6464
>
6565
<Star className={`h-4 w-4 ${challenge.isBookmarked ? 'fill-current' : ''}`} />
6666
</button>
6767
</div>
6868

69-
<h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">
69+
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">
7070
{challenge.title}
7171
</h3>
72-
<p className="text-gray-600 text-sm mb-4 line-clamp-3">
72+
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3">
7373
{challenge.description}
7474
</p>
7575

76-
<div className="flex items-center justify-between text-sm text-gray-500 mb-4">
76+
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 mb-4">
7777
<div className="flex items-center space-x-4">
7878
<div className="flex items-center">
7979
<Clock className="h-4 w-4 mr-1" />
@@ -94,13 +94,13 @@ export const ChallengeCard: React.FC<ChallengeCardProps> = ({
9494
{challenge.tags.slice(0, 3).map((tag) => (
9595
<span
9696
key={tag}
97-
className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded"
97+
className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs rounded"
9898
>
9999
{tag}
100100
</span>
101101
))}
102102
{challenge.tags.length > 3 && (
103-
<span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
103+
<span className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs rounded">
104104
+{challenge.tags.length - 3} more
105105
</span>
106106
)}
@@ -116,4 +116,4 @@ export const ChallengeCard: React.FC<ChallengeCardProps> = ({
116116
</div>
117117
</div>
118118
);
119-
};
119+
};

0 commit comments

Comments
 (0)