Skip to content

Commit 3f4015d

Browse files
kh-ub-aybkh-ub-ayb
committed
fixed visiblity issues in tags
1 parent 28bbb6e commit 3f4015d

File tree

1 file changed

+55
-46
lines changed

1 file changed

+55
-46
lines changed

‎src/pages/News/TagPage.tsx‎

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -184,12 +184,12 @@ const TagPage: React.FC = () => {
184184
return (
185185
<>
186186
<Header />
187-
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50">
187+
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
188188
<div className="container mx-auto px-4 py-8 max-w-7xl">
189189
{/* Back Button */}
190190
<motion.button
191191
onClick={() => navigate(-1)}
192-
className="mb-6 px-4 py-2 flex items-center text-blue-600 hover:text-blue-700 transition-colors rounded-md hover:bg-blue-50"
192+
className="mb-6 px-4 py-2 flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/30"
193193
whileHover={{ scale: 1.05 }}
194194
whileTap={{ scale: 0.95 }}
195195
>
@@ -199,40 +199,42 @@ const TagPage: React.FC = () => {
199199

200200
{/* Tag Header */}
201201
<motion.div
202-
className="bg-white rounded-2xl shadow-xl p-6 sm:p-8 mb-8"
202+
className="bg-white dark:bg-gray-800/80 rounded-2xl shadow-xl p-6 sm:p-8 mb-8"
203203
initial={{ opacity: 0, y: 20 }}
204204
animate={{ opacity: 1, y: 0 }}
205205
transition={{ duration: 0.5 }}
206206
>
207207
<div className="text-center">
208208
<div className="flex items-center justify-center gap-3 mb-4">
209-
<div className="p-3 bg-blue-100 rounded-full">
210-
<Tag className="w-8 h-8 text-blue-600" />
209+
<div className="p-3 bg-blue-100 dark:bg-blue-900/50 rounded-full">
210+
<Tag className="w-8 h-8 text-blue-600 dark:text-blue-400" />
211211
</div>
212-
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900">
212+
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white">
213213
#{tag}
214214
</h1>
215215
</div>
216-
<p className="text-gray-600 text-lg mb-6">
216+
<p className="text-gray-600 dark:text-gray-300 text-lg mb-6">
217217
{posts.length} {posts.length === 1 ? 'article' : 'articles'}{' '}
218218
tagged with #{tag}
219219
</p>
220220

221221
{/* Stats */}
222222
<div className="flex flex-wrap justify-center gap-4 text-sm">
223-
<div className="flex items-center gap-2 bg-blue-50 px-4 py-2 rounded-full">
224-
<BookOpen className="w-4 h-4 text-blue-600" />
225-
<span className="font-medium">{posts.length} Articles</span>
223+
<div className="flex items-center gap-2 bg-blue-50 dark:bg-blue-900/30 px-4 py-2 rounded-full">
224+
<BookOpen className="w-4 h-4 text-blue-600 dark:text-blue-400" />
225+
<span className="font-medium dark:text-gray-200">
226+
{posts.length} Articles
227+
</span>
226228
</div>
227-
<div className="flex items-center gap-2 bg-green-50 px-4 py-2 rounded-full">
228-
<TrendingUp className="w-4 h-4 text-green-600" />
229-
<span className="font-medium">
229+
<div className="flex items-center gap-2 bg-green-50 dark:bg-green-900/30 px-4 py-2 rounded-full">
230+
<TrendingUp className="w-4 h-4 text-green-600 dark:text-green-400" />
231+
<span className="font-medium dark:text-gray-200">
230232
{getUniqueCategories().length - 1} Categories
231233
</span>
232234
</div>
233-
<div className="flex items-center gap-2 bg-purple-50 px-4 py-2 rounded-full">
234-
<Tag className="w-4 h-4 text-purple-600" />
235-
<span className="font-medium">
235+
<div className="flex items-center gap-2 bg-purple-50 dark:bg-purple-900/30 px-4 py-2 rounded-full">
236+
<Tag className="w-4 h-4 text-purple-600 dark:text-purple-400" />
237+
<span className="font-medium dark:text-gray-200">
236238
{relatedTags.length} Related Tags
237239
</span>
238240
</div>
@@ -246,15 +248,15 @@ const TagPage: React.FC = () => {
246248
{/* Controls */}
247249
{posts.length > 0 && (
248250
<motion.div
249-
className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 mb-6"
251+
className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-6 mb-6"
250252
initial={{ opacity: 0, y: 20 }}
251253
animate={{ opacity: 1, y: 0 }}
252254
transition={{ duration: 0.5, delay: 0.1 }}
253255
>
254256
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
255257
<div className="flex items-center gap-2">
256-
<Filter className="w-5 h-5 text-gray-600" />
257-
<span className="font-medium text-gray-900">
258+
<Filter className="w-5 h-5 text-gray-600 dark:text-gray-400" />
259+
<span className="font-medium text-gray-900 dark:text-gray-100">
258260
Showing {filteredPosts.length} of {posts.length}{' '}
259261
articles
260262
</span>
@@ -332,14 +334,14 @@ const TagPage: React.FC = () => {
332334
{/* Posts Display */}
333335
{filteredPosts.length === 0 ? (
334336
<motion.div
335-
className="bg-white rounded-2xl shadow-xl p-12 text-center"
337+
className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-12 text-center"
336338
initial={{ opacity: 0 }}
337339
animate={{ opacity: 1 }}
338340
>
339341
<div className="text-6xl mb-6">
340342
{searchTerm || selectedCategory !== 'All' ? '🔍' : '🏷️'}
341343
</div>
342-
<h3 className="text-2xl font-bold text-gray-800 mb-4">
344+
<h3 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
343345
{searchTerm || selectedCategory !== 'All'
344346
? 'No matching articles'
345347
: 'No articles found'}
@@ -377,7 +379,8 @@ const TagPage: React.FC = () => {
377379
<motion.article
378380
key={post.slug}
379381
className={`
380-
bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300
382+
bg-white dark:bg-gray-800/90 rounded-2xl shadow-lg hover:shadow-xl
383+
dark:shadow-blue-500/5 transition-all duration-300
381384
cursor-pointer overflow-hidden group
382385
${viewMode === 'list' ? 'flex' : ''}
383386
`}
@@ -405,7 +408,7 @@ const TagPage: React.FC = () => {
405408
/>
406409
) : (
407410
<div
408-
className={`w-full bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center ${
411+
className={`w-full bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/50 dark:to-purple-900/50 flex items-center justify-center ${
409412
viewMode === 'list'
410413
? 'h-full'
411414
: 'h-48 sm:h-56'
@@ -420,25 +423,25 @@ const TagPage: React.FC = () => {
420423
className={`p-4 sm:p-6 ${viewMode === 'list' ? 'w-2/3 sm:w-3/4' : ''}`}
421424
>
422425
<div className="flex items-center gap-2 mb-3">
423-
<span className="px-3 py-1 text-xs font-bold bg-green-500 text-white rounded-full">
426+
<span className="px-3 py-1 text-xs font-bold bg-green-500 dark:bg-green-600 text-white rounded-full">
424427
{post.category}
425428
</span>
426429
</div>
427430

428431
<h2
429-
className={`font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors line-clamp-2 ${
432+
className={`font-bold text-gray-900 dark:text-white mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2 ${
430433
viewMode === 'list' ? 'text-lg' : 'text-xl'
431434
}`}
432435
>
433436
{post.title}
434437
</h2>
435438

436-
<p className="text-gray-600 mb-4 line-clamp-2 text-sm">
439+
<p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-2 text-sm">
437440
{post.excerpt}
438441
</p>
439442

440443
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
441-
<div className="flex items-center gap-4 text-sm text-gray-500">
444+
<div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
442445
{post.date && (
443446
<div className="flex items-center gap-1">
444447
<Calendar className="w-4 h-4" />
@@ -463,15 +466,15 @@ const TagPage: React.FC = () => {
463466
}}
464467
className={`px-2 py-1 text-xs rounded-full transition-colors ${
465468
postTag === tag
466-
? 'bg-blue-100 text-blue-600 font-semibold'
467-
: 'bg-gray-100 text-gray-600 hover:bg-blue-50 hover:text-blue-600'
469+
? 'bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 font-semibold'
470+
: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-blue-900/50 hover:text-blue-600 dark:hover:text-blue-400'
468471
}`}
469472
>
470473
#{postTag}
471474
</button>
472475
))}
473476
{post.tags.length > 3 && (
474-
<span className="px-2 py-1 text-xs bg-gray-100 text-gray-500 rounded-full">
477+
<span className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded-full">
475478
+{post.tags.length - 3}
476479
</span>
477480
)}
@@ -513,16 +516,16 @@ const TagPage: React.FC = () => {
513516
>
514517
{/* Related Tags */}
515518
{relatedTags.length > 0 && (
516-
<div className="bg-white rounded-2xl shadow-xl p-6">
517-
<h3 className="text-lg font-bold text-gray-900 mb-4">
519+
<div className="bg-white dark:bg-gray-800/80 rounded-2xl shadow-xl p-6">
520+
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
518521
Related Tags
519522
</h3>
520523
<div className="flex flex-wrap gap-2">
521524
{relatedTags.map((relatedTag) => (
522525
<button
523526
key={relatedTag}
524527
onClick={() => handleTagClick(relatedTag)}
525-
className="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-blue-100 hover:text-blue-700 transition-colors"
528+
className="px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
526529
>
527530
#{relatedTag}
528531
</button>
@@ -532,26 +535,32 @@ const TagPage: React.FC = () => {
532535
)}
533536

534537
{/* Tag Stats */}
535-
<div className="bg-white rounded-2xl shadow-xl p-6">
536-
<h3 className="text-lg font-bold text-gray-900 mb-4">
538+
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6">
539+
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
537540
Tag Statistics
538541
</h3>
539542
<div className="space-y-3">
540543
<div className="flex justify-between items-center">
541-
<span className="text-gray-600">Total Articles</span>
542-
<span className="font-semibold text-blue-600">
544+
<span className="text-gray-600 dark:text-gray-400">
545+
Total Articles
546+
</span>
547+
<span className="font-semibold text-blue-600 dark:text-blue-400">
543548
{posts.length}
544549
</span>
545550
</div>
546551
<div className="flex justify-between items-center">
547-
<span className="text-gray-600">Categories</span>
548-
<span className="font-semibold text-gray-900">
552+
<span className="text-gray-600 dark:text-gray-400">
553+
Categories
554+
</span>
555+
<span className="font-semibold text-gray-900 dark:text-gray-100">
549556
{getUniqueCategories().length - 1}
550557
</span>
551558
</div>
552559
<div className="flex justify-between items-center">
553-
<span className="text-gray-600">Related Tags</span>
554-
<span className="font-semibold text-gray-900">
560+
<span className="text-gray-600 dark:text-gray-400">
561+
Related Tags
562+
</span>
563+
<span className="font-semibold text-gray-900 dark:text-gray-100">
555564
{relatedTags.length}
556565
</span>
557566
</div>
@@ -560,8 +569,8 @@ const TagPage: React.FC = () => {
560569

561570
{/* Popular in Category */}
562571
{getUniqueCategories().length > 2 && (
563-
<div className="bg-white rounded-2xl shadow-xl p-6">
564-
<h3 className="text-lg font-bold text-gray-900 mb-4">
572+
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6">
573+
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
565574
Categories
566575
</h3>
567576
<div className="space-y-2">
@@ -577,14 +586,14 @@ const TagPage: React.FC = () => {
577586
onClick={() => setSelectedCategory(category)}
578587
className={`w-full flex justify-between items-center p-2 rounded-lg transition-colors text-left ${
579588
selectedCategory === category
580-
? 'bg-blue-50 text-blue-700'
581-
: 'hover:bg-gray-50'
589+
? 'bg-blue-50 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300'
590+
: 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
582591
}`}
583592
>
584593
<span className="text-sm font-medium">
585594
{category}
586595
</span>
587-
<span className="text-xs bg-gray-100 px-2 py-1 rounded-full">
596+
<span className="text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 px-2 py-1 rounded-full">
588597
{count}
589598
</span>
590599
</button>

0 commit comments

Comments
 (0)