diff --git a/src/components/article/Home/ArticleCategories.tsx b/src/components/article/Home/ArticleCategories.tsx new file mode 100644 index 0000000..0f765c2 --- /dev/null +++ b/src/components/article/Home/ArticleCategories.tsx @@ -0,0 +1,58 @@ +import Link from "next/link"; +import ArticleItem from "@/components/shared/ArticleItem"; + +export default function ArticleCategories({ item, data }: any) { + + const firstItem = data[0]; + const itemList = data.slice(1, 5); + + return ( +
+
+
+
+

+ {item.title} +

+ + +
+ +
+ {item.children.map((child: any) => + + {child.title} + + )} +
+
+ + {!data || data.length === 0 ? + ( +

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

+ ) : ( +
+
+ +
+ +
+ {itemList.map((item: any) => + + )} +
+
+ ) + } +
+
+ ) +} \ No newline at end of file diff --git a/src/components/article/Home/Tiktok.tsx b/src/components/article/Home/Tiktok.tsx new file mode 100644 index 0000000..a586ec5 --- /dev/null +++ b/src/components/article/Home/Tiktok.tsx @@ -0,0 +1,167 @@ +import Link from "next/link"; + +export default function Tiktok() { + return ( +
+
+

+ + Tiktok Channel +

+
+ +
+

+ + Theo dõi kênh tiktok của Hoàng hà PC: +

+ + + ORIGINAL SOUND - HOÀNG HÀ PC + +
+
+
+ +
+ ) +} \ No newline at end of file diff --git a/src/components/article/Home/TopArticleList.tsx b/src/components/article/Home/TopArticleList.tsx new file mode 100644 index 0000000..7ef7241 --- /dev/null +++ b/src/components/article/Home/TopArticleList.tsx @@ -0,0 +1,63 @@ +'use client'; +import Link from 'next/link'; +import Image from 'next/image'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Pagination, Autoplay } from 'swiper/modules'; + +import ArticleItem from "@/components/shared/ArticleItem"; + +export default function TopArticleList({ item }: any) { + + const leftItems = item.slice(0, 7); + const rightItems = item.slice(7, 10); + + return ( +
+
+ + {leftItems.map((item: any) => ( + + + {item.title} + + + ))} + +
+ +
+

+ Tin nổi bật +

+ +
+ { + rightItems.map((item: any) => ) + } +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/article/Home/Video.tsx b/src/components/article/Home/Video.tsx new file mode 100644 index 0000000..40a60c7 --- /dev/null +++ b/src/components/article/Home/Video.tsx @@ -0,0 +1,88 @@ +import Link from "next/link"; +import { useState, useEffect, useMemo } from "react"; +import { VideoData } from "@/data/articles/Video"; + +export default function Video() { + const { total, list } = VideoData; + const [active, setActive] = useState(null); + const [url, setUrl] = useState(""); + + // set video mặc định + useEffect(() => { + if (list?.length > 0) { + setActive(list[0].id); + setUrl(list[0].video_code); + } + }, [list]); + + const videoId = useMemo(() => { + if (!url) return null; + + // https://www.youtube.com/watch?v=xxxx + if (url.includes('v=')) { + return url.split('v=')[1].split('&')[0]; + } + + // https://youtu.be/xxxx + if (url.includes('youtu.be/')) { + return url.split('youtu.be/')[1].split('?')[0]; + } + + return null; + }, [url]); + + + return (list.length > 0 && +
+
+ {videoId && ( +