function UploadButton() { const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const [file, setFile] = useState(null); const [image, setImage] = useState(null); const [showCamera, setShowCamera] = useState(false); const videoRef = useRef(null); const canvasRef = useRef(null); const startCamera = async ()=>{ try { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); if (videoRef.current) { videoRef.current.srcObject = stream; } setShowCamera(true); } catch (err) { setError("Could not access camera"); } }; const capturePhoto = ()=>{ if (videoRef.current && canvasRef.current) { const context = canvasRef.current.getContext("2d"); canvasRef.current.width = videoRef.current.videoWidth; canvasRef.current.height = videoRef.current.videoHeight; context.drawImage(videoRef.current, 0, 0); canvasRef.current.toBlob((blob)=>{ setFile(blob); setShowCamera(false); if (videoRef.current?.srcObject) { videoRef.current.srcObject.getTracks().forEach((track)=>track.stop()); } }); } }; const onSubmit = async ()=>{ if (!file) return; const { url, error: uploadError } = await upload({ file }); if (uploadError) { setError(uploadError); return; } setImage(url); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "bg-blue-500 text-white px-4 py-2 rounded cursor-pointer hover:bg-blue-600", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", className: "hidden", onChange: (e)=>{ if (e.target.files?.[0]) { setFile(e.target.files[0]); } }, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload mr-2", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }), "Upload Photo"), /*#__PURE__*/ React.createElement("button", { onClick: startCamera, className: "bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera mr-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }), "Take Photo")), showCamera && /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef, autoPlay: true, className: "w-[640px] h-[480px] bg-gray-100 rounded", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: capturePhoto, className: "absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle mr-2", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }), "Capture"), /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, className: "hidden", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this })), file && !showCamera && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, !loading && !image && /*#__PURE__*/ React.createElement("button", { onClick: onSubmit, className: "bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }), "Submit Photo"), loading && /*#__PURE__*/ React.createElement("div", { className: "text-gray-600", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }), "Uploading...")), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }), error), image && /*#__PURE__*/ React.createElement("img", { src: image, alt: "Uploaded item preview", className: "w-[320px] h-[320px] object-cover rounded", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this })); } function UploadButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 129, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UploadButton, { __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this })); } function ItemCard({ image, title, owner }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow-lg overflow-hidden w-[300px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `${title} item preview`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "By ", owner))); } function ItemCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ItemCard, { image: "/sample-item.jpg", title: "Vintage Camera", owner: "Jane Smith", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ItemCard, { image: "/modern-watch.jpg", title: "Modern Watch", owner: "John Doe", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this })); } function MainComponent() { const [items, setItems] = useState([ { id: 1, title: "Vintage Camera", image: "/camera.jpg", owner: "Alice" }, { id: 2, title: "Mountain Bike", image: "/bike.jpg", owner: "Bob" }, { id: 3, title: "Guitar", image: "/guitar.jpg", owner: "Charlie" } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-poppins font-bold text-gray-800", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Trading Feed"), /*#__PURE__*/ React.createElement("a", { href: "/my-items", className: "bg-blue-600 hover:bg-blue-700 text-white font-poppins px-6 py-2 rounded-lg flex items-center gap-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), "Add Item")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, items.map((item)=>/*#__PURE__*/ React.createElement(ItemCard, { key: item.id, image: item.image, title: item.title, owner: item.owner, __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }))))); }