b3c2af51bf
Add comprehensive plant trading marketplace with: - Prisma schema with marketplace models (Listing, Offer, SellerProfile, WishlistItem) - Service layer for listings, offers, search, and matching - API endpoints for CRUD operations, search, and recommendations - Marketplace pages: home, listing detail, create, my-listings, my-offers - Reusable UI components: ListingCard, ListingGrid, OfferForm, SearchFilters, etc. Features: - Browse and search listings by category, price, tags - Create and manage listings (draft, active, sold, cancelled) - Make and manage offers on listings - Seller and buyer views with statistics - Featured and recommended listings - In-memory store (ready for database migration via Agent 2)
64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import { ListingCard } from './ListingCard';
|
|
|
|
interface Listing {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
price: number;
|
|
currency: string;
|
|
quantity: number;
|
|
category: string;
|
|
sellerName?: string;
|
|
location?: { city?: string; region?: string };
|
|
tags: string[];
|
|
viewCount: number;
|
|
}
|
|
|
|
interface ListingGridProps {
|
|
listings: Listing[];
|
|
columns?: 2 | 3 | 4;
|
|
variant?: 'default' | 'compact' | 'featured';
|
|
emptyMessage?: string;
|
|
}
|
|
|
|
export function ListingGrid({
|
|
listings,
|
|
columns = 3,
|
|
variant = 'default',
|
|
emptyMessage = 'No listings found',
|
|
}: ListingGridProps) {
|
|
if (listings.length === 0) {
|
|
return (
|
|
<div className="text-center py-12 bg-white rounded-lg shadow">
|
|
<div className="text-4xl mb-4">🌿</div>
|
|
<p className="text-gray-500">{emptyMessage}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const gridCols = {
|
|
2: 'grid-cols-1 md:grid-cols-2',
|
|
3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
|
4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
|
};
|
|
|
|
if (variant === 'compact') {
|
|
return (
|
|
<div className="space-y-3">
|
|
{listings.map((listing) => (
|
|
<ListingCard key={listing.id} listing={listing} variant="compact" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`grid ${gridCols[columns]} gap-6`}>
|
|
{listings.map((listing) => (
|
|
<ListingCard key={listing.id} listing={listing} variant={variant} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ListingGrid;
|