{item.title}

\n \n

\n {item.images && item.images.length > 0 && (\n

\n {item.images.map((image, index) => (\n {`${item.title}

\n ))}\n

\n )}\n

{item.description}

Price: ${item.price}

\n );\n}\n\nfunction CreateItemModal({ onItemCreated }) {\n const [isOpen, setIsOpen] = useState(false);\n const [formData, setFormData] = useState({\n title: '',\n description: '',\n price: '',\n images: []\n });\n\n const handleImageUpload = async (e) => {\n const files = Array.from(e.target.files).slice(0, 5);\n const base64Images = await Promise.all(\n files.map(file => new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result);\n reader.onerror = error => reject(error);\n }))\n );\n setFormData(prev => ({ ...prev, images: base64Images }));\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n onItemCreated({\n ...formData,\n id: Date.now() // Simple unique ID\n });\n setIsOpen(false);\n setFormData({\n title: '',\n description: '',\n price: '',\n images: []\n });\n };\n\n return (\n <>\n \n {isOpen && (\n

List a New Item

\n \n

\n Item Title\n setFormData(prev => ({ ...prev, title: e.target.value }))}\n required \n />\n

\n Item Description\n

setFormData(prev => ({ ...prev, description: e.target.value }))}\n                  required \n                />\n              </div>\n              <div className=\"form-group\">\n                <label htmlFor=\"price\">Price</label>\n                <input \n                  id=\"price\"\n                  type=\"number\" \n                  placeholder=\"Set your price\" \n                  value={formData.price}\n                  onChange={(e) => setFormData(prev => ({ ...prev, price: e.target.value }))}\n                  min=\"0\"\n                  step=\"0.01\"\n                  required \n                />\n              </div>\n              <div className=\"form-group\">\n                <label htmlFor=\"images\">Upload Images (Max 5)</label>\n                <input \n                  id=\"images\"\n                  type=\"file\" \n                  multiple \n                  accept=\"image/*\" \n                  onChange={handleImageUpload}\n                  max={5}\n                />\n                {formData.images.length > 0 && (\n                  <div className=\"image-preview\">\n                    {formData.images.map((image, index) => (\n                      <img \n                        key={index} \n                        src={image} \n                        alt={`Preview ${index + 1}`} \n                        className=\"preview-thumbnail\"\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n              <div className=\"form-actions\">\n                <button type=\"submit\" className=\"submit-btn\">Create Listing</button>\n                <button \n                  type=\"button\" \n                  className=\"cancel-btn\" \n                  onClick={() => setIsOpen(false)}\n                >\n                  Cancel\n                </button>\n              </div>\n            </form>\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction App() {\n  const [items, setItems] = useState([]);\n  const [selectedItem, setSelectedItem] = useState(null);\n\n  const handleItemCreated = (newItem) => {\n    setItems(prevItems => [...prevItems, newItem]);\n  };\n\n  return (\n    <div className=\"app-container\">\n      <header>\n        <h1>Marketplace</h1>\n        <CreateItemModal onItemCreated={handleItemCreated} />\n      </header>\n      <div className=\"items-list\">\n        {items.map((item, index) => (\n          <div \n            key={item.id} \n            className=\"item-card\" \n            onClick={() => setSelectedItem(item)}\n          >\n            <h3>{item.title}</h3>\n            <p>Price: ${item.price}</p>\n            {item.images && item.images.length > 0 && (\n              <img \n                src={item.images[0]} \n                alt={item.title} \n                className=\"item-thumbnail\"\n              />\n            )}\n          </div>\n        ))}\n      </div>\n      {selectedItem && (\n        <ItemDetailModal \n          item={selectedItem} \n          onClose={() => setSelectedItem(null)} \n        />\n      )}\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  return new Response(`\n    <html>\n      <head>\n        <title>Marketplace</title>\n        <style>${CSS_STYLES}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: {\n      \"content-type\": \"text/html\",\n    },\n  });\n}\n\nconst CSS_STYLES = `\n:root {\n  --primary-color: #2c3e50;\n  --secondary-color: #95a5a6;\n  --accent-color: #3498db;\n  --background-color: #ecf0f1;\n  --text-color: #333;\n  --hover-color: #2980b9;\n}\n\nbody {\n  font-family: 'Arial', sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: var(--background-color);\n}\n\n.app-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\nheader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 30px;\n}\n\n.items-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 20px;\n}\n\n.item-card {\n  background-color: white;\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  cursor: pointer;\n  transition: transform 0.3s ease;\n}\n\n.item-card:hover {\n  transform: scale(1.05);\n}\n\n.item-thumbnail {\n  max-width: 100%;\n  height: 200px;\n  object-fit: cover;\n  border-radius: 5px;\n  margin-top: 10px;\n}\n\n.create-item-btn {\n  background-color: var(--accent-color);\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\n/* Modal Styles */\n.modal.create-item-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background-color: white;\n  border-radius: 10px;\n  width: 500px;\n  max-width: 90%;\n  padding: 30px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n}\n\n.modal-header h2 {\n  margin: 0;\n  color: var(--primary-color);\n}\n\n.close-modal-btn {\n  background: none;\n  border: none;\n  font-size: 24px;\n  color: var(--text-color);\n  cursor: pointer;\n}\n\n.create-item-form .form-group {\n  margin-bottom: 15px;\n}\n\n.create-item-form label {\n  display: block;\n  margin-bottom: 5px;\n  color: var(--primary-color);\n  font-weight: bold;\n}\n\n.create-item-form input,\n.create-item-form textarea {\n  width: 100%;\n  padding: 10px;\n  border: 1px solid var(--secondary-color);\n  border-radius: 5px;\n  box-sizing: border-box;\n}\n\n.create-item-form textarea {\n  min-height: 100px;\n  resize: vertical;\n}\n\n.form-actions {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 20px;\n}\n\n.submit-btn, .cancel-btn {\n  padding: 10px 20px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\n.submit-btn {\n  background-color: var(--accent-color);\n  color: white;\n}\n\n.cancel-btn {\n  background-color: var(--background-color);\n  color: var(--text-color);\n  border: 1px solid var(--secondary-color);\n}\n\n.submit-btn:hover {\n  background-color: var(--hover-color);\n}\n\n.cancel-btn:hover {\n  background-color: var(--secondary-color);\n  color: white;\n}\n\n.image-preview {\n  margin-top: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n}\n\n.preview-thumbnail {\n  width: 100px;\n  height: 100px;\n  object-fit: cover;\n  border-radius: 5px;\n  margin-right: 10px;\n}\n\n.image-count {\n  background-color: var(--secondary-color);\n  color: white;\n  padding: 5px 10px;\n  border-radius: 3px;\n  font-size: 0.8em;\n}\n\n/* Item Detail Modal Styles */\n.item-detail-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0,0,0,0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.item-detail-modal .modal-content {\n  background-color: white;\n  border-radius: 10px;\n  width: 80%;\n  max-width: 800px;\n  max-height: 90%;\n  overflow-y: auto;\n  padding: 30px;\n}\n\n.item-detail-content {\n  display: flex;\n  gap: 20px;\n}\n\n.item-images-gallery {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  max-width: 50%;\n}\n\n.item-gallery-image {\n  max-width: 100%;\n  max-height: 400px;\n  object-fit: cover;\n  border-radius: 5px;\n}\n\n.item-details {\n  flex: 1;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/ericomartin/Cluttle/code/main.tsx","extension","actionData","errors"]
</article></body></html>