From cb4a4dc482d42e049e3226de63097c4485c2db73 Mon Sep 17 00:00:00 2001 From: Dao Duc Date: Sat, 7 Feb 2026 11:50:23 +0700 Subject: [PATCH] 07/02/2026 --- src/app/[slug]/metadataBySlug.tsx | 2 +- src/app/[slug]/page.tsx | 1 - src/app/[slug]/renderBySlug.tsx | 3 +- .../article/Category/article/index.tsx | 47 +++ src/components/article/Category/index.tsx | 168 +-------- .../article/Category/video/index.tsx | 58 ++++ src/components/article/Home/Video.tsx | 8 +- src/components/article/Home/index.tsx | 10 +- src/components/article/detail/index.tsx | 318 ++++++------------ src/data/categories/index.tsx | 14 +- src/lib/slug/resolveArticlePage.ts | 7 +- 11 files changed, 250 insertions(+), 386 deletions(-) create mode 100644 src/components/article/Category/article/index.tsx create mode 100644 src/components/article/Category/video/index.tsx diff --git a/src/app/[slug]/metadataBySlug.tsx b/src/app/[slug]/metadataBySlug.tsx index 9f30158..8c6e83f 100644 --- a/src/app/[slug]/metadataBySlug.tsx +++ b/src/app/[slug]/metadataBySlug.tsx @@ -1,7 +1,7 @@ import type { Metadata } from "next"; export function metadataBySlug(result: any): Metadata { - console.log('metadataBySlug: ', result) + switch (result.type) { case "product_category": return { diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx index 517cb7d..43aef52 100644 --- a/src/app/[slug]/page.tsx +++ b/src/app/[slug]/page.tsx @@ -22,7 +22,6 @@ export async function generateMetadata({ const { slug } = await params; const result = await getCachedSlugData(slug); - if (!result) { return { title: "Local PC" }; } diff --git a/src/app/[slug]/renderBySlug.tsx b/src/app/[slug]/renderBySlug.tsx index 9ac6e49..a60577c 100644 --- a/src/app/[slug]/renderBySlug.tsx +++ b/src/app/[slug]/renderBySlug.tsx @@ -1,4 +1,3 @@ -// src/app/[slug]/renderBySlug.tsx import { notFound } from "next/navigation"; import ProductCategory from "@/components/product/category"; @@ -22,7 +21,7 @@ export function renderBySlug(result: any, slug: string) { return ; case "article_detail": - return ; + return ; default: notFound(); diff --git a/src/components/article/Category/article/index.tsx b/src/components/article/Category/article/index.tsx new file mode 100644 index 0000000..4f7e6ba --- /dev/null +++ b/src/components/article/Category/article/index.tsx @@ -0,0 +1,47 @@ +import Link from "next/link"; +import { categories } from "@/data/categories"; +import { articleList } from "@/data/articles/index"; +import { useShowMore } from "@/hooks/useShowMore" +import ShowMoreButton from "@/components/shared/ButtonShowMore" +import ArticleItem from "@/components/shared/ArticleItem"; + +export default function ArticleList({ slug }: any) { + + const { article } = categories.article.all_category; + const categoryList = slug.children?.length > 0 ? slug.children : article + + const articleData = articleList.find((item: any) => item.id === slug.id)?.list || []; + const { displayData, hasMore, loadMore } = useShowMore(articleData, 12); + + return ( + <> +
+ {categoryList.map((item: any) => ( + {item.title} + ))} +
+ + {displayData.length == 0 + ? (

Tin tức đang cập nhật ... !

) + : ( + <> +
+ {displayData.map((item: any) => + + )} +
+ + {hasMore && + + } + + )} + + ) +} \ No newline at end of file diff --git a/src/components/article/Category/index.tsx b/src/components/article/Category/index.tsx index d7f900d..706f818 100644 --- a/src/components/article/Category/index.tsx +++ b/src/components/article/Category/index.tsx @@ -1,167 +1,29 @@ 'use client'; -import Link from "next/link"; import { useEffect } from 'react'; -import { categories } from "@/data/categories"; -import ArticleItem from "@/components/shared/ArticleItem"; +import ArticleList from "./article" +import VideoList from "./video"; export default function ArticleCategory({ slug }: any) { useEffect(() => { document.body.style.background = '#F5F8FF'; }, []); - console.log('slug: ', slug) - const { article } = categories.article.all_category + const { type } = slug; - - const categoryList = slug.children.length > 0 - ? slug.children - : article - console.log('categoryList: ', categoryList) return ( - <> -

Danh mục tin

-
- {/* */} -
- {categoryList.map((item:any) => ( - - {item.title} - - ))} -
+ <>

{slug.title}

+ + diff --git a/src/components/article/Category/video/index.tsx b/src/components/article/Category/video/index.tsx new file mode 100644 index 0000000..cfb2f1f --- /dev/null +++ b/src/components/article/Category/video/index.tsx @@ -0,0 +1,58 @@ +'use client'; +import { Fancybox } from "@fancyapps/ui"; +import { useEffect } from "react"; +import { useShowMore } from "@/hooks/useShowMore" +import { VideoData } from "@/data/articles/Video"; +import ShowMoreButton from "@/components/shared/ButtonShowMore" + +export default function VideoList({ slug }: any) { + + useEffect(() => { + Fancybox.bind('[data-fancybox]', {}); + return () => Fancybox.destroy(); + }, []); + + const { displayData, hasMore, loadMore } = useShowMore(VideoData.list, 12); + + return ( + <> + {displayData.length == 0 + ? (

Tin tức đang cập nhật ... !

) + : ( + <> +
+ { + displayData.map((item: any) => + + + {item.title} + + + + + {item.title} + + + ) + } +
+ + { hasMore && + + } + + )} + + ) +} \ No newline at end of file diff --git a/src/components/article/Home/Video.tsx b/src/components/article/Home/Video.tsx index 40a60c7..781100f 100644 --- a/src/components/article/Home/Video.tsx +++ b/src/components/article/Home/Video.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import { useState, useEffect, useMemo } from "react"; import { VideoData } from "@/data/articles/Video"; -export default function Video() { +export default function Video( {item} : any ) { const { total, list } = VideoData; const [active, setActive] = useState(null); const [url, setUrl] = useState(""); @@ -31,7 +31,6 @@ export default function Video() { return null; }, [url]); - return (list.length > 0 &&
@@ -48,14 +47,13 @@ export default function Video() { - Trending video + Trending video

{list.map((item: any) => -
- {categories.article.all_category.article.map((item: any) =>{ + {article.map((item: any) =>{ const data = articleList.find(i => i.id === item.id)?.list || []; return
-
diff --git a/src/components/article/detail/index.tsx b/src/components/article/detail/index.tsx index 9cf2b57..66b1b36 100644 --- a/src/components/article/detail/index.tsx +++ b/src/components/article/detail/index.tsx @@ -1,218 +1,110 @@ -export default function ArticleDetail({ slug }: { slug: string }) { - return( +'use client'; +import Link from "next/link"; +import parse from "html-react-parser"; +import { useEffect } from 'react'; +import { formatArticleTime } from "@/lib/utils"; +import ArticleItem from "@/components/shared/ArticleItem"; + +export default function ArticleDetail({ slug }: any) { + useEffect(() => { + document.body.style.background = '#ffffff'; + }, []); + + const time = slug.article_time || slug.lastUpdate; + + return ( <> - -
- {/* */} -
- - Hoàng Hà PC trên - G - o - o - g - l - e - News - -

- {" "} - {"{"} - {"{"} page.article_detail.title {"}"} - {"}"}{" "} -

-
- - Thứ sáu 25/07/2025 - | - Mai Văn Học -
-
-

- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur - quaerat vero itaque voluptatum? Repellendus laudantium est doloribus - saepe accusantium, illo numquam ullam deserunt expedita repudiandae - ipsam libero, temporibus soluta eius. -

-
- -
-
-

- {" "} - Bài viết liên quan{" "} -

- {/* Limit: 4 */} -
-
- - - -
- -

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum - quidem asperiores provident dicta veniam deleniti eaque - repudiandae cum esse, ducimus officiis quibusdam pariatur neque - voluptates voluptas. Quisquam qui minus dolorum? -

- -
- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, - obcaecati ducimus veritatis aliquid sunt accusamus unde nisi - nostrum fugit facere illo quos. Ad error suscipit, quidem optio - aut laudantium at! + + +
+
+ + Hoàng Hà PC trên + G + o + o + g + l + e + News + + +

+ {slug.title} +

+ +
+ + {formatArticleTime(time)} + | + {slug.author} +
+ +
+ {parse(slug.content)} +
+ +
+

SHARE

+
+ + + + + +
+
+
+ + {slug.related.article && +
+

+ Bài viết liên quan +

+ +
+ { + slug.related.article.slice(0, 4).map((item: any) => + + )} +
+
+ }
-
- - - - Mai Văn Học -
-
-
-
- - - -
- -

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum - quidem asperiores provident dicta veniam deleniti eaque - repudiandae cum esse, ducimus officiis quibusdam pariatur neque - voluptates voluptas. Quisquam qui minus dolorum? -

- -
- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, - obcaecati ducimus veritatis aliquid sunt accusamus unde nisi - nostrum fugit facere illo quos. Ad error suscipit, quidem optio - aut laudantium at! -
-
- - - - Mai Văn Học -
-
-
-
- - - -
- -

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum - quidem asperiores provident dicta veniam deleniti eaque - repudiandae cum esse, ducimus officiis quibusdam pariatur neque - voluptates voluptas. Quisquam qui minus dolorum? -

- -
- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, - obcaecati ducimus veritatis aliquid sunt accusamus unde nisi - nostrum fugit facere illo quos. Ad error suscipit, quidem optio - aut laudantium at! -
-
- - - - Mai Văn Học -
-
-
-
- - - -
- -

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum - quidem asperiores provident dicta veniam deleniti eaque - repudiandae cum esse, ducimus officiis quibusdam pariatur neque - voluptates voluptas. Quisquam qui minus dolorum? -

- -
- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, - obcaecati ducimus veritatis aliquid sunt accusamus unde nisi - nostrum fugit facere illo quos. Ad error suscipit, quidem optio - aut laudantium at! -
-
- - - - Mai Văn Học -
-
-
-
-
-
- + ) } \ No newline at end of file diff --git a/src/data/categories/index.tsx b/src/data/categories/index.tsx index 4e66b66..c18b3f4 100644 --- a/src/data/categories/index.tsx +++ b/src/data/categories/index.tsx @@ -240,7 +240,7 @@ export const categories = { parentId: 0, isParent: 0, item_count: 6, - type: "article", + type: "video", title: "Trending video", url: "/trending-video", summary: "", @@ -255,7 +255,7 @@ export const categories = { parentId: 0, isParent: 0, item_count: 1, - type: "article", + type: "job", title: "Kinh doanh online", url: "/kinh-doanh-online", summary: "", @@ -267,7 +267,7 @@ export const categories = { parentId: 0, isParent: 0, item_count: 0, - type: "article", + type: "job", title: "Truyền thông nội bộ", url: "/truyen-thong-noi-bo", summary: "", @@ -279,7 +279,7 @@ export const categories = { parentId: 0, isParent: 0, item_count: 3, - type: "article", + type: "job", title: "Kỹ thuật máy tính", url: "/ky-thuat-may-tinh", summary: "", @@ -291,7 +291,7 @@ export const categories = { parentId: 0, isParent: 0, item_count: 2, - type: "article", + type: "job", title: "Tài chính kế toán", url: "/tai-chinh-ke-toan", summary: "", @@ -303,7 +303,7 @@ export const categories = { parentId: 0, isParent: 0, item_count: 3, - type: "article", + type: "job", title: "Marketing", url: "/marketing", summary: "", @@ -315,7 +315,7 @@ export const categories = { parentId: 0, isParent: 0, item_count: 1, - type: "article", + type: "job", title: "Nhân sự", url: "/nhan-su", summary: "", diff --git a/src/lib/slug/resolveArticlePage.ts b/src/lib/slug/resolveArticlePage.ts index 4a1542c..9db690b 100644 --- a/src/lib/slug/resolveArticlePage.ts +++ b/src/lib/slug/resolveArticlePage.ts @@ -20,8 +20,10 @@ export function resolveArticlePage(slug: string): ArticleResult | null { } // CATEGORY - const cats = categories.article.all_category.article; - for (const parent of cats) { + const { article, job, video } = categories.article.all_category; + const allCategories = [...article, ...job, ...video]; + + for (const parent of allCategories) { if (parent.url === url) { return { type: "article_category", @@ -39,6 +41,7 @@ export function resolveArticlePage(slug: string): ArticleResult | null { } } + // DETAIL const detail = articleList .flatMap(article => article.list)