52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { grassNewsData } from './NewsData'; // 引入基层新闻数据
|
|
|
|
interface NewsProps {
|
|
title?: string;
|
|
description?: string;
|
|
time?: string;
|
|
type?: string;
|
|
url?: string;
|
|
}
|
|
|
|
const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
|
|
return (
|
|
<div className="mb-4">
|
|
<div
|
|
onClick={() => url && window.open(url)}
|
|
className="flex items-center justify-between hover:text-blue-600 cursor-pointer transition duration-300 ease-in-out"
|
|
>
|
|
{/* 标题部分：左侧 */}
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 bg-white rounded-full mr-2"></div>
|
|
<h3 className="text-lg font-semibold text-white hover:text-blue-600">{title}</h3>
|
|
</div>
|
|
|
|
{/* 时间部分：右侧 */}
|
|
<p className="text-sm text-white hover:text-blue-600 text-right">{time}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 使用基层新闻数据渲染列表
|
|
const List: React.FC = () => {
|
|
// 调用 grassNewsData 函数获取基层新闻数据
|
|
const baseNews = grassNewsData();
|
|
|
|
return (
|
|
<div>
|
|
<div>
|
|
<div className="p-6">
|
|
<ul className="space-y-4">
|
|
{baseNews.map((news) => (
|
|
<NewsItem key={news.id} title={news.title} time={news.time} url={news.url} />
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default List; |