05/02
This commit is contained in:
@@ -1,166 +1,124 @@
|
||||
import Link from "next/link";
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Pagination, Autoplay } from 'swiper/modules';
|
||||
|
||||
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)"
|
||||
<i className="lazy bg-no-repeat bg-center bg-[length:100%_100%] w-8 h-8 lg:w-12 lg:h-12"
|
||||
style={{ backgroundImage: '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
|
||||
|
||||
<Link
|
||||
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>
|
||||
</Link>
|
||||
</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">
|
||||
<Swiper
|
||||
spaceBetween={16}
|
||||
slidesPerView={1.7}
|
||||
loop={true}
|
||||
autoplay={{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
modules={[Pagination, Autoplay]}
|
||||
speed={1000}
|
||||
breakpoints= {{
|
||||
414: {
|
||||
slidesPerView: 2
|
||||
},
|
||||
576: {
|
||||
slidesPerView: 3
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 4
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 6
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<Link href="https://www.tiktok.com/@hoangha.pc/video/7260350983039945985" rel="nofollow" target="_blank">
|
||||
<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"
|
||||
/>
|
||||
<img src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-sieu-vip-pro.jpg" alt="tiktok video" 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 leading-[22px] font-600 text-16">Đơn hàng cho công ty VIP PRO</span>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<Link href="https://www.tiktok.com/@hoangha.pc/video/7259685093806034177" rel="nofollow" target="_blank">
|
||||
<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"
|
||||
/>
|
||||
<img src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg" alt="tiktok video" 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 leading-[22px] font-600 text-16"> Đơn hàng đặc biệt cho khách vip </span>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<Link href="https://www.tiktok.com/@hoangha.pc/video/7259272220093041926" rel="nofollow" target="_blank">
|
||||
<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"
|
||||
/>
|
||||
<img src="https://hoanghapccdn.com/media/lib/27-07-2023/don-pc-200-trieu.jpg" alt="tiktok video" 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 leading-[22px] font-600 text-16"> Đơn PC hơn 200 củ </span>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<Link href="https://www.tiktok.com/@hoangha.pc/video/7256640817752820997" rel="nofollow" target="_blank">
|
||||
<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"
|
||||
/>
|
||||
<img src="https://hoanghapccdn.com/media/lib/27-07-2023/don-pc-300-trieu.jpg" alt="tiktok video" 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 leading-[22px] font-600 text-16"> Đơn hàng hơn 300 củ có gì? </span>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<Link href="https://www.tiktok.com/@hoangha.pc/video/7249589730000522501" rel="nofollow" target="_blank">
|
||||
<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"
|
||||
/>
|
||||
<img src="https://hoanghapccdn.com/media/lib/27-07-2023/pc-dau-than.jpg" alt="tiktok video" 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 leading-[22px] font-600 text-16"> PC Full trắng vừa đẹp vừa khỏe </span>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<Link href="https://www.tiktok.com/@hoangha.pc/video/7245136755375049989" rel="nofollow" target="_blank">
|
||||
<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"
|
||||
/>
|
||||
<img src="https://hoanghapccdn.com/media/lib/27-07-2023/pc-80-trieu-co-gi.jpg" alt="tiktok video" 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>
|
||||
|
||||
<span className="block leading-[22px] font-600 text-16"> PC 80 củ có gì? </span>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,27 +1,21 @@
|
||||
'use client';
|
||||
import Link from "next/link";
|
||||
import { useEffect } from 'react';
|
||||
import useScrollSpy from "@/hooks/useScrollSpy";
|
||||
import { articleList } from "@/data/articles";
|
||||
import { categories } from "@/data/categories";
|
||||
import useScrollSpy from "@/hooks/useScrollSpy";
|
||||
|
||||
import TopArticleList from "./TopArticleList";
|
||||
import ArticleCategories from "./ArticleCategories";
|
||||
import Video from "./Video"
|
||||
import Tiktok from "./Tiktok";
|
||||
|
||||
export default function ArticleHome() {
|
||||
const {
|
||||
article,
|
||||
video,
|
||||
job
|
||||
} = categories.article.all_category;
|
||||
|
||||
console.log(video, job)
|
||||
|
||||
const top_article_list = articleList
|
||||
.flatMap(item => item.list)
|
||||
.filter(item => item.is_featured == 1)
|
||||
.slice(0, 10);
|
||||
.flatMap(item => item.list)
|
||||
.filter(item => item.is_featured == 1)
|
||||
.slice(0, 10);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.background = '#F5F8FF';
|
||||
@@ -44,7 +38,7 @@ export default function ArticleHome() {
|
||||
|
||||
<div className="article-categories-group bg-[#F5F8FF] sticky top-[68px] lg:top-[76px] left-0 right-0 z-[2] pt-5">
|
||||
<div className="container flex justify-between relative overflow-auto whitespace-nowrap uppercase font-500 leading-[18px] text-[#828282] gap-5 lg:gap-1 no-scroll border-b border-[#C5CBD8]">
|
||||
{article.map((item) => (
|
||||
{categories.article.all_category.article.map((item:any) => (
|
||||
<Link className="js-category-tab"
|
||||
href={`#js-category-${item.id}`}
|
||||
key={item.id}
|
||||
@@ -56,7 +50,7 @@ export default function ArticleHome() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{article.map((item: any) =>{
|
||||
{categories.article.all_category.article.map((item: any) =>{
|
||||
const data = articleList.find(i => i.id === item.id)?.list || [];
|
||||
|
||||
return <ArticleCategories
|
||||
|
||||
Reference in New Issue
Block a user