`cypressaward/frontend/app/find-nonprofits/page.tsx`

125 lines
'use client'

import { useState } from 'react'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Search, Filter, Building, MapPin, Award } from 'lucide-react'

export default function FindNonprofitsPage() {
  const [searchTerm, setSearchTerm] = useState('')
  const [selectedCategory, setSelectedCategory] = useState('all')

  const nonprofits = [
    {
      name: 'National Consumer Law Center',
      category: 'Consumer Protection',
      location: 'Boston, MA',
      cypresExperience: '15 awards',
      amount: '$25M received',
      focus: ['Financial Justice', 'Consumer Rights', 'Economic Security']
    },
    {
      name: 'Electronic Frontier Foundation',
      category: 'Privacy & Technology',
      location: 'San Francisco, CA',
      cypresExperience: '8 awards',
      amount: '$12M received',
      focus: ['Digital Privacy', 'Free Speech', 'Innovation']
    },
    {
      name: 'Student Borrower Protection Center',
      category: 'Education',
      location: 'Washington, DC',
      cypresExperience: '6 awards',
      amount: '$8M received',
      focus: ['Student Debt', 'Higher Education', 'Consumer Protection']
    }
  ]

  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="max-w-6xl mx-auto px-4">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">Find Qualified Nonprofits</h1>
          <p className="text-xl text-gray-600">Connect with vetted organizations for cy pres distributions</p>
        </div>

        <Card className="p-6 mb-8">
          <div className="flex gap-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
              <input
                type="text"
                placeholder="Search nonprofits..."
                className="w-full pl-10 pr-4 py-2 border rounded-md"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
            <select
              className="px-4 py-2 border rounded-md"
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value)}
            >
              <option value="all">All Categories</option>
              <option value="consumer">Consumer Protection</option>
              <option value="privacy">Privacy & Technology</option>
              <option value="education">Education</option>
              <option value="healthcare">Healthcare</option>
              <option value="environment">Environment</option>
            </select>
            <Button>
              <Filter className="h-4 w-4 mr-2" />
              Advanced Search
            </Button>
          </div>
        </Card>

        <div className="grid md:grid-cols-2 gap-6">
          {nonprofits.map((org, idx) => (
            <Card key={idx} className="p-6">
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h3 className="text-xl font-bold">{org.name}</h3>
                  <div className="flex items-center gap-2 mt-1 text-sm text-gray-600">
                    <MapPin className="h-4 w-4" />
                    {org.location}
                  </div>
                </div>
                <Badge>{org.category}</Badge>
              </div>
              
              <div className="grid grid-cols-2 gap-4 mb-4">
                <div>
                  <p className="text-sm text-gray-500">Cy Pres Experience</p>
                  <p className="font-medium">{org.cypresExperience}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Total Received</p>
                  <p className="font-medium text-green-600">{org.amount}</p>
                </div>
              </div>

              <div className="mb-4">
                <p className="text-sm text-gray-500 mb-2">Focus Areas:</p>
                <div className="flex flex-wrap gap-2">
                  {org.focus.map((area, i) => (
                    <Badge key={i} variant="secondary" className="text-xs">
                      {area}
                    </Badge>
                  ))}
                </div>
              </div>

              <div className="flex gap-2">
                <Button variant="outline" size="sm" className="flex-1">View Profile</Button>
                <Button size="sm" className="flex-1">Contact</Button>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}