function MainComponent() { const [projects, setProjects] = useState([]); const [loading, setLoading] = useState(true); const [selectedCategory, setSelectedCategory] = useState(""); const categories = [ "All", "Home Repairs", "Carpentry", "Painting", "Assembly", "Burglar Bars", "Steel Gates", "Pressure Washing" ]; const fetchProjects = async (category)=>{ try { setLoading(true); const response = await fetch("/api/projects/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ category: category === "All" ? "" : category }) }); const data = await response.json(); setProjects(data.projects); } catch (error) { console.error("Error fetching projects:", error); } finally{ setLoading(false); } }; useEffect(()=>{ fetchProjects(selectedCategory); }, [ selectedCategory ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-black text-white", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between h-16", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "logo", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "can", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "CAN"), " ", /*#__PURE__*/ React.createElement("span", { className: "do", __source: { fileName: "", lineNumber: 44, columnNumber: 50 }, __self: this }, "DO"), " ", "Handyman")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:block", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "font-roboto px-3 py-2 rounded-md hover:bg-gray-800", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/gallery", className: "font-roboto px-3 py-2 rounded-md hover:bg-gray-800", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "font-roboto px-3 py-2 rounded-md hover:bg-gray-800", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "Contact")))))), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "Our Projects"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-8", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 justify-center", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category, onClick: ()=>setSelectedCategory(category), className: `px-4 py-2 rounded-md font-roboto ${selectedCategory === category ? "bg-[#0088FF] text-white" : "bg-white text-gray-700 hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, category)))), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, projects.map((project)=>/*#__PURE__*/ React.createElement("div", { key: project.id, className: "bg-white rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: project.image_url, alt: project.title, className: "w-full h-64 object-cover", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, project.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, project.description), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block bg-gray-100 rounded-full px-3 py-1 text-sm font-roboto text-gray-700", __source: { fileName: "", lineNumber: 119, columnNumber: 21 }, __self: this }, project.category))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, ` .logo { font-family: sans-serif; font-weight: bold; font-size: 1.5rem; } .logo .can { color: white; } .logo .do { color: #0088FF; } `)); }