98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
// src/views/Community/components/HotEventsSection.js
|
||
// 热点事件区域组件
|
||
|
||
import React, { useState } from 'react';
|
||
import {
|
||
Card,
|
||
CardHeader,
|
||
CardBody,
|
||
Heading,
|
||
Badge,
|
||
Box,
|
||
useColorModeValue
|
||
} from '@chakra-ui/react';
|
||
import HotEvents from './HotEvents';
|
||
import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme';
|
||
|
||
/**
|
||
* 热点事件区域组件
|
||
* @param {Array} events - 热点事件列表
|
||
* @param {Function} onEventClick - 事件点击追踪回调
|
||
*/
|
||
const HotEventsSection = ({ events, onEventClick }) => {
|
||
const cardBg = PROFESSIONAL_COLORS.background.card;
|
||
const borderColor = PROFESSIONAL_COLORS.border.default;
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [totalPages, setTotalPages] = useState(1);
|
||
|
||
// 处理页码变化
|
||
const handlePageChange = (page, total) => {
|
||
setCurrentPage(page);
|
||
setTotalPages(total);
|
||
};
|
||
|
||
// 如果没有热点事件，不渲染组件
|
||
if (!events || events.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<Card
|
||
mt={6}
|
||
mb={8}
|
||
bg={cardBg}
|
||
boxShadow="0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 195, 0, 0.1)"
|
||
borderWidth="1px"
|
||
borderColor={borderColor}
|
||
position="relative"
|
||
zIndex={1}
|
||
animation="fadeInUp 0.8s ease-out 0.4s both"
|
||
sx={{
|
||
'@keyframes fadeInUp': {
|
||
'0%': { opacity: 0, transform: 'translateY(30px)' },
|
||
'100%': { opacity: 1, transform: 'translateY(0)' }
|
||
}
|
||
}}
|
||
>
|
||
<CardHeader pb={3} display="flex" justifyContent="space-between" alignItems="flex-start">
|
||
<Box>
|
||
<Heading
|
||
size="lg"
|
||
bgGradient={PROFESSIONAL_COLORS.gradients.gold}
|
||
bgClip="text"
|
||
fontWeight="extrabold"
|
||
>
|
||
🔥 热点事件
|
||
</Heading>
|
||
<p className="section-subtitle" style={{paddingTop: '8px', color: PROFESSIONAL_COLORS.text.secondary}}>
|
||
展示最近5天内涨幅最高的事件，助您把握市场热点
|
||
</p>
|
||
</Box>
|
||
{/* 页码指示器 */}
|
||
{totalPages > 1 && (
|
||
<Badge
|
||
bg={PROFESSIONAL_COLORS.gold[500]}
|
||
color="black"
|
||
fontSize="sm"
|
||
px={3}
|
||
py={1}
|
||
borderRadius="full"
|
||
ml={4}
|
||
>
|
||
{currentPage} / {totalPages}
|
||
</Badge>
|
||
)}
|
||
</CardHeader>
|
||
<CardBody py={4} px={4}>
|
||
<HotEvents
|
||
events={events}
|
||
onPageChange={handlePageChange}
|
||
onEventClick={onEventClick}
|
||
/>
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default HotEventsSection;
|