} "use client"; import { useState, useEffect } from "react"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Button } from "@/components/ui/button"; import { Search, Star, Download, Users } from "lucide-react"; // Define types interface MarketplaceItem { id: string; name: string; description: string; category: string; rating: number; downloads: number; users: number; tags: string[]; author: string; version: string; lastUpdated: string; size: string; license: string; } // Mock data const mockItems: MarketplaceItem[] = [ { id: "1", name: "TaskFlow AI", description: "AI-powered task automation for personal productivity", category: "AI Models", rating: 4.8, downloads: 12500, users: 8900, tags: ["productivity", "ai", "automation"], author: "AI Labs", version: "2.3.1", lastUpdated: "2023-10-15", size: "45MB", license: "MIT" }, { id: "2", name: "WeatherPWA", description: "Beautiful weather app with location-based forecasts", category: "PWAs", rating: 4.5, downloads: 8700, users: 5400, tags: ["weather", "pwa", "forecast"], author: "Climate Devs", version: "1.8.2", lastUpdated: "2023-09-22", size: "12MB", license: "Apache 2.0" }, { id: "3", name: "DataSync Pro", description: "Cross-platform data synchronization tool", category: "Automations", rating: 4.9, downloads: 21000, users: 15600, tags: ["sync", "data", "automation"], author: "SyncMaster Inc", version: "3.1.0", lastUpdated: "2023-11-05", size: "68MB", license: "GPL v3" }, { id: "4", name: "CodeAssistant", description: "AI pair programmer for multiple languages", category: "AI Models", rating: 4.7, downloads: 34200, users: 28900, tags: ["coding", "ai", "developer"], author: "DevAI Solutions", version: "1.5.4", lastUpdated: "2023-10-30", size: "120MB", license: "MIT" }, { id: "5", name: "NoteVault", description: "Secure note-taking PWA with encryption", category: "PWAs", rating: 4.6, downloads: 15600, users: 9800, tags: ["notes", "pwa", "security"], author: "SecureApps", version: "2.0.1", lastUpdated: "2023-08-17", size: "22MB", license: "BSD" }, { id: "6", name: "SocialBot", description: "Automated social media scheduler and analyzer", category: "Automations", rating: 4.4, downloads: 9800, users: 6700, tags: ["social", "automation", "analytics"], author: "SocialTech", version: "1.9.3", lastUpdated: "2023-09-10", size: "35MB", license: "MIT" } ]; const categories = ["All", "PWAs", "AI Models", "Automations"]; export default function BazaarMarketplace() { const [items, setItems] = useState(mockItems); const [filteredItems, setFilteredItems] = useState(mockItems); const [searchTerm, setSearchTerm] = useState(""); const [selectedCategory, setSelectedCategory] = useState("All"); const [selectedItem, setSelectedItem] = useState(null); // Filter items based on search and category useEffect(() => { let result = items; if (selectedCategory !== "All") { result = result.filter(item => item.category === selectedCategory); } if (searchTerm) { const term = searchTerm.toLowerCase(); result = result.filter(item => item.name.toLowerCase().includes(term) || item.description.toLowerCase().includes(term) || item.tags.some(tag => tag.toLowerCase().includes(term)) ); } setFilteredItems(result); }, [searchTerm, selectedCategory, items]); const handleSearch = (e: React.ChangeEvent) => { setSearchTerm(e.target.value); }; const handleCategoryChange = (value: string) => { setSelectedCategory(value); }; const openItemDetails = (item: MarketplaceItem) => { setSelectedItem(item); }; const closeItemDetails = () => { setSelectedItem(null); }; return (

{/* Header */}

Bazaar Marketplace

Discover open-source PWAs, AI models, automations, and cross-platform tools

{/* Search and Filter Section */}

{/* Results Info */}

Showing {filteredItems.length} of {items.length} items

{/* Items Grid */} {filteredItems.length === 0 ? (

No items found

Try adjusting your search or filter criteria

) : (

{filteredItems.map(item => ( openItemDetails(item)} >

{item.name} {item.category}

{item.description}

{item.rating}

{item.downloads.toLocaleString()}

{item.tags.slice(0, 3).map(tag => ( {tag} ))}

by {item.author}

))}

)} {/* Item Detail Modal */} {selectedItem && (

e.stopPropagation()} >

{selectedItem.name}

{selectedItem.category}

{selectedItem.description}

Details

Version: {selectedItem.version}
Last Updated: {selectedItem.lastUpdated}
Size: {selectedItem.size}
License: {selectedItem.license}

Statistics

Rating: {selectedItem.rating}
Downloads: {selectedItem.downloads.toLocaleString()}
Active Users: {selectedItem.users.toLocaleString()}

No items found

{selectedItem.name}

Details

Statistics

Tags

Activity Feed

@autobotsassemble

Organizations

Teams