update 04/02
This commit is contained in:
58
src/components/article/Home/ArticleCategories.tsx
Normal file
58
src/components/article/Home/ArticleCategories.tsx
Normal file
@@ -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 (
|
||||
<div className="article-category-container" id={`js-category-${item.id}`} key={item.id}>
|
||||
<div className="container">
|
||||
<div className="group-title flex flex-wrap items-center justify-between gap-4 mb-4 lg:mb-6">
|
||||
<div className="flex items-center gap-2 lg:gap-3">
|
||||
<h2 className="m-0 font-600 text-[#004BA4] text-20 leading-6 lg:leading-10 lg:text-[32px]">
|
||||
{item.title}
|
||||
</h2>
|
||||
|
||||
<Link href={item.url}
|
||||
className="bx bx-chevron-right border-[1.5px] border-[#0677DB4D] rounded-full w-5 lg:w-8 h-5 lg:h-8 flex items-center justify-center text-[#0678DB] text-18 lg:text-[24px] hover:bg-[#0678DB] hover:text-white"
|
||||
></Link>
|
||||
</div>
|
||||
|
||||
<div className="w-full lg:w-auto flex gap-2 leading-[30px] text-[#0678DB] font-600 text-16 overflow-auto whitespace-nowrap no-scroll">
|
||||
{item.children.map((child: any) =>
|
||||
<Link className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
|
||||
href={child.url}
|
||||
key={child.id}
|
||||
>
|
||||
{child.title}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!data || data.length === 0 ?
|
||||
(
|
||||
<p className="text-center font-600 uppercase mt-10 text-20"> Tin tức đang cập nhật ... ! </p>
|
||||
) : (
|
||||
<div className="article-category-holder grid lg:grid-cols-2 gap-5 lg:gap-8">
|
||||
<div className="first-item">
|
||||
<ArticleItem item={firstItem} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 lg:gap-6">
|
||||
{itemList.map((item: any) =>
|
||||
<ArticleItem
|
||||
item={item}
|
||||
key={item.id}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
167
src/components/article/Home/Tiktok.tsx
Normal file
167
src/components/article/Home/Tiktok.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Tiktok() {
|
||||
return (
|
||||
<div className="article-tiktok-container py-8 lg:py-16">
|
||||
<div className="group-title flex items-center justify-between flex-wrap gap-4 mb-6">
|
||||
<h2 className="flex items-center m-0 leading-8 font-600 text-20 text-[#004BA4] gap-[10px] lg:gap-4 lg:text-[32px] lg:leading-10">
|
||||
<i
|
||||
className="lazy bg-no-repeat bg-center bg-[length:100%_100%] w-8 h-8 lg:w-12 lg:h-12"
|
||||
data-bg="url(images/logo-tiktok.png)"
|
||||
/>
|
||||
<span> Tiktok Channel </span>
|
||||
</h2>
|
||||
<div className="flex flex-wrap items-center justify-center text-center bg-[#DCE8FF] rounded-[16px_0_] leading-5 lg:leading-6 lg:text-[16px] gap-3 lg:w-[823px] w-full p-3 lg:p-4">
|
||||
<i className="icons icon-finger !w-6 !h-6 animation-wiggle" />
|
||||
<div className="lg:flex flex-wrap">
|
||||
<p className="m-0 mr-1">
|
||||
|
||||
Theo dõi kênh tiktok của Hoàng hà PC:
|
||||
</p>
|
||||
<a
|
||||
href="https://www.tiktok.com/@hoangha.pc"
|
||||
target="_blank"
|
||||
rel="nofollow"
|
||||
className="text-[#0678DB] font-600 table lg:text-[16px]"
|
||||
>
|
||||
|
||||
ORIGINAL SOUND - HOÀNG HÀ PC
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="swiper overflow-hidden" id="js-tiktok-slide">
|
||||
<div className="swiper-wrapper">
|
||||
<div className="swiper-slide">
|
||||
<a href="" target="_blank" rel="nofollow">
|
||||
<span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
|
||||
<img
|
||||
data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
className="block lazy w-full absolute h-full object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="block leading-[22px] font-600 text-16">
|
||||
Đơn hàng đặc biệt cho khách VIP
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a href="" target="_blank" rel="nofollow">
|
||||
<span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
|
||||
<img
|
||||
data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
className="block lazy w-full absolute h-full object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="block leading-[22px] font-600 text-16">
|
||||
Đơn hàng đặc biệt cho khách VIP
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a href="" target="_blank" rel="nofollow">
|
||||
<span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
|
||||
<img
|
||||
data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
className="block lazy w-full absolute h-full object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="block leading-[22px] font-600 text-16">
|
||||
Đơn hàng đặc biệt cho khách VIP
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a href="" target="_blank" rel="nofollow">
|
||||
<span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
|
||||
<img
|
||||
data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
className="block lazy w-full absolute h-full object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="block leading-[22px] font-600 text-16">
|
||||
Đơn hàng đặc biệt cho khách VIP
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a href="" target="_blank" rel="nofollow">
|
||||
<span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
|
||||
<img
|
||||
data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
className="block lazy w-full absolute h-full object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="block leading-[22px] font-600 text-16">
|
||||
Đơn hàng đặc biệt cho khách VIP
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a href="" target="_blank" rel="nofollow">
|
||||
<span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
|
||||
<img
|
||||
data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
className="block lazy w-full absolute h-full object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="block leading-[22px] font-600 text-16">
|
||||
Đơn hàng đặc biệt cho khách VIP
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a href="" target="_blank" rel="nofollow">
|
||||
<span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
|
||||
<img
|
||||
data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
className="block lazy w-full absolute h-full object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="block leading-[22px] font-600 text-16">
|
||||
Đơn hàng đặc biệt cho khách VIP
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a href="" target="_blank" rel="nofollow">
|
||||
<span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
|
||||
<img
|
||||
data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
className="block lazy w-full absolute h-full object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="block leading-[22px] font-600 text-16">
|
||||
Đơn hàng đặc biệt cho khách VIP
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
63
src/components/article/Home/TopArticleList.tsx
Normal file
63
src/components/article/Home/TopArticleList.tsx
Normal file
@@ -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 (
|
||||
<div className="top-article-container container flex flex-wrap gap-6 !mb-2 lg:!mb-6">
|
||||
<div className="col-left w-full lg:w-[718px] swiper overflow-hidden relative">
|
||||
<Swiper
|
||||
spaceBetween={10}
|
||||
slidesPerView={1}
|
||||
loop={true}
|
||||
autoplay={{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
modules={[Pagination, Autoplay]}
|
||||
pagination={{ clickable: true }}
|
||||
>
|
||||
{leftItems.map((item: any) => (
|
||||
<SwiperSlide key={item.id}>
|
||||
<Link href={item.url}
|
||||
{...(item.external_url ? {
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer"
|
||||
} : {})}
|
||||
>
|
||||
<Image
|
||||
src={item.image.original}
|
||||
alt={item.title}
|
||||
width={100}
|
||||
height={100}
|
||||
unoptimized
|
||||
className="block w-full rounded-[16px]"
|
||||
/>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
|
||||
<div className="col-right w-full lg:w-[calc(100%-742px)]">
|
||||
<p className="font-600 text-20 leading-6 lg:text-[24px] lg:leading-8 mb-3">
|
||||
Tin nổi bật
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{
|
||||
rightItems.map((item: any) => <ArticleItem key={item.id} item={item} />)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
88
src/components/article/Home/Video.tsx
Normal file
88
src/components/article/Home/Video.tsx
Normal file
@@ -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<number | null>(null);
|
||||
const [url, setUrl] = useState<string>("");
|
||||
|
||||
// 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 &&
|
||||
<div className="article-video-container lg:flex flex-wrap gap-4 mt-16">
|
||||
<div className="lg:w-[732px] video-holder">
|
||||
{videoId && (
|
||||
<iframe
|
||||
src={`https://www.youtube.com/embed/${videoId}`}
|
||||
allowFullScreen
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="lg:w-[calc(100%-748px)] rounded-[16px] overflow-hidden bg-[#EAF1FF]">
|
||||
<p className="group-title m-0 text-white flex items-center gap-2 lg:gap-3 font-600 p-[8px_12px] leading-[18px] lg:text-[20px] lg:leading-6 lg:p-[12px_16px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,#114CDD_100.92%)]">
|
||||
<i className="w-[18px] h-[18px] lg:w-6 lg:h-6 lazy bg-no-repeat bg-center bg-[length:100%_100%]"
|
||||
style={{ backgroundImage: 'url(/images/icon-playlist.png)' }}
|
||||
/>
|
||||
<Link href="/video"> Trending video </Link>
|
||||
</p>
|
||||
|
||||
<div className="h-[385px] p-4 pr-1 relative">
|
||||
<div className="h-full overflow-auto flex flex-col gap-4">
|
||||
{list.map((item: any) =>
|
||||
<button
|
||||
type="button"
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
setActive(item.id);
|
||||
setUrl(item.video_code)
|
||||
}}
|
||||
className={`video-item text-left
|
||||
${active === item.id ? 'color-main' : ''}
|
||||
`}
|
||||
>
|
||||
<span className="video-img">
|
||||
<img
|
||||
src={item.image.original}
|
||||
alt={item.title}
|
||||
width={120}
|
||||
height={66}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<p className="video-title m-0">
|
||||
<span>{item.title}</span>
|
||||
</p>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="gradient-overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user