← back to Sdcc Awards

cypressaward/frontend/components/home/news-section.tsx

150 lines

'use client'

import { useState, useEffect } from 'react'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Clock, ExternalLink, Newspaper } from 'lucide-react'
import { supabase } from '@/lib/supabase'

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

export function NewsSection() {
  const [latestArticle, setLatestArticle] = useState<NewsItem | null>(null)
  const [isLoading, setIsLoading] = useState(true)

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

  async function fetchLatestNews() {
    try {
      const allowedCategories = [
        'Cy Pres Constitutional Law',
        'Cy Pres State Law',
        'Cy Pres Legal Analysis',
        'Cy Pres Economics',
        'Cy Pres Legal Theory',
        'Cy Pres Privacy Law',
        'Cy Pres Legal Ethics',
        'Cy Pres Healthcare',
        'Cy Pres Education Law',
        'Cy Pres Reform',
        'Mass Tort Student Debt'
      ]
      
      const { data, error } = await supabase
        .from('scraped_news')
        .select('*')
        .in('category', allowedCategories)
        .order('published_date', { ascending: false })
        .limit(1)
        .single()

      if (error) {
        console.error('Error fetching news:', error)
        // Fallback to hardcoded article if database is empty
        setLatestArticle({
          id: 1,
          title: 'Wells Fargo Home Mortgage Settlement Directs $3.5M to National Consumer Law Center',
          description: 'Federal judge approves significant cy pres distribution to consumer protection nonprofit as part of $142M overtime pay settlement, marking one of the largest awards in 2024.',
          url: 'https://www.law360.com/articles/wells-fargo-cy-pres-2024',
          published_date: '2024-10-15',
          author: 'Law360 Staff',
          category: 'Cy Pres Legal Analysis',
          source: 'Law360'
        })
      } else if (data) {
        setLatestArticle(data)
      }
    } catch (error) {
      console.error('Error:', error)
    } finally {
      setIsLoading(false)
    }
  }

  const getTimeAgo = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60))
    
    if (diffInHours < 1) return 'Just now'
    if (diffInHours < 24) return `${diffInHours}h ago`
    const diffInDays = Math.floor(diffInHours / 24)
    if (diffInDays === 1) return 'Yesterday'
    return `${diffInDays} days ago`
  }

  if (isLoading) {
    return (
      <div className="h-32 bg-gray-200 rounded-lg animate-pulse"></div>
    )
  }

  if (!latestArticle) {
    return null
  }

  return (
    <div>
      <Card className="p-6 hover:shadow-lg transition-shadow bg-gradient-to-r from-blue-50 to-indigo-50">
        <div className="flex items-start justify-between mb-3">
          <div className="flex items-center text-sm text-gray-600">
            <Newspaper className="h-4 w-4 mr-2" />
            <span className="font-medium">{latestArticle.source}</span>
            <span className="mx-2">•</span>
            <Clock className="h-4 w-4 mr-1" />
            <span>{getTimeAgo(latestArticle.published_date)}</span>
          </div>
          <Badge variant="secondary" className="text-xs">
            {latestArticle.category.replace('Cy Pres ', '')}
          </Badge>
        </div>
        
        <h3 className="font-bold text-xl mb-3 text-gray-900">
          {latestArticle.title}
        </h3>
        
        <p className="text-gray-700 mb-4 line-clamp-3">
          {latestArticle.description}
        </p>
        
        <div className="flex items-center justify-between">
          {latestArticle.author && (
            <span className="text-sm text-gray-500">
              By {latestArticle.author}
            </span>
          )}
          
          <a
            href={latestArticle.url}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline"
          >
            Read full article
            <ExternalLink className="h-4 w-4 ml-1" />
          </a>
        </div>
      </Card>

      <div className="mt-4 flex justify-between items-center">
        <p className="text-sm text-gray-600">
          Latest cy pres news from legal publications and court filings
        </p>
        <a href="/news" className="text-sm text-blue-600 hover:underline">
          View all news →
        </a>
      </div>
    </div>
  )
}