news/app/components/list/List.tsx

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-xl font-semibold text-white hover:text-blue-600">{title}</h3>
        </div>

        {/* 时间部分：右侧 */}
        <p className="text-xl 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;