`app/wines/page.tsx`

88 lines
// app/wines/page.tsx
import Link from 'next/link';
import { searchWines } from '@/lib/wines';

export const dynamic = 'force-dynamic';

type Props = {
  searchParams?: { q?: string };
};

export default async function WinesPage({ searchParams }: Props) {
  const q = searchParams?.q;
  const wines = searchWines(q, 50);

  return (
    <main className="max-w-5xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6 text-purple-800">🍷 Wine Collection</h1>

      <form className="mb-6">
        <div className="flex gap-4">
          <input
            type="text"
            name="q"
            defaultValue={q || ''}
            placeholder="Search by name, varietal, region..."
            className="flex-1 border border-gray-300 px-4 py-3 rounded-lg text-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
          />
          <button
            type="submit"
            className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
          >
            Search
          </button>
        </div>
      </form>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {wines.map((w) => (
          <div
            key={w.id}
            className="bg-white border border-gray-200 rounded-lg p-6 shadow-md hover:shadow-lg transition"
          >
            <div className="mb-4">
              <Link href={`/wines/${w.id}`} className="text-xl font-semibold text-purple-700 hover:underline">
                {w.name}
              </Link>
              <div className="text-gray-600 mt-2 space-y-1">
                <div><span className="font-medium">Varietal:</span> {w.varietal || 'N/A'}</div>
                <div><span className="font-medium">Region:</span> {w.region || 'N/A'}</div>
                <div><span className="font-medium">Country:</span> {w.country || 'N/A'}</div>
                <div><span className="font-medium">Vintage:</span> {w.vintage || 'NV'}</div>
              </div>
            </div>
            
            <div className="flex justify-between items-center">
              <div>
                {w.average_price != null && (
                  <div className="text-2xl font-bold text-green-600">
                    ${w.average_price.toLocaleString()}
                  </div>
                )}
              </div>
              <div className="text-right">
                {w.critic_scores?.ws && (
                  <div className="text-sm bg-yellow-100 px-2 py-1 rounded">
                    WS {w.critic_scores.ws}
                  </div>
                )}
                {w.critic_scores?.js && (
                  <div className="text-sm bg-blue-100 px-2 py-1 rounded mt-1">
                    JS {w.critic_scores.js}
                  </div>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>

      {wines.length === 0 && (
        <div className="text-center py-12">
          <h3 className="text-xl font-medium text-gray-500">No wines found</h3>
          <p className="text-gray-400 mt-2">Try adjusting your search terms</p>
        </div>
      )}
    </main>
  );
}