47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
// src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/TradingDateInfo.js
|
||
// 交易日期信息提示组件
|
||
|
||
import React from 'react';
|
||
import {
|
||
Box,
|
||
HStack,
|
||
Text,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
import { FaCalendarAlt } from 'react-icons/fa';
|
||
import moment from 'moment';
|
||
|
||
/**
|
||
* 交易日期信息提示组件
|
||
* @param {Object} props
|
||
* @param {string} props.effectiveTradingDate - 有效交易日期（涨跌幅数据日期）
|
||
* @param {string|Object} props.eventTime - 事件发生时间
|
||
*/
|
||
const TradingDateInfo = ({ effectiveTradingDate, eventTime }) => {
|
||
const sectionBg = useColorModeValue('gray.50', 'gray.750');
|
||
const headingColor = useColorModeValue('gray.700', 'gray.200');
|
||
const stockCountColor = useColorModeValue('gray.500', 'gray.400');
|
||
|
||
if (!effectiveTradingDate) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<Box mb={4} p={3} bg={sectionBg} borderRadius="md">
|
||
<HStack spacing={2}>
|
||
<FaCalendarAlt color="gray" />
|
||
<Text fontSize="sm" color={headingColor}>
|
||
涨跌幅数据日期：{effectiveTradingDate}
|
||
{eventTime && effectiveTradingDate !== moment(eventTime).format('YYYY-MM-DD') && (
|
||
<Text as="span" ml={2} fontSize="xs" color={stockCountColor}>
|
||
(事件发生于 {typeof eventTime === 'object' ? moment(eventTime).format('YYYY-MM-DD HH:mm') : moment(eventTime).format('YYYY-MM-DD HH:mm')}，显示下一交易日数据)
|
||
</Text>
|
||
)}
|
||
</Text>
|
||
</HStack>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default TradingDateInfo;
|