featL Add news page

app/blog/page.tsx

@@ -1,144 +1,11 @@
-"use client";
-
-import { useState } from "react";
-import blogData from "./blog.json";
-
-export default function BlogPage() {
-  const [selectedCategory, setSelectedCategory] = useState("all");
-
-  const filteredPosts =
-    selectedCategory === "all"
-      ? blogData.posts
-      : blogData.posts.filter(
-          (post) => post.category.toLowerCase() === selectedCategory,
-        );
+import Breadcrumb from "./components/Breadcrumb";
+import NewsSection from "./components/NewsSection";
 
+export default function NewsPage() {
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-6xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            {blogData.title}
-          </h1>
-          <p className="text-xl text-gray-600">{blogData.subtitle}</p>
-        </div>
-
-        {/* Featured Post */}
-        <div className="mb-12">
-          <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 text-white">
-            <div className="flex items-center mb-4">
-              <span className="bg-yellow-400 text-black px-3 py-1 rounded-full text-sm font-medium mr-4">
-                Nổi bật
-              </span>
-              <span className="text-blue-100">
-                {blogData.featured.category}
-              </span>
-            </div>
-            <h2 className="text-3xl font-bold mb-4">
-              {blogData.featured.title}
-            </h2>
-            <p className="text-blue-100 mb-6 text-lg">
-              {blogData.featured.excerpt}
-            </p>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center text-blue-100">
-                <span className="mr-4">👤 {blogData.featured.author}</span>
-                <span className="mr-4">📅 {blogData.featured.date}</span>
-                <span>⏱️ {blogData.featured.readTime}</span>
-              </div>
-              <button className="bg-white text-blue-600 px-6 py-2 rounded-lg hover:bg-blue-50 transition-colors">
-                Đọc thêm
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* Category Filter */}
-        <div className="mb-8">
-          <div className="flex flex-wrap gap-4 justify-center">
-            {blogData.categories.map((category) => (
-              <button
-                key={category.slug}
-                onClick={() => setSelectedCategory(category.slug)}
-                className={`px-6 py-2 rounded-full transition-colors ${
-                  selectedCategory === category.slug
-                    ? "bg-blue-600 text-white"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-                }`}
-              >
-                {category.name} ({category.count})
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Blog Posts Grid */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {filteredPosts.map((post) => (
-            <article
-              key={post.id}
-              className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
-            >
-              {/* Post Image */}
-              <div className="h-48 bg-gray-200 flex items-center justify-center">
-                <span className="text-gray-400">📷 {post.category}</span>
-              </div>
-
-              {/* Post Content */}
-              <div className="p-6">
-                {/* Category & Date */}
-                <div className="flex items-center justify-between mb-3">
-                  <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">
-                    {post.category}
-                  </span>
-                  <span className="text-gray-500 text-sm">{post.date}</span>
-                </div>
-
-                {/* Title */}
-                <h3 className="text-xl font-semibold text-gray-900 mb-3 line-clamp-2">
-                  {post.title}
-                </h3>
-
-                {/* Excerpt */}
-                <p className="text-gray-700 mb-4 line-clamp-3">
-                  {post.excerpt}
-                </p>
-
-                {/* Tags */}
-                <div className="flex flex-wrap gap-2 mb-4">
-                  {post.tags.map((tag, index) => (
-                    <span
-                      key={index}
-                      className="bg-gray-100 text-gray-600 px-2 py-1 rounded text-xs"
-                    >
-                      #{tag}
-                    </span>
-                  ))}
-                </div>
-
-                {/* Meta Info */}
-                <div className="flex items-center justify-between text-sm text-gray-500">
-                  <span>👤 {post.author}</span>
-                  <span>⏱️ {post.readTime}</span>
-                </div>
-
-                {/* Read More Button */}
-                <button className="w-full mt-4 bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
-                  Đọc thêm
-                </button>
-              </div>
-            </article>
-          ))}
-        </div>
-
-        {/* Load More */}
-        <div className="text-center mt-12">
-          <button className="bg-gray-100 text-gray-700 px-8 py-3 rounded-lg hover:bg-gray-200 transition-colors">
-            Xem thêm bài viết
-          </button>
-        </div>
-      </div>
-    </div>
+    <>
+      <Breadcrumb />
+      <NewsSection />
+    </>
   );
-}
+}