← back to Sdcc Awards
cypressaward/frontend/app/news-drudge/page.tsx
366 lines
'use client'
import { useEffect, useState } from '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 default function NewsDrudgePage() {
const [news, setNews] = useState<NewsItem[]>([])
const [loading, setLoading] = useState(true)
useEffect(() => {
fetchNews()
}, [])
async function fetchNews() {
try {
// Fetch ALL cy pres news
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(500)
if (error) throw error
if (data) {
setNews(data)
}
} catch (error) {
console.error('Error fetching news:', error)
} finally {
setLoading(false)
}
}
// Group news by category for Drudge-style layout
const newsByCategory = news.reduce((acc, item) => {
if (!acc[item.category]) {
acc[item.category] = []
}
acc[item.category].push(item)
return acc
}, {} as Record<string, NewsItem[]>)
// Get top stories (most recent)
const topStories = news.slice(0, 5)
const breakingNews = news.filter(item =>
item.title.toLowerCase().includes('breaking') ||
item.title.toLowerCase().includes('scotus') ||
item.title.toLowerCase().includes('supreme court')
).slice(0, 3)
return (
<div className="min-h-screen bg-white text-black" style={{ fontFamily: 'Georgia, serif' }}>
{/* Drudge-style Header */}
<div className="text-center py-4 border-b-4 border-black">
<h1 className="text-5xl font-bold tracking-wider">CY PRES REPORT</h1>
<div className="text-sm mt-2 text-gray-700">
{new Date().toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
}).toUpperCase()}
</div>
</div>
{loading ? (
<div className="text-center py-12">
<div className="text-xl">LOADING...</div>
</div>
) : (
<div className="max-w-7xl mx-auto px-4 py-6">
{/* Breaking News Banner */}
{breakingNews.length > 0 && (
<div className="mb-8">
<div className="bg-red-700 text-white text-center py-2 px-4 font-bold text-lg mb-3">
*** BREAKING ***
</div>
{breakingNews.map(item => (
<div key={item.id} className="text-center mb-2">
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="text-red-700 hover:underline font-bold text-xl"
>
{item.title.toUpperCase()}
</a>
</div>
))}
<hr className="border-t-2 border-black my-4" />
</div>
)}
{/* Main Three Column Layout */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Left Column */}
<div className="space-y-6">
<div>
<div className="font-bold text-lg mb-3 text-center bg-gray-200 py-1">
CONSTITUTIONAL & STATE LAW
</div>
{newsByCategory['Cy Pres Constitutional Law']?.slice(0, 15).map(item => (
<div key={item.id} className="mb-3">
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-800 hover:underline hover:text-red-700 text-sm leading-tight block"
>
{item.title}
</a>
<div className="text-xs text-gray-600 mt-1">
{item.source} • {new Date(item.published_date).toLocaleDateString()}
</div>
</div>
))}
</div>
<div>
<div className="font-bold text-lg mb-3 text-center bg-gray-200 py-1">
STATE LAW UPDATES
</div>
{newsByCategory['Cy Pres State Law']?.slice(0, 10).map(item => (
<div key={item.id} className="mb-3">
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-800 hover:underline hover:text-red-700 text-sm leading-tight block"
>
{item.title}
</a>
<div className="text-xs text-gray-600 mt-1">
{item.source}
</div>
</div>
))}
</div>
</div>
{/* Center Column - Main Headlines */}
<div className="space-y-6">
<div>
<div className="font-bold text-2xl mb-4 text-center border-b-2 border-black pb-2">
TOP STORIES
</div>
{topStories.map(item => (
<div key={item.id} className="mb-4 pb-3 border-b border-gray-300">
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="text-black hover:text-red-700 font-bold text-lg leading-tight block mb-2"
>
{item.title}
</a>
<p className="text-sm text-gray-700 mb-1">
{item.description.substring(0, 150)}...
</p>
<div className="text-xs text-gray-600">
{item.source} • {item.author} • {new Date(item.published_date).toLocaleDateString()}
</div>
</div>
))}
</div>
<div>
<div className="font-bold text-lg mb-3 text-center bg-gray-200 py-1">
LEGAL ANALYSIS
</div>
{newsByCategory['Cy Pres Legal Analysis']?.slice(0, 12).map(item => (
<div key={item.id} className="mb-3">
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-800 hover:underline hover:text-red-700 text-sm leading-tight block"
>
{item.title}
</a>
<div className="text-xs text-gray-600 mt-1">
{new Date(item.published_date).toLocaleDateString()}
</div>
</div>
))}
</div>
</div>
{/* Right Column */}
<div className="space-y-6">
<div>
<div className="font-bold text-lg mb-3 text-center bg-gray-200 py-1">
PRIVACY & TECH
</div>
{newsByCategory['Cy Pres Privacy Law']?.slice(0, 12).map(item => (
<div key={item.id} className="mb-3">
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-800 hover:underline hover:text-red-700 text-sm leading-tight block"
>
{item.title}
</a>
<div className="text-xs text-gray-600 mt-1">
{item.source}
</div>
</div>
))}
</div>
<div>
<div className="font-bold text-lg mb-3 text-center bg-gray-200 py-1">
HEALTHCARE & EDUCATION
</div>
{[...newsByCategory['Cy Pres Healthcare'] || [],
...newsByCategory['Cy Pres Education Law'] || []].slice(0, 10).map(item => (
<div key={item.id} className="mb-3">
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-800 hover:underline hover:text-red-700 text-sm leading-tight block"
>
{item.title}
</a>
<div className="text-xs text-gray-600 mt-1">
{new Date(item.published_date).toLocaleDateString()}
</div>
</div>
))}
</div>
<div>
<div className="font-bold text-lg mb-3 text-center bg-gray-200 py-1">
STUDENT DEBT
</div>
{newsByCategory['Mass Tort Student Debt']?.slice(0, 10).map(item => (
<div key={item.id} className="mb-3">
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-800 hover:underline hover:text-red-700 text-sm leading-tight block"
>
{item.title}
</a>
<div className="text-xs text-gray-600 mt-1">
{item.source}
</div>
</div>
))}
</div>
</div>
</div>
{/* Bottom Section - More Stories */}
<div className="mt-12 pt-8 border-t-4 border-black">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<div className="font-bold text-lg mb-3 text-center bg-gray-200 py-1">
ECONOMICS & REFORM
</div>
{[...newsByCategory['Cy Pres Economics'] || [],
...newsByCategory['Cy Pres Reform'] || []].slice(0, 15).map(item => (
<div key={item.id} className="mb-2">
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-800 hover:underline hover:text-red-700 text-sm"
>
{item.title}
</a>
<span className="text-xs text-gray-600 ml-2">
({item.source})
</span>
</div>
))}
</div>
<div>
<div className="font-bold text-lg mb-3 text-center bg-gray-200 py-1">
LEGAL ETHICS & THEORY
</div>
{[...newsByCategory['Cy Pres Legal Ethics'] || [],
...newsByCategory['Cy Pres Legal Theory'] || []].slice(0, 15).map(item => (
<div key={item.id} className="mb-2">
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-800 hover:underline hover:text-red-700 text-sm"
>
{item.title}
</a>
<span className="text-xs text-gray-600 ml-2">
({item.source})
</span>
</div>
))}
</div>
</div>
</div>
{/* Complete Archive Link */}
<div className="mt-12 text-center py-8 border-t-2 border-black">
<div className="text-lg font-bold mb-4">
COMPLETE ARCHIVE: {news.length} ARTICLES
</div>
<div className="grid grid-cols-1 gap-1 text-left max-w-4xl mx-auto">
{news.map(item => (
<div key={item.id} className="py-1">
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-800 hover:underline hover:text-red-700 text-sm"
>
{item.title}
</a>
<span className="text-xs text-gray-600 ml-2">
- {item.source} ({new Date(item.published_date).toLocaleDateString()})
</span>
</div>
))}
</div>
</div>
</div>
)}
{/* Footer */}
<div className="text-center py-4 mt-12 border-t-4 border-black text-xs text-gray-600">
CY PRES REPORT © 2024 | TRACKING CLASS ACTION SETTLEMENT DISTRIBUTIONS
</div>
</div>
)
}