`cypressaward/frontend/components/home/law-firm-directory.tsx`

104 lines
'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Building2, Users, Briefcase, ArrowRight } from 'lucide-react'
import Link from 'next/link'

interface LawFirm {
  id: string
  name: string
  openIntakes: number
  practiceAreas: string[]
  recentCyPresAwards: number
}

const featuredFirms: LawFirm[] = [
  {
    id: '1',
    name: 'Cohen Milstein',
    openIntakes: 3,
    practiceAreas: ['Consumer', 'Antitrust', 'Securities'],
    recentCyPresAwards: 12
  },
  {
    id: '2',
    name: 'Hagens Berman',
    openIntakes: 2,
    practiceAreas: ['Privacy', 'Consumer', 'Employment'],
    recentCyPresAwards: 8
  },
  {
    id: '3',
    name: 'Lieff Cabraser',
    openIntakes: 4,
    practiceAreas: ['Healthcare', 'Environment', 'Consumer'],
    recentCyPresAwards: 15
  }
]

export function LawFirmDirectory() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span className="flex items-center">
            <Building2 className="h-5 w-5 mr-2" />
            Active Law Firms
          </span>
          <Link href="/law-firms">
            <Button variant="ghost" size="sm">
              View All
              <ArrowRight className="ml-1 h-4 w-4" />
            </Button>
          </Link>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {featuredFirms.map((firm) => (
          <div key={firm.id} className="border-b last:border-0 pb-4 last:pb-0">
            <div className="flex justify-between items-start mb-2">
              <h4 className="font-semibold text-sm">{firm.name}</h4>
              {firm.openIntakes > 0 && (
                <Badge variant="default" className="bg-green-600">
                  {firm.openIntakes} open
                </Badge>
              )}
            </div>
            
            <div className="flex flex-wrap gap-1 mb-2">
              {firm.practiceAreas.slice(0, 3).map(area => (
                <Badge key={area} variant="outline" className="text-xs">
                  {area}
                </Badge>
              ))}
            </div>
            
            <div className="flex items-center justify-between text-xs text-gray-600">
              <span className="flex items-center">
                <Briefcase className="h-3 w-3 mr-1" />
                {firm.recentCyPresAwards} recent awards
              </span>
              <Link 
                href={`/law-firms/${firm.id}`}
                className="text-blue-600 hover:underline"
              >
                View profile →
              </Link>
            </div>
          </div>
        ))}

        <div className="pt-2">
          <Link href="/law-firm/register">
            <Button variant="outline" className="w-full" size="sm">
              <Users className="h-4 w-4 mr-2" />
              Register Your Firm
            </Button>
          </Link>
        </div>
      </CardContent>
    </Card>
  )
}