`cypressaward/frontend/app/news/page.tsx`

207 lines
'use client'

import { useEffect, useState } from 'react'
import { validateAndFixUrl, handleLinkClick } from '@/lib/link-handler'

interface NewsItem {
  id: number
  title: string
  description: string
  url: string
  published_date: string
  author: string
  category: string
  source: string
}

export default function NewsPage() {
  const [news, setNews] = useState<NewsItem[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchNews()
  }, [])

  async function fetchNews() {
    try {
      // Use real verified news data only
      const { realCyPresNews } = await import('@/lib/news-data')
      
      // Sort by date (newest first)
      const sortedNews = [...realCyPresNews].sort((a, b) => 
        new Date(b.published_date).getTime() - new Date(a.published_date).getTime()
      )
      
      setNews(sortedNews)
      setLoading(false)
      
    } catch (error) {
      console.error('Error:', error)
      setLoading(false)
    }
  }

  function formatDate(dateString: string) {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    })
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-white">
        <div className="container mx-auto px-4 py-8">
          <div className="text-center">Loading cy pres news...</div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-white font-serif">
      {/* Header */}
      <div className="bg-black text-white py-2">
        <div className="container mx-auto px-4">
          <h1 className="text-center text-2xl font-bold tracking-wider">
            CY PRES NEWS
          </h1>
        </div>
      </div>

      <div className="container mx-auto px-4 py-8 max-w-6xl">
        {/* Breaking News Section */}
        <div className="mb-8">
          <div className="font-bold text-lg mb-3 text-center bg-red-600 text-white py-1">
            🔴 BREAKING NEWS - LATEST
          </div>
          <div className="space-y-2">
            {news.slice(0, 5).map(item => (
              <div key={item.id} className="flex items-center justify-between py-1 border-b border-gray-200">
                <a 
                  href={validateAndFixUrl(item.url)}
                  onClick={(e) => handleLinkClick(e, item.url)}
                  className="text-blue-600 hover:underline text-sm font-medium flex-1 mr-4"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {item.title}
                </a>
                <span className="text-xs text-gray-500 whitespace-nowrap">
                  {formatDate(item.published_date)}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Main News Grid */}
        <div className="grid md:grid-cols-3 gap-6">
          {/* Left Column */}
          <div className="space-y-4">
            <h2 className="text-xl font-bold border-b-2 border-black pb-1 mb-4">
              PRIVACY & DATA
            </h2>
            {news.filter(item => item.category.includes('Privacy')).map(item => (
              <div key={item.id} className="mb-4">
                <a 
                  href={validateAndFixUrl(item.url)}
                  onClick={(e) => handleLinkClick(e, item.url)}
                  className="text-blue-600 hover:underline font-medium block mb-1"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {item.title}
                </a>
                <p className="text-sm text-gray-600 mb-1">{item.description}</p>
                <div className="text-xs text-gray-400">
                  {item.source} • {formatDate(item.published_date)}
                </div>
              </div>
            ))}
          </div>

          {/* Middle Column */}
          <div className="space-y-4">
            <h2 className="text-xl font-bold border-b-2 border-black pb-1 mb-4">
              ENVIRONMENTAL
            </h2>
            {news.filter(item => item.category.includes('Environmental')).map(item => (
              <div key={item.id} className="mb-4">
                <a 
                  href={validateAndFixUrl(item.url)}
                  onClick={(e) => handleLinkClick(e, item.url)}
                  className="text-blue-600 hover:underline font-medium block mb-1"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {item.title}
                </a>
                <p className="text-sm text-gray-600 mb-1">{item.description}</p>
                <div className="text-xs text-gray-400">
                  {item.source} • {formatDate(item.published_date)}
                </div>
              </div>
            ))}
          </div>

          {/* Right Column */}
          <div className="space-y-4">
            <h2 className="text-xl font-bold border-b-2 border-black pb-1 mb-4">
              HEALTHCARE & CONSUMER
            </h2>
            {news.filter(item => 
              item.category.includes('Healthcare') || 
              item.category.includes('Consumer') || 
              item.category.includes('Securities')
            ).map(item => (
              <div key={item.id} className="mb-4">
                <a 
                  href={validateAndFixUrl(item.url)}
                  onClick={(e) => handleLinkClick(e, item.url)}
                  className="text-blue-600 hover:underline font-medium block mb-1"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {item.title}
                </a>
                <p className="text-sm text-gray-600 mb-1">{item.description}</p>
                <div className="text-xs text-gray-400">
                  {item.source} • {formatDate(item.published_date)}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Supreme Court Section */}
        <div className="mt-8 pt-6 border-t-2 border-black">
          <h2 className="text-xl font-bold mb-4">SUPREME COURT DECISIONS</h2>
          {news.filter(item => item.category.includes('Supreme Court')).map(item => (
            <div key={item.id} className="mb-4 p-4 bg-gray-50 rounded">
              <a 
                href={validateAndFixUrl(item.url)}
                onClick={(e) => handleLinkClick(e, item.url)}
                className="text-blue-600 hover:underline font-bold text-lg block mb-2"
                target="_blank"
                rel="noopener noreferrer"
              >
                {item.title}
              </a>
              <p className="text-gray-700 mb-2">{item.description}</p>
              <div className="text-sm text-gray-500">
                {item.source} • {formatDate(item.published_date)} • {item.author}
              </div>
            </div>
          ))}
        </div>

        {/* Footer */}
        <div className="mt-8 pt-4 border-t border-gray-300 text-center text-sm text-gray-500">
          Cy Pres News
        </div>
      </div>
    </div>
  )
}