Mock Items - Copy this React, Tailwind Component to your project

import React, { useState } from "react"; import { FiSearch, FiSun, FiMoon, FiUpload } from "react-icons/fi"; import { BiCategory } from "react-icons/bi"; import { MdLocationOn } from "react-icons/md"; const mockItems = [ { id: 1, title: "Vintage Camera", description: "Professional DSLR in excellent condition", condition: "Like New", category: "Electronics", location: "New York", image: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32", owner: { name: "John Doe", avatar: "https://images.unsplash.com/photo-1633332755192-727a05c4013d", rating: 4.8 } }, { id: 2, title: "Mountain Bike", description: "Well-maintained mountain bike for trails", condition: "Good", category: "Sports", location: "Colorado", image: "https://images.unsplash.com/photo-1576435728678-68d0fbf94e91", owner: { name: "Jane Smith", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330", rating: 4.5 } } ]; const ObjectExchangePlatform = () => { const [darkMode, setDarkMode] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [selectedCategory, setSelectedCategory] = useState("All"); const [selectedCondition, setSelectedCondition] = useState("All"); const toggleDarkMode = () => { setDarkMode(!darkMode); }; return ( <div className={`min-h-screen ${darkMode ? "dark bg-gray-900" : "bg-gray-50"}`}> {/* Header */} <header className="bg-white dark:bg-gray-800 shadow-md"> <div className="container mx-auto px-4 py-4 flex items-center justify-between"> <h1 className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">SwapHub</h1> <div className="flex items-center space-x-4"> <button onClick={toggleDarkMode} className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700" > {darkMode ? <FiSun className="w-5 h-5" /> : <FiMoon className="w-5 h-5" />} </button> <button className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"> List an Item </button> </div> </div> </header> {/* Hero Section */} <section className="py-12 bg-gradient-to-r from-indigo-500 to-purple-600 dark:from-indigo-800 dark:to-purple-900"> <div className="container mx-auto px-4 text-center text-white"> <h2 className="text-4xl font-bold mb-4">Exchange Items with People Worldwide</h2> <p className="text-xl mb-8">Trade your belongings for something you need. It's simple and sustainable!</p> <div className="flex justify-center space-x-4"> <button className="bg-white text-indigo-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100"> Browse Items </button> <button className="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-600"> How It Works </button> </div> </div> </section> {/* Search and Filters */} <section className="py-8"> <div className="container mx-auto px-4"> <div className="flex flex-col md:flex-row gap-4"> <div className="flex-1 relative"> <FiSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" /> <input type="text" placeholder="Search items..." className="w-full pl-10 pr-4 py-2 rounded-lg border dark:bg-gray-800 dark:border-gray-700" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} /> </div> <div className="flex gap-4"> <select className="px-4 py-2 rounded-lg border dark:bg-gray-800 dark:border-gray-700" value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)} > <option value="All">All Categories</option> <option value="Electronics">Electronics</option> <option value="Sports">Sports</option> <option value="Books">Books</option> </select> <select className="px-4 py-2 rounded-lg border dark:bg-gray-800 dark:border-gray-700" value={selectedCondition} onChange={(e) => setSelectedCondition(e.target.value)} > <option value="All">All Conditions</option> <option value="New">New</option> <option value="Like New">Like New</option> <option value="Good">Good</option> <option value="Fair">Fair</option> </select> </div> </div> </div> </section> {/* Items Grid */} <section className="py-8"> <div className="container mx-auto px-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {mockItems.map((item) => ( <div key={item.id} className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"> <img src={item.image} alt={item.title} className="w-full h-48 object-cover" /> <div className="p-4"> <h3 className="text-xl font-semibold mb-2 dark:text-white">{item.title}</h3> <p className="text-gray-600 dark:text-gray-300 mb-4">{item.description}</p> <div className="flex items-center justify-between"> <div className="flex items-center space-x-2"> <img src={item.owner.avatar} alt={item.owner.name} className="w-8 h-8 rounded-full" /> <span className="text-sm text-gray-600 dark:text-gray-300">{item.owner.name}</span> </div> <button className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"> View Details </button> </div> </div> </div> ))} </div> </div> </section> </div> ); }; export default ObjectExchangePlatform; includi tutti gli ogetti pulsanti accedi registrati carica imagine e abbonamienti mensuli e annuali e le icone segui su facebook instagram e x e pulsante help