news/app/components/list/NewsList.tsx

40 lines
898 B
TypeScript

import React from 'react';
import { mockNewsData } from './NewsData'; // 导入新闻数据
interface NewsProps {
title?: string;
description?: string;
time?: string;
type?: string;
url?: string;
}
const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
return (
<div>
<div onClick={() => url && window.open(url)}
className="flex items-center justify-between hover:text-blue-500
cursor-pointer w-96">
<h3 >{title}</h3>
<p >{time}</p>
</div>
</div>
);
};
// 使用新闻数据渲染列表
const NewsList: React.FC = () => {
return (
<div>
<ul className="flex flex-col justify-center items-center h-screen">
{mockNewsData.map((news) => (
<NewsItem title={news.title} time={news.time} url={news.url} />
))}
</ul>
</div>
);
};
export default NewsList;