function MainComponent() { const [searchTerm, setSearchTerm] = useState(""); const [selectedCategory, setSelectedCategory] = useState("all"); const [tools, setTools] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const categories = [ { id: "all", name: "All Tools" }, { id: "AI Assistants", name: "AI Assistants" }, { id: "Content Creation and Writing", name: "Content Creation" }, { id: "Grammar and Writing Improvement", name: "Grammar & Writing" }, { id: "Video Generation and Editing", name: "Video Creation" }, { id: "Image Generation and Editing", name: "Image Generation" }, { id: "Graphic Design", name: "Graphic Design" }, { id: "App Building and Coding", name: "App Development" }, { id: "Voice and Audio Generation", name: "Audio & Speech" }, { id: "Music Generation", name: "Music" }, { id: "Translation", name: "Translation" }, { id: "Search Engines", name: "Search" }, { id: "Productivity and Project Management", name: "Productivity" }, { id: "Transcription and Meeting Assistants", name: "Transcription" }, { id: "Scheduling", name: "Scheduling" }, { id: "Presentation Creation", name: "Presentations" } ]; useEffect(()=>{ const loadTools = async ()=>{ try { setLoading(true); const response = await fetch("/api/tools", { method: "POST" }); if (!response.ok) { throw new Error(`Failed to fetch tools: ${response.status} ${response.statusText}`); } const data = await response.json(); setTools(data.tools || []); } catch (err) { setError("Failed to load AI tools"); console.error(err); } finally{ setLoading(false); } }; loadTools(); }, []); const filteredTools = useMemo(()=>{ return tools.filter((tool)=>{ const matchesSearch = tool.name.toLowerCase().includes(searchTerm.toLowerCase()) || tool.description && tool.description.toLowerCase().includes(searchTerm.toLowerCase()); const matchesCategory = selectedCategory === "all" || tool.category_name === selectedCategory; return matchesSearch && matchesCategory; }); }, [ tools, searchTerm, selectedCategory ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1B212C]", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-16", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white mb-4 font-inter", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "AI Tool Finder"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-300 font-inter mb-8", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Discover the perfect AI tool for your needs - Search from 50+ cutting-edge AI tools"), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full px-6 py-4 text-lg rounded-lg border border-gray-700 bg-[#252A35] text-white font-inter", placeholder: "Search AI tools...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mb-12", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.id, onClick: ()=>setSelectedCategory(category.id), className: `p-3 rounded-lg text-sm font-medium transition-all duration-200 flex items-center justify-center text-center h-full ${selectedCategory === category.id ? "bg-[#00A7E6] text-white" : "border border-[#00A7E6] text-[#00A7E6] hover:bg-[#00A7E6] hover:text-white"}`, __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, category.name)))), error && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-500 font-inter", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, error)), loading ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, [ 1, 2, 3, 4, 5, 6 ].map((i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "animate-pulse bg-[#252A35] rounded-lg p-6 h-64", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }))) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, filteredTools.map((tool)=>/*#__PURE__*/ React.createElement("div", { key: tool.id, className: "border border-gray-700 bg-[#252A35] rounded-lg p-6", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2 font-inter", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, tool.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-4 font-inter", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, tool.description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm bg-[#1F242F] text-gray-300 px-3 py-1 rounded-full font-inter", __source: { fileName: "", lineNumber: 136, columnNumber: 19 }, __self: this }, tool.category_name), /*#__PURE__*/ React.createElement("a", { href: tool.website_url, target: "_blank", rel: "noopener noreferrer", className: "bg-[#00A7E6] text-white px-4 py-2 rounded-md hover:opacity-80 transition-opacity font-inter", __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, "Visit Website"))))), !loading && filteredTools.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 font-inter", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, "No AI tools found matching your criteria")))); }