Skip to content

dark-mod in author page #478

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 7, 2025
Merged

dark-mod in author page #478

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 56 additions & 48 deletions src/pages/News/AuthorPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,12 +159,12 @@ const AuthorPage: React.FC = () => {
return (
<>
<Header />
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50">
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800">
<div className="container mx-auto px-4 py-8 max-w-7xl">
{/* Back Button */}
<motion.button
onClick={() => navigate(-1)}
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"
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"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Expand All @@ -174,7 +174,7 @@ const AuthorPage: React.FC = () => {

{/* Author Header */}
<motion.div
className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 lg:p-8 mb-8"
className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/20 p-4 sm:p-6 lg:p-8 mb-8"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
Expand All @@ -186,7 +186,7 @@ const AuthorPage: React.FC = () => {
<img
src={author.avatar}
alt={author.name}
className="w-24 h-24 sm:w-28 sm:h-28 lg:w-32 lg:h-32 rounded-full object-cover border-4 border-blue-100"
className="w-24 h-24 sm:w-28 sm:h-28 lg:w-32 lg:h-32 rounded-full object-cover border-4 border-blue-100 dark:border-blue-900"
/>
) : (
<div className="w-24 h-24 sm:w-28 sm:h-28 lg:w-32 lg:h-32 bg-blue-100 rounded-full flex items-center justify-center">
Expand All @@ -197,17 +197,19 @@ const AuthorPage: React.FC = () => {

{/* Author Info */}
<div className="flex-1 text-center sm:text-left">
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-2">
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-2">
{author.name}
</h1>
<div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-3">
<span className="text-lg lg:text-xl text-blue-600 font-medium">
<span className="text-lg lg:text-xl text-blue-600 dark:text-blue-400 font-medium">
{author.title}
</span>
{author.organization && (
<>
<span className="hidden sm:inline text-gray-400">at</span>
<div className="flex items-center justify-center sm:justify-start gap-1 text-gray-700">
<span className="hidden sm:inline text-gray-400 dark:text-gray-500">
at
</span>
<div className="flex items-center justify-center sm:justify-start gap-1 text-gray-700 dark:text-gray-300">
<Building className="w-4 h-4" />
<span className="font-medium">
{author.organization}
Expand All @@ -216,21 +218,21 @@ const AuthorPage: React.FC = () => {
</>
)}
</div>
<p className="text-gray-600 text-base lg:text-lg mb-4 max-w-2xl">
<p className="text-gray-600 dark:text-gray-300 text-base lg:text-lg mb-4 max-w-2xl">
{author.description}
</p>

{/* Quick Stats */}
<div className="flex flex-wrap justify-center sm:justify-start gap-4 text-sm text-gray-600">
<div className="flex items-center gap-1 bg-blue-50 px-3 py-1 rounded-full">
<div className="flex flex-wrap justify-center sm:justify-start gap-4 text-sm text-gray-600 dark:text-gray-300">
<div className="flex items-center gap-1 bg-blue-50 dark:bg-blue-900/30 px-3 py-1 rounded-full">
<BookOpen className="w-4 h-4" />
<span>
{posts.length}{' '}
{posts.length === 1 ? 'Article' : 'Articles'}
</span>
</div>
{author.organization && (
<div className="flex items-center gap-1 bg-gray-50 px-3 py-1 rounded-full">
<div className="flex items-center gap-1 bg-gray-50 dark:bg-gray-700/50 px-3 py-1 rounded-full">
<Building className="w-4 h-4" />
<span>{author.organization}</span>
</div>
Expand All @@ -249,16 +251,16 @@ const AuthorPage: React.FC = () => {
transition={{ duration: 0.5, delay: 0.2 }}
>
{/* About Section */}
<div className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 lg:p-8 mb-6 lg:mb-8">
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/20 p-4 sm:p-6 lg:p-8 mb-6 lg:mb-8">
<MarkdownRenderer content={author.content} />
</div>

{/* Articles Section */}
<div className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 lg:p-8">
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/20 p-4 sm:p-6 lg:p-8">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
<div className="flex items-center gap-2">
<BookOpen className="w-5 h-5 text-blue-600" />
<h3 className="text-xl lg:text-2xl font-bold text-gray-900">
<BookOpen className="w-5 h-5 text-blue-600 dark:text-blue-400" />
<h3 className="text-xl lg:text-2xl font-bold text-gray-900 dark:text-white">
Articles ({filteredPosts.length})
</h3>
</div>
Expand All @@ -268,21 +270,21 @@ const AuthorPage: React.FC = () => {
<div className="flex flex-col sm:flex-row gap-3">
{/* Search */}
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 w-4 h-4" />
<input
type="text"
placeholder="Search articles..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm w-full sm:w-auto"
className="pl-10 pr-4 py-2 border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent text-sm w-full sm:w-auto placeholder-gray-400 dark:placeholder-gray-500"
/>
</div>

{/* Category Filter */}
<select
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
className="px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
className="px-3 py-2 border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent text-sm"
>
{getUniqueCategories().map((category) => (
<option key={category} value={category}>
Expand All @@ -297,20 +299,22 @@ const AuthorPage: React.FC = () => {
onChange={(e) =>
setSortBy(e.target.value as 'date' | 'title')
}
className="px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
className="px-3 py-2 border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700
text-gray-900 dark:text-gray-100 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400
focus:border-transparent text-sm"
>
<option value="date">Sort by Date</option>
<option value="title">Sort by Title</option>
</select>

{/* View Toggle */}
<div className="flex bg-gray-100 rounded-lg p-1">
<div className="flex bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
<button
onClick={() => setViewMode('grid')}
className={`p-2 rounded-md transition-colors ${
viewMode === 'grid'
? 'bg-white text-blue-600 shadow-sm'
: 'text-gray-600'
? 'bg-white dark:bg-gray-600 text-blue-600 dark:text-blue-400 shadow-sm dark:shadow-black/20'
: 'text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400'
}`}
>
<Grid className="w-4 h-4" />
Expand All @@ -319,8 +323,8 @@ const AuthorPage: React.FC = () => {
onClick={() => setViewMode('list')}
className={`p-2 rounded-md transition-colors ${
viewMode === 'list'
? 'bg-white text-blue-600 shadow-sm'
: 'text-gray-600'
? 'bg-white dark:bg-gray-600 text-blue-600 dark:text-blue-400 shadow-sm dark:shadow-black/20'
: 'text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400'
}`}
>
<List className="w-4 h-4" />
Expand All @@ -336,12 +340,12 @@ const AuthorPage: React.FC = () => {
<div className="text-4xl mb-4">
{searchTerm || selectedCategory !== 'All' ? '🔍' : '📝'}
</div>
<h4 className="text-lg font-semibold text-gray-700 mb-2">
<h4 className="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">
{searchTerm || selectedCategory !== 'All'
? 'No matching articles'
: 'No articles published yet'}
</h4>
<p className="text-gray-600">
<p className="text-gray-600 dark:text-gray-400">
{searchTerm || selectedCategory !== 'All'
? 'Try adjusting your search or filter criteria'
: 'Articles will appear here when published'}
Expand Down Expand Up @@ -374,8 +378,8 @@ const AuthorPage: React.FC = () => {
<motion.article
key={post.slug}
className={`
border border-gray-200 rounded-lg hover:border-blue-300 hover:shadow-md
transition-all duration-300 cursor-pointer group bg-white
border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-300 dark:hover:border-blue-500 hover:shadow-md dark:hover:shadow-blue-500/10
transition-all duration-300 cursor-pointer group bg-white dark:bg-gray-800
${viewMode === 'list' ? 'flex gap-4 p-4' : 'p-4'}
`}
onClick={() => handlePostClick(post)}
Expand All @@ -396,14 +400,14 @@ const AuthorPage: React.FC = () => {
)}

<div className="flex-1">
<h4 className="font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors">
<h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
{post.title}
</h4>
<p className="text-sm text-gray-600 mb-3 line-clamp-2">
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">
{post.excerpt}
</p>

<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-xs text-gray-500">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-xs text-gray-500 dark:text-gray-400">
<div className="flex items-center gap-3">
<div className="flex items-center gap-1">
<Calendar className="w-3 h-3" />
Expand All @@ -421,7 +425,7 @@ const AuthorPage: React.FC = () => {
</div>
)}
</div>
<span className="px-2 py-1 bg-blue-100 text-blue-600 rounded-full text-xs font-medium">
<span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full text-xs font-medium">
{post.category}
</span>
</div>
Expand All @@ -436,13 +440,14 @@ const AuthorPage: React.FC = () => {
<div className="text-center mt-8">
<motion.button
onClick={handleShowMore}
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center gap-2 mx-auto"
className="px-6 py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white
rounded-lg transition-colors font-medium flex items-center gap-2 mx-auto shadow-md dark:shadow-blue-500/20"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Load More Articles
<ChevronDown className="w-4 h-4" />
<span className="text-xs bg-blue-500 px-2 py-1 rounded-full">
<span className="text-xs bg-blue-500 dark:bg-blue-600 px-2 py-1 rounded-full">
+{Math.min(6, filteredPosts.length - displayCount)}
</span>
</motion.button>
Expand All @@ -461,30 +466,33 @@ const AuthorPage: React.FC = () => {
transition={{ duration: 0.5, delay: 0.3 }}
>
{/* Author Stats Card */}
<div className="bg-white rounded-2xl shadow-xl p-6 mb-6">
<h3 className="text-lg font-bold text-gray-900 mb-4">
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/20 p-6 mb-6">
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
Profile Stats
</h3>
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-gray-600">Total Articles</span>
<span className="font-semibold text-blue-600">
<span className="text-gray-600 dark:text-gray-300">
Total Articles
</span>
<span className="font-semibold text-blue-600 dark:text-blue-400">
{posts.length}
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Categories</span>
<span className="font-semibold text-gray-900">
<span className="text-gray-600 dark:text-gray-300">
Categories
</span>
<span className="font-semibold text-gray-900 dark:text-white">
{getUniqueCategories().length - 1}
</span>
</div>
</div>
</div>

</div>{' '}
{/* Categories Card */}
{getUniqueCategories().length > 2 && (
<div className="bg-white rounded-2xl shadow-xl p-6">
<h3 className="text-lg font-bold text-gray-900 mb-4">
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/20 p-6">
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
Categories
</h3>
<div className="space-y-2">
Expand All @@ -500,14 +508,14 @@ const AuthorPage: React.FC = () => {
onClick={() => setSelectedCategory(category)}
className={`w-full flex justify-between items-center p-2 rounded-lg transition-colors text-left ${
selectedCategory === category
? 'bg-blue-50 text-blue-700'
: 'hover:bg-gray-50'
? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
: 'hover:bg-gray-50 dark:hover:bg-gray-700/50 text-gray-700 dark:text-gray-300'
}`}
>
<span className="text-sm font-medium">
{category}
</span>
<span className="text-xs bg-gray-100 px-2 py-1 rounded-full">
<span className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-full">
{count}
</span>
</button>
Expand Down