Skip to content

Commit 77ef9ea

Browse files
Sahithib04Sahithib04
authored
Merge branch 'main' into footer-icons
2 parents 7ff856f + 600e7c4 commit 77ef9ea

File tree

13 files changed

+640
-550
lines changed

13 files changed

+640
-550
lines changed

‎src/App.tsx‎

Lines changed: 66 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,12 @@ 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+
1213
import { FaTwitter, FaGithub, FaDiscord, FaLinkedin } from "react-icons/fa";
1314

15+
import { ThemeProvider } from './themeContent'; // Import the new ThemeProvider
16+
17+
1418
function App() {
1519
const [currentPage, setCurrentPage] = useState<string>('home');
1620
const [selectedChallenge, setSelectedChallenge] = useState<Challenge | null>(null);
@@ -59,27 +63,39 @@ function App() {
5963
};
6064

6165
return (
62-
<div className="min-h-screen bg-white">
63-
<Header currentPage={currentPage} onNavigate={handleNavigate} />
64-
<main>
65-
{renderPage()}
66-
</main>
67-
68-
{/* Footer */}
69-
{currentPage === 'home' && (
70-
<footer className="bg-gray-900 text-white py-16">
71-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
72-
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
73-
<div className="md:col-span-2">
74-
<div className="flex items-center mb-4">
75-
<div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-2 rounded-lg mr-3">
76-
<span className="font-bold text-xl">CT</span>
66+
<ThemeProvider>
67+
<div className="min-h-screen">
68+
<Header currentPage={currentPage} onNavigate={handleNavigate} />
69+
<main>
70+
{renderPage()}
71+
</main>
72+
73+
{/* Footer */}
74+
{currentPage === 'home' && (
75+
<footer className="bg-gray-900 text-white py-16">
76+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
77+
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
78+
<div className="md:col-span-2">
79+
<div className="flex items-center mb-4">
80+
<div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-2 rounded-lg mr-3">
81+
<span className="font-bold text-xl">CT</span>
82+
</div>
83+
<div>
84+
<h3 className="text-xl font-bold">Can I Try This?</h3>
85+
<p className="text-gray-400 text-sm">Real Skills, Real Growth</p>
86+
</div>
7787
</div>
78-
<div>
79-
<h3 className="text-xl font-bold">Can I Try This?</h3>
80-
<p className="text-gray-400 text-sm">Real Skills, Real Growth</p>
88+
<p className="text-gray-400 mb-6">
89+
A platform where learners explore real-world challenges across design, development,
90+
writing, data, and more. Build skills through practice, not just theory.
91+
</p>
92+
<div className="flex space-x-4">
93+
<button className="text-gray-400 hover:text-white transition-colors">Twitter</button>
94+
<button className="text-gray-400 hover:text-white transition-colors">GitHub</button>
95+
<button className="text-gray-400 hover:text-white transition-colors">Discord</button>
8196
</div>
8297
</div>
98+
8399
<p className="text-gray-400 mb-6">
84100
A platform where learners explore real-world challenges across design, development,
85101
writing, data, and more. Build skills through practice, not just theory.
@@ -118,38 +134,43 @@ function App() {
118134
>
119135
<FaLinkedin size={24} />
120136
</a>
137+
138+
139+
<div>
140+
<h4 className="font-semibold mb-4">Platform</h4>
141+
<ul className="space-y-2 text-gray-400">
142+
<li><button onClick={() => handleNavigate('challenges')} className="hover:text-white transition-colors">Challenges</button></li>
143+
<li><button onClick={() => handleNavigate('community')} className="hover:text-white transition-colors">Community</button></li>
144+
<li><button onClick={() => handleNavigate('submit')} className="hover:text-white transition-colors">Submit Challenge</button></li>
145+
<li><button className="hover:text-white transition-colors">Mentor Program</button></li>
146+
</ul>
147+
</div>
148+
149+
<div>
150+
<h4 className="font-semibold mb-4">Support</h4>
151+
<ul className="space-y-2 text-gray-400">
152+
<li><button className="hover:text-white transition-colors">Help Center</button></li>
153+
<li><button className="hover:text-white transition-colors">Guidelines</button></li>
154+
<li><button className="hover:text-white transition-colors">Contact Us</button></li>
155+
<li><button className="hover:text-white transition-colors">Privacy Policy</button></li>
156+
</ul>
157+
121158
</div>
122159
</div>
123160

124-
<div>
125-
<h4 className="font-semibold mb-4">Platform</h4>
126-
<ul className="space-y-2 text-gray-400">
127-
<li><button onClick={() => handleNavigate('challenges')} className="hover:text-white transition-colors">Challenges</button></li>
128-
<li><button onClick={() => handleNavigate('community')} className="hover:text-white transition-colors">Community</button></li>
129-
<li><button onClick={() => handleNavigate('submit')} className="hover:text-white transition-colors">Submit Challenge</button></li>
130-
<li><button className="hover:text-white transition-colors">Mentor Program</button></li>
131-
</ul>
132-
</div>
133-
134-
<div>
135-
<h4 className="font-semibold mb-4">Support</h4>
136-
<ul className="space-y-2 text-gray-400">
137-
<li><button className="hover:text-white transition-colors">Help Center</button></li>
138-
<li><button className="hover:text-white transition-colors">Guidelines</button></li>
139-
<li><button className="hover:text-white transition-colors">Contact Us</button></li>
140-
<li><button className="hover:text-white transition-colors">Privacy Policy</button></li>
141-
</ul>
161+
<div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
162+
<p>&copy; 2024 Can I Try This? All rights reserved.</p>
142163
</div>
143164
</div>
144-
145-
<div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
146-
<p>&copy; 2024 Can I Try This? All rights reserved.</p>
147-
</div>
148-
</div>
149-
</footer>
150-
)}
151-
</div>
165+
</footer>
166+
)}
167+
</div>
168+
</ThemeProvider>
152169
);
153170
}
154171

155-
export default App;
172+
173+
export default App;
174+
175+
export default App;
176+

‎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)