function FilterButtons() { const [photos, setPhotos] = useState([]); const [loading, setLoading] = useState(true); const [activeFilter, setActiveFilter] = useState("exterior"); useEffect(()=>{ async function fetchPhotos() { setLoading(true); const response = await fetch("/api/fetch-photos", { method: "POST", body: JSON.stringify({ query: activeFilter }) }); const data = await response.json(); setPhotos(data.photos); setLoading(false); } fetchPhotos(); }, [ activeFilter ]); const filters = [ "exterior", "living room", "kitchen", "bathroom", "agent photos", "real estate signs", "master bedroom", "kids room", "laundry room" ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-sm", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-3xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Photo Gallery"))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-6", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, filters.map((filter)=>/*#__PURE__*/ React.createElement("button", { key: filter, onClick: ()=>setActiveFilter(filter), className: `px-4 py-2 rounded-lg font-roboto inline-block ${activeFilter === filter ? "bg-[#0047AB] text-white" : "bg-gray-200 hover:bg-gray-300 text-gray-800"}`, __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, filter))), /*#__PURE__*/ React.createElement(React.Fragment, null))); } function FilterButtonsStory() { const [activeFilter, setActiveFilter] = useState("exterior"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FilterButtons, { onFilterClick: setActiveFilter, activeFilter: activeFilter, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this })); } function PhotoGrid({ photos, loading }) { if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-64", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 border-4 border-[#0047AB] rounded-full animate-spin border-t-transparent", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })); } return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, photos.map((photo)=>/*#__PURE__*/ React.createElement("div", { key: photo.id, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: photo.url, alt: photo.description || "Real estate photograph", className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-600 mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Photo by ", photo.user), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.open(photo.url, "_blank"), className: "bg-[#0047AB] text-white px-4 py-2 rounded hover:bg-blue-700 w-full font-roboto inline-flex items-center justify-center", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }), "Download"))))); } function PhotoGrid1() { const [photos, setPhotos] = useState([]); const [loading, setLoading] = useState(true); const [activeFilter, setActiveFilter] = useState("exterior"); useEffect(()=>{ async function fetchPhotos() { setLoading(true); const response = await fetch("/api/fetch-photos", { method: "POST", body: JSON.stringify({ query: activeFilter }) }); const data = await response.json(); setPhotos(data.photos); setLoading(false); } fetchPhotos(); }, [ activeFilter ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-sm", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-3xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Photo Gallery"))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(FilterButtons, { onFilterClick: setActiveFilter, activeFilter: activeFilter, __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(PhotoGrid, { photos: photos, loading: loading, __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }))); } function PhotoGrid1Story() { return /*#__PURE__*/ React.createElement(PhotoGrid1, { __source: { fileName: "", lineNumber: 81, columnNumber: 10 }, __self: this }); } function MainComponent() { const [activeFilter, setActiveFilter] = useState("exterior"); const [photos, setPhotos] = useState([]); const [loading, setLoading] = useState(true); useEffect(()=>{ async function fetchPhotos() { setLoading(true); const response = await fetch("/api/fetch-photos", { method: "POST", body: JSON.stringify({ query: activeFilter }) }); const data = await response.json(); setPhotos(data.photos); setLoading(false); } fetchPhotos(); }, [ activeFilter ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-sm", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-3xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Photo Gallery"))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(FilterButtons, { onFilterClick: setActiveFilter, activeFilter: activeFilter, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(PhotoGrid, { photos: photos, loading: loading, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }))); }