news/app/components/FireNewsList.tsx

63 lines
2.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from 'react';
interface NewsItem {
content: string;
}
const FireNewsList: React.FC = () => {
const newsItems: NewsItem[] = [
{
content: "记者从16日召开的海南省政府新闻发布会上获悉2018年海南旅游总收入达1,262万人次支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉2018年海南旅游总收入达1,262万人次支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉2018年海南旅游总收入达1,262万人次支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉2018年海南旅游总收入达1,262万人次支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉2018年海南旅游总收入达1,262万人次支出达399.7亿元...",
},
];
return (
<div className="bg-gray-200 p-4 rounded-lg">
{/* 标题栏 */}
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-bold text-gray-800"></h2>
<a className="text-blue-600 hover:text-blue-800 font-medium">
{'>'}
</a>
</div>
{/* 新闻列表 */}
<div className="space-y-4">
{newsItems.map((item, index) => (
<div
key={index}
className="flex p-3 bg-white rounded-md shadow-sm hover:shadow-md transition-shadow duration-200"
>
{/* 内容部分 */}
<div className="flex-1 min-w-0">
<p className="text-gray-700 text-sm ">
{item.content}
<a
className="text-red-600 ml-1 font-medium hover:text-red-800"
>
[MORE]
</a>
</p>
</div>
</div>
))}
</div>
</div>
);
};
export default FireNewsList;