129 lines
5.5 KiB
TypeScript
129 lines
5.5 KiB
TypeScript
import {Globe, Mail, ThumbsUp} from 'lucide-react';
|
||
import {useEffect, useState} from "react";
|
||
import axios from "axios";
|
||
import { Author } from "../types/auth";
|
||
import { Link } from 'react-router-dom';
|
||
import { VkIcon } from "../icons/custom/VkIcon";
|
||
import { OkIcon } from "../icons/custom/OkIcon";
|
||
import ArticlesWord from './Words/ArticlesWord';
|
||
|
||
|
||
export function AuthorsSection() {
|
||
const [authors, setAuthors] = useState<Author[]>([]);
|
||
const showAuthors = false;
|
||
|
||
// Загрузка авторов
|
||
useEffect(() => {
|
||
const fetchAuthors = async () => {
|
||
try {
|
||
const response = await axios.get('/api/authors', {
|
||
params: { role: 'WRITER' },
|
||
});
|
||
setAuthors(response.data);
|
||
} catch (error) {
|
||
console.error('Ошибка загрузки авторов:', error);
|
||
}
|
||
};
|
||
|
||
fetchAuthors();
|
||
}, []);
|
||
|
||
return (
|
||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||
{showAuthors && (
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl font-bold text-gray-900">Наши авторы</h2>
|
||
<p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
|
||
Познакомьтесь с талантливыми писателями и экспертами, работающими для Вас
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{showAuthors && (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{authors
|
||
.filter(a => a.isActive)
|
||
.map((author) => (
|
||
<div key={author.id} className="bg-white rounded-lg shadow-md overflow-hidden transition-transform hover:scale-[1.02] h-full">
|
||
<div className="p-6 flex flex-col flex-grow min-h-[200px] h-full">
|
||
<div className="flex items-center mb-4">
|
||
<img
|
||
src={author.avatarUrl}
|
||
alt={author.displayName}
|
||
className="w-14 h-14 rounded-full object-cover mr-4 transition-transform duration-300 hover:scale-150"
|
||
/>
|
||
<div>
|
||
<h3 className="text-xl font-bold text-gray-900">{author.displayName}</h3>
|
||
<div className="flex mt-2 space-x-2">
|
||
{author.okUrl && (
|
||
<a
|
||
href={author.okUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-gray-400 hover:text-blue-500 transition-colors"
|
||
>
|
||
<OkIcon size={18} />
|
||
</a>
|
||
)}
|
||
{author.vkUrl && (
|
||
<a
|
||
href={author.vkUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-gray-400 hover:text-pink-500 transition-colors"
|
||
>
|
||
<VkIcon size={18} />
|
||
</a>
|
||
)}
|
||
{author.websiteUrl && (
|
||
<a
|
||
href={author.websiteUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-gray-400 hover:text-gray-700 transition-colors"
|
||
>
|
||
<Globe size={18} />
|
||
</a>
|
||
)}
|
||
{author.email && (
|
||
<a
|
||
href={author.email}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-gray-400 hover:text-gray-700 transition-colors"
|
||
>
|
||
<Mail size={18} />
|
||
</a>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p className="text-gray-600">{author.bio}</p>
|
||
|
||
<div className="mt-auto pt-6 border-t border-gray-100">
|
||
<div className="flex justify-between items-center">
|
||
|
||
<div className="flex items-center text-sm text-gray-500 space-x-2">
|
||
<span> {author.articlesCount} <ArticlesWord articles={author.articlesCount} /> · </span>
|
||
<div className="flex items-center">
|
||
<ThumbsUp size={16} className="mr-1" />
|
||
<span>{author.totalLikes}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<Link
|
||
to={`/search?author=${author.id}&role=WRITER&authorName=${author.displayName}`}
|
||
className="text-blue-600 hover:text-blue-800 text-sm font-medium"
|
||
>
|
||
Статьи автора →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
);
|
||
} |