70 lines
1.8 KiB
JavaScript
70 lines
1.8 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';
|
||
|
||
/**
|
||
* 热点事件区域组件
|
||
* @param {Array} events - 热点事件列表
|
||
* @param {Function} onEventClick - 事件点击追踪回调
|
||
*/
|
||
const HotEventsSection = ({ events, onEventClick }) => {
|
||
const cardBg = useColorModeValue('white', 'gray.800');
|
||
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={0} bg={cardBg}>
|
||
<CardHeader pb={0} display="flex" justifyContent="space-between" alignItems="flex-start">
|
||
<Box>
|
||
<Heading size="md">🔥 热点事件</Heading>
|
||
<p className="section-subtitle" style={{paddingTop: '8px'}}>展示最近5天内涨幅最高的事件，助您把握市场热点</p>
|
||
</Box>
|
||
{/* 页码指示器 */}
|
||
{totalPages > 1 && (
|
||
<Badge
|
||
colorScheme="blue"
|
||
fontSize="sm"
|
||
px={3}
|
||
py={1}
|
||
borderRadius="full"
|
||
ml={4}
|
||
>
|
||
{currentPage} / {totalPages}
|
||
</Badge>
|
||
)}
|
||
</CardHeader>
|
||
<CardBody py={0} px={4}>
|
||
<HotEvents
|
||
events={events}
|
||
onPageChange={handlePageChange}
|
||
onEventClick={onEventClick}
|
||
/>
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default HotEventsSection;
|