function MainComponent() { const [models, setModels] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [searchTerm, setSearchTerm] = useState(""); const [currentPage, setCurrentPage] = useState(1); const [sortBy, setSortBy] = useState("newest"); const itemsPerPage = 9; useEffect(()=>{ const fetchModels = async ()=>{ try { setLoading(true); const response = await fetch("/api/blog/list", { method: "POST", body: JSON.stringify({ request: {} }) }); if (!response.ok) { throw new Error("Không thể tải dữ liệu bài viết"); } const data = await response.json(); if (!Array.isArray(data.posts)) { throw new Error("Dữ liệu không đúng định dạng"); } setModels(data.posts); } catch (err) { setError(err.message); console.error("Lỗi:", err); } finally{ setLoading(false); } }; fetchModels(); }, []); const filteredModels = (models || []).filter((model)=>(model.title || "").toLowerCase().includes(searchTerm.toLowerCase()) || (model.content || "").toLowerCase().includes(searchTerm.toLowerCase())); const sortedModels = [ ...filteredModels ].sort((a, b)=>{ if (sortBy === "newest") { return new Date(b.created_at || 0) - new Date(a.created_at || 0); } return new Date(a.created_at || 0) - new Date(b.created_at || 0); }); const totalPages = Math.ceil(sortedModels.length / itemsPerPage); const currentModels = sortedModels.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center mb-8 gap-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#00ffff]", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Mô Hình AI"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 w-full md:w-auto", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Tìm kiếm mô hình...", className: "px-4 py-2 bg-[#1a1a1a] border border-[#00ffff]/20 rounded-lg focus:outline-none focus:border-[#00ffff] w-full md:w-[300px]", value: searchTerm, onChange: (e)=>{ setSearchTerm(e.target.value); setCurrentPage(1); }, __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: sortBy, onChange: (e)=>setSortBy(e.target.value), className: "px-4 py-2 bg-[#1a1a1a] border border-[#00ffff]/20 rounded-lg focus:outline-none focus:border-[#00ffff]", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "newest", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "Mới nhất"), /*#__PURE__*/ React.createElement("option", { value: "oldest", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Cũ nhất")))), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-[400px]", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#00ffff]", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }))) : error ? /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-center py-8", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }), error) : currentModels.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-gray-400", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-2", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }), "Không tìm thấy mô hình nào") : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, currentModels.map((model)=>/*#__PURE__*/ React.createElement("a", { key: model.id || Math.random(), href: `/blog/${model.slug}`, className: "group border border-[#00ffff]/20 rounded-lg overflow-hidden hover:border-[#00ffff]/40 transition-all hover:-translate-y-1", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-[4/3]", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: model.image_url, alt: model.title || "Blog image", className: "w-full h-full object-cover transition-transform group-hover:scale-105", loading: "lazy", __source: { fileName: "", lineNumber: 113, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2 group-hover:text-[#00ffff] transition-colors", __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }, model.title || "Chưa có tiêu đề"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm line-clamp-2", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }, model.content || "Chưa có nội dung"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-sm text-gray-500", __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }, model.created_at ? new Date(model.created_at).toLocaleDateString("vi-VN") : "Không có ngày"))))), !loading && !error && totalPages > 1 && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center gap-2 mt-8", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage((prev)=>Math.max(prev - 1, 1)), disabled: currentPage === 1, className: "px-4 py-2 border border-[#00ffff]/20 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00ffff]/40", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "Trang ", currentPage, " / ", totalPages), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage((prev)=>Math.min(prev + 1, totalPages)), disabled: currentPage === totalPages, className: "px-4 py-2 border border-[#00ffff]/20 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00ffff]/40", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }))))); }