update
This commit is contained in:
123
src/components/home/ArticleVideo/ItemArticleVideo/index.tsx
Normal file
123
src/components/home/ArticleVideo/ItemArticleVideo/index.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
'use client';
|
||||
import React, { useState } from 'react';
|
||||
import { Article } from '@/types';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { FaTimes } from 'react-icons/fa';
|
||||
|
||||
type ItemArticleProps = {
|
||||
item: Article;
|
||||
};
|
||||
|
||||
const ItemArticleVideo: React.FC<ItemArticleProps> = ({ item }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
// chọn link: nếu có external_url thì dùng, ngược lại dùng url
|
||||
const linkHref = item.external_url && item.external_url !== '' ? item.external_url : item.url;
|
||||
|
||||
// chọn ảnh: nếu có original thì dùng, ngược lại ảnh mặc định
|
||||
const imageSrc =
|
||||
item.image?.original && item.image.original !== ''
|
||||
? item.image.original
|
||||
: '/static/assets/nguyencong_2023/images/not-image.png';
|
||||
|
||||
// chọn thời gian: ưu tiên article_time, fallback createDate
|
||||
const timeDisplay =
|
||||
item.article_time && item.article_time !== '' ? item.article_time : item.createDate;
|
||||
|
||||
const getYoutubeEmbedUrl = (url: string): string => {
|
||||
try {
|
||||
const urlObj = new URL(url);
|
||||
// nếu là link youtube dạng watch?v=...
|
||||
if (urlObj.hostname.includes('youtube.com')) {
|
||||
const videoId = urlObj.searchParams.get('v');
|
||||
if (videoId) {
|
||||
return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
|
||||
}
|
||||
}
|
||||
// nếu là link youtu.be/xxxx
|
||||
if (urlObj.hostname.includes('youtu.be')) {
|
||||
const videoId = urlObj.pathname.replace('/', '');
|
||||
if (videoId) {
|
||||
return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
|
||||
}
|
||||
}
|
||||
// fallback: trả về chính url
|
||||
return url;
|
||||
} catch {
|
||||
return url;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="item-article flex gap-3">
|
||||
<Link
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setOpen(true);
|
||||
}}
|
||||
href="javascript:void(0)"
|
||||
className="img-article boder-radius-10 relative"
|
||||
>
|
||||
<Image
|
||||
className="boder-radius-10"
|
||||
src={imageSrc}
|
||||
width={265}
|
||||
height={180}
|
||||
alt={item.title}
|
||||
/>
|
||||
{/* icon video nếu cần */}
|
||||
<i className="sprite sprite-icon-play-video-detail icon-video-feature incon-play-youtube"></i>
|
||||
<i className="sprite sprite-play-youtube incon-play-youtube"></i>
|
||||
</Link>
|
||||
|
||||
<div className="content-article content-article-item flex flex-1 flex-col">
|
||||
<Link href={linkHref} className="title-article">
|
||||
<h3 className="line-clamp-2 font-[400]">{item.title}</h3>
|
||||
</Link>
|
||||
|
||||
<p className="time-article flex items-center gap-4">
|
||||
<i className="sprite sprite-clock-item-article"></i>
|
||||
<span>{timeDisplay}</span>
|
||||
</p>
|
||||
|
||||
<p className="descreption-article line-clamp-2">{item.summary}</p>
|
||||
</div>
|
||||
</div>
|
||||
{open && (
|
||||
<dialog id="video_modal" className="modal modal-open">
|
||||
<div className="modal-box w-11/12 max-w-3xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-bold">{item.title}</h3>
|
||||
<form method="dialog">
|
||||
<button
|
||||
className="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<FaTimes size={16} />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="video-wrapper mt-4">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="400"
|
||||
src={getYoutubeEmbedUrl(item.external_url)}
|
||||
title={item.title}
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button onClick={() => setOpen(false)}>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ItemArticleVideo;
|
||||
265
src/components/home/ArticleVideo/dataArticle.ts
Normal file
265
src/components/home/ArticleVideo/dataArticle.ts
Normal file
@@ -0,0 +1,265 @@
|
||||
import { ListArticle } from '@/types';
|
||||
|
||||
export const dataArticle: ListArticle = [
|
||||
{
|
||||
id: 4185,
|
||||
title: 'Chuyện RAM ĐẮT - Góc nhìn mà anh em chưa thấy',
|
||||
extend: {
|
||||
pixel_code: '',
|
||||
},
|
||||
summary: '',
|
||||
createDate: '28-11-2025, 11:51 am',
|
||||
createBy: '53',
|
||||
lastUpdate: '28-11-2025, 11:51 am',
|
||||
lastUpdateBy: '53',
|
||||
visit: 8,
|
||||
is_featured: 0,
|
||||
article_time: '',
|
||||
review_rate: 0,
|
||||
review_count: 0,
|
||||
video_code: '',
|
||||
external_url: 'https://www.youtube.com/watch?v=rH9Aq_2yZEc',
|
||||
author: 'Trần Mạnh',
|
||||
counter: 1,
|
||||
url: '/chuyen-ram-dat-goc-nhin-ma-anh-em-chua-thay',
|
||||
image: {
|
||||
thum: 'https://nguyencongpc.vn/media/news/120-4185---efwegweg.jpg',
|
||||
original: 'https://nguyencongpc.vn/media/news/4185---efwegweg.jpg',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4184,
|
||||
title: 'Build PC GAMING tầm giá 20 Triệu trong mùa BÃO RAM - Cũng KHOAI phết',
|
||||
extend: {
|
||||
pixel_code: '',
|
||||
},
|
||||
summary: '',
|
||||
createDate: '28-11-2025, 11:49 am',
|
||||
createBy: '53',
|
||||
lastUpdate: '28-11-2025, 11:49 am',
|
||||
lastUpdateBy: '53',
|
||||
visit: 7,
|
||||
is_featured: 0,
|
||||
article_time: '',
|
||||
review_rate: 0,
|
||||
review_count: 0,
|
||||
video_code: '',
|
||||
external_url: 'https://www.youtube.com/watch?v=c-JQPclPXmg',
|
||||
author: 'Trần Mạnh',
|
||||
counter: 2,
|
||||
url: '/build-pc-gaming-tam-gia-20-trieu-trong-mua-bao-ram-cung-khoai-phet',
|
||||
image: {
|
||||
thum: 'https://nguyencongpc.vn/media/news/120-4184-maxresdefault.jpg',
|
||||
original: 'https://nguyencongpc.vn/media/news/4184-maxresdefault.jpg',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4171,
|
||||
title: 'Điểm dừng cho PC GAMING - Nhiều tiền thì cũng PHÍ',
|
||||
extend: {
|
||||
pixel_code: '',
|
||||
},
|
||||
summary: '',
|
||||
createDate: '10-11-2025, 2:41 pm',
|
||||
createBy: '53',
|
||||
lastUpdate: '10-11-2025, 2:41 pm',
|
||||
lastUpdateBy: '53',
|
||||
visit: 8,
|
||||
is_featured: 0,
|
||||
article_time: '',
|
||||
review_rate: 0,
|
||||
review_count: 0,
|
||||
video_code: '',
|
||||
external_url: 'https://www.youtube.com/watch?v=xUpMSpaa_H0',
|
||||
author: 'Trần Mạnh',
|
||||
counter: 3,
|
||||
url: '/diem-dung-cho-pc-gaming-nhieu-tien-thi-cung-phi',
|
||||
image: {
|
||||
thum: 'https://nguyencongpc.vn/media/news/120-4171-dvsdfgrsdf.jpg',
|
||||
original: 'https://nguyencongpc.vn/media/news/4171-dvsdfgrsdf.jpg',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3683,
|
||||
title: 'Bộ PC KHỦNG BỐ tới đâu mà đích thân Chủ Tịch MaxHome phải tự đi build ???',
|
||||
extend: {
|
||||
pixel_code: '',
|
||||
},
|
||||
summary: '',
|
||||
createDate: '12-03-2025, 9:59 am',
|
||||
createBy: '53',
|
||||
lastUpdate: '12-03-2025, 9:59 am',
|
||||
lastUpdateBy: '53',
|
||||
visit: 64,
|
||||
is_featured: 0,
|
||||
article_time: '',
|
||||
review_rate: 0,
|
||||
review_count: 0,
|
||||
video_code: '',
|
||||
external_url: 'https://www.youtube.com/watch?v=Ir9zlznA9ms',
|
||||
author: 'Trần Mạnh',
|
||||
counter: 4,
|
||||
url: '/bo-pc-khung-bo-toi-dau-ma-dich-than-chu-tich-maxhome-phai-tu-di-build',
|
||||
image: {
|
||||
thum: 'https://nguyencongpc.vn/media/news/120-3683-tymyumyj.jpg',
|
||||
original: 'https://nguyencongpc.vn/media/news/3683-tymyumyj.jpg',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4107,
|
||||
title: 'Intel ĐẮT quá nên BUILD PC với AMD chỉ 17 TRIỆU mà chiến ALL GAME',
|
||||
extend: {
|
||||
pixel_code: '',
|
||||
},
|
||||
summary: '',
|
||||
createDate: '04-10-2025, 5:39 pm',
|
||||
createBy: '53',
|
||||
lastUpdate: '04-10-2025, 5:40 pm',
|
||||
lastUpdateBy: '53',
|
||||
visit: 7,
|
||||
is_featured: 0,
|
||||
article_time: '',
|
||||
review_rate: 0,
|
||||
review_count: 0,
|
||||
video_code: '',
|
||||
external_url: 'https://www.youtube.com/watch?v=DBuud_Lwt6w',
|
||||
author: 'Trần Mạnh',
|
||||
counter: 5,
|
||||
url: '/intel-dat-qua-nen-build-pc-voi-amd-chi-17-trieu-ma-chien-all-game',
|
||||
image: {
|
||||
thum: 'https://nguyencongpc.vn/media/news/120-4107---gherthert.jpg',
|
||||
original: 'https://nguyencongpc.vn/media/news/4107---gherthert.jpg',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4079,
|
||||
title: 'Tôi thấy chán PC HIỆU NĂNG/GIÁ THÀNH sau khi thấy bộ PC này',
|
||||
extend: {
|
||||
pixel_code: '',
|
||||
},
|
||||
summary: '',
|
||||
createDate: '20-09-2025, 10:42 am',
|
||||
createBy: '53',
|
||||
lastUpdate: '20-09-2025, 10:42 am',
|
||||
lastUpdateBy: '53',
|
||||
visit: 28,
|
||||
is_featured: 0,
|
||||
article_time: '',
|
||||
review_rate: 0,
|
||||
review_count: 0,
|
||||
video_code: '',
|
||||
external_url: 'https://www.youtube.com/watch?v=ceT_nSB1JCA',
|
||||
author: 'Trần Mạnh',
|
||||
counter: 6,
|
||||
url: '/toi-thay-chan-pc-hieu-nang-gia-thanh-sau-khi-thay-bo-pc-nay',
|
||||
image: {
|
||||
thum: 'https://nguyencongpc.vn/media/news/120-4079-ewgergherth.jpg',
|
||||
original: 'https://nguyencongpc.vn/media/news/4079-ewgergherth.jpg',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4004,
|
||||
title: 'Sinh Viên ĐỒ HOẠ lên cấu hình PC nào dưới 20 TRIỆU trong 2025',
|
||||
extend: {
|
||||
pixel_code: '',
|
||||
},
|
||||
summary: '',
|
||||
createDate: '15-08-2025, 2:04 pm',
|
||||
createBy: '53',
|
||||
lastUpdate: '15-08-2025, 2:04 pm',
|
||||
lastUpdateBy: '53',
|
||||
visit: 44,
|
||||
is_featured: 0,
|
||||
article_time: '',
|
||||
review_rate: 0,
|
||||
review_count: 0,
|
||||
video_code: '',
|
||||
external_url: 'https://www.youtube.com/watch?v=k6rIzVmU9bA',
|
||||
author: 'Trần Mạnh',
|
||||
counter: 7,
|
||||
url: '/sinh-vien-do-hoa-len-cau-hinh-pc-nao-duoi-20-trieu-trong-2025',
|
||||
image: {
|
||||
thum: 'https://nguyencongpc.vn/media/news/120-4004-dhtrhj.jpg',
|
||||
original: 'https://nguyencongpc.vn/media/news/4004-dhtrhj.jpg',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3951,
|
||||
title: 'Cấu hình PC 10 Triệu cả Màn hình - Test GAME AAA vẫn OK',
|
||||
extend: {
|
||||
pixel_code: '',
|
||||
},
|
||||
summary: '',
|
||||
createDate: '19-07-2025, 4:57 pm',
|
||||
createBy: '53',
|
||||
lastUpdate: '19-07-2025, 4:57 pm',
|
||||
lastUpdateBy: '53',
|
||||
visit: 43,
|
||||
is_featured: 0,
|
||||
article_time: '',
|
||||
review_rate: 0,
|
||||
review_count: 0,
|
||||
video_code: '',
|
||||
external_url: 'https://www.youtube.com/watch?v=QCQwdLcosQc',
|
||||
author: 'Trần Mạnh',
|
||||
counter: 8,
|
||||
url: '/cau-hinh-pc-10-trieu-ca-man-hinh-test-game-aaa-van-ok',
|
||||
image: {
|
||||
thum: 'https://nguyencongpc.vn/media/news/120-3951-dfbeadbeat.jpg',
|
||||
original: 'https://nguyencongpc.vn/media/news/3951-dfbeadbeat.jpg',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3950,
|
||||
title:
|
||||
'Tại sao mình ít làm video CORE ULTRA - Có đáng không 40 Triệu cho Ultra 7 265K + RTX 5070',
|
||||
extend: {
|
||||
pixel_code: '',
|
||||
},
|
||||
summary: '',
|
||||
createDate: '19-07-2025, 4:56 pm',
|
||||
createBy: '53',
|
||||
lastUpdate: '19-07-2025, 5:00 pm',
|
||||
lastUpdateBy: '53',
|
||||
visit: 51,
|
||||
is_featured: 0,
|
||||
article_time: '',
|
||||
review_rate: 0,
|
||||
review_count: 0,
|
||||
video_code: '',
|
||||
external_url: 'https://www.youtube.com/watch?v=Y6PBwYe5My0',
|
||||
author: 'Trần Mạnh',
|
||||
counter: 9,
|
||||
url: '/tai-sao-minh-it-lam-video-core-ultra-co-dang-khong-40-trieu-cho-ultra-7-265k-rtx-5070',
|
||||
image: {
|
||||
thum: 'https://nguyencongpc.vn/media/news/120-3950-maxresdefault.jpg',
|
||||
original: 'https://nguyencongpc.vn/media/news/3950-maxresdefault.jpg',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3949,
|
||||
title: 'Cấu hình PC PHỔ BIẾN nhất THẾ GIỚI gaming - Cũng rẻ phết',
|
||||
extend: {
|
||||
pixel_code: '',
|
||||
},
|
||||
summary: '',
|
||||
createDate: '19-07-2025, 4:54 pm',
|
||||
createBy: '53',
|
||||
lastUpdate: '19-07-2025, 4:54 pm',
|
||||
lastUpdateBy: '53',
|
||||
visit: 28,
|
||||
is_featured: 0,
|
||||
article_time: '',
|
||||
review_rate: 0,
|
||||
review_count: 0,
|
||||
video_code: '',
|
||||
external_url: 'https://www.youtube.com/watch?v=KXfA10koGDk',
|
||||
author: 'Trần Mạnh',
|
||||
counter: 10,
|
||||
url: '/cau-hinh-pc-pho-bien-nhat-the-gioi-gaming-cung-re-phet',
|
||||
image: {
|
||||
thum: 'https://nguyencongpc.vn/media/news/120-3949----herthrtn.jpg',
|
||||
original: 'https://nguyencongpc.vn/media/news/3949----herthrtn.jpg',
|
||||
},
|
||||
},
|
||||
];
|
||||
31
src/components/home/ArticleVideo/index.tsx
Normal file
31
src/components/home/ArticleVideo/index.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { FaCaretRight } from 'react-icons/fa';
|
||||
import Link from 'next/link';
|
||||
import { dataArticle } from './dataArticle';
|
||||
import ItemArticleVideo from './ItemArticleVideo';
|
||||
const BoxArticleVideo: React.FC = () => {
|
||||
return (
|
||||
<div className="box-videos-group box-article-group boder-radius-10 relative">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="title-box">
|
||||
<h2 className="title-box font-[600]">Youtube Channel</h2>
|
||||
</div>
|
||||
<Link
|
||||
href="https://www.youtube.com/NguyenCongPC"
|
||||
target="_blank"
|
||||
rel="nofollow"
|
||||
className="btn-article-group flex items-center gap-2"
|
||||
>
|
||||
<span>Xem tất cả </span>
|
||||
<FaCaretRight size={16} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="list-videos-group list-article-group flex items-center gap-10">
|
||||
{dataArticle.slice(0, 4).map((item, index) => (
|
||||
<ItemArticleVideo item={item} key={index} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BoxArticleVideo;
|
||||
Reference in New Issue
Block a user