87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import CountUp from '../reactbits/TextAnimations/CountUp/CountUp';
|
|
import RotatingText from '../reactbits/TextAnimations/RotatingText/RotatingText';
|
|
import { getMediaCount, getReviewsCount } from '../../services/pocketbaseService';
|
|
|
|
const StatsSection = () => {
|
|
const [stats, setStats] = useState({
|
|
mediaCount: 0,
|
|
reviewsCount: 0
|
|
});
|
|
|
|
useEffect(() => {
|
|
const fetchStats = async () => {
|
|
try {
|
|
const [mediaCount, reviewsCount] = await Promise.all([
|
|
getMediaCount(),
|
|
getReviewsCount()
|
|
]);
|
|
|
|
const mediaCountNum = parseInt(mediaCount) || 0;
|
|
const reviewsCountNum = parseInt(reviewsCount) || 0;
|
|
|
|
setStats({
|
|
mediaCount: mediaCountNum,
|
|
reviewsCount: reviewsCountNum
|
|
});
|
|
} catch (error) {
|
|
console.error('Error fetching stats:', error);
|
|
setStats({ mediaCount: 0, reviewsCount: 0 });
|
|
}
|
|
};
|
|
|
|
fetchStats();
|
|
}, []);
|
|
|
|
return (
|
|
<section className="py-16">
|
|
<div className="container-custom">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-campfire-light mb-4">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<span>Составляй рецензии на</span>
|
|
<div className="w-32 text-left">
|
|
<RotatingText
|
|
texts={[
|
|
"Фильмы",
|
|
"Сериалы",
|
|
"Игры",
|
|
"Аниме"
|
|
]}
|
|
className="inline-block text-campfire-amber drop-shadow-[0_0_8px_rgba(255,51,0,0.6)]"
|
|
rotationInterval={1500}
|
|
auto={true}
|
|
loop={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl mx-auto">
|
|
<div className="bg-campfire-darker p-6 rounded-lg shadow-lg text-center">
|
|
<h3 className="text-campfire-light text-lg mb-2">Медиа в каталоге</h3>
|
|
<CountUp
|
|
to={stats.mediaCount}
|
|
className="text-4xl font-bold text-campfire-amber"
|
|
duration={2}
|
|
start={0}
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-campfire-darker p-6 rounded-lg shadow-lg text-center">
|
|
<h3 className="text-campfire-light text-lg mb-2">Рецензий написано</h3>
|
|
<CountUp
|
|
to={stats.reviewsCount}
|
|
className="text-4xl font-bold text-campfire-amber"
|
|
duration={2}
|
|
start={0}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default StatsSection;
|