ducdt/hoanghapc_nextJs
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 13/01

Browse Source
This commit is contained in:
Dao Duc
2026-01-13 17:22:12 +07:00
parent da37dc67e7
commit 229bdbde54
23 changed files with 7751 additions and 6309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/shared/FancyboxTrigger.tsx Normal file
View File

@@ -0,0 +1,27 @@
'use client';
import React from 'react';
type Props = {
target: string;
group?: string;
children: React.ReactNode;
className?: string;
};
export default function FancyboxTrigger({
target,
group = 'default',
children,
className
}: Props) {
return (
<a
href={target}
data-fancybox={group}
className={className}
>
{children}
</a>
);
}

71
src/components/shared/Feedback.tsx Normal file
View File

@@ -0,0 +1,71 @@
export default function FeedBack(){
return(
<div id="fancybox-feedback" style={{ display: 'none' }}
className="fancybox-content-container max-w-[800px] text-[#000] w-full text-16 leading-6 !p-0 !bg-transparent">
<div className="bg-white overflow-hidden rounded-[12px]">
<div className="text-center bg-[#0676DA] uppercase font-500 text-20 p-5 relative text-white">
<p className="m-0"> Chúng tôi luôn lắng nghe mọi ý kiến đóng góp từ Quý khách </p>
</div>
<div className="p-6 font-400">
<p className="mb-4"> Vui lòng điền đầy đủ thông tin bên dưới để chúng tôi có thể hỗ trợ nhanh chóng và chính xác nhất. </p>
<div className="flex flex-wrap gap-3 lg:grid lg:gap-4 grid-cols-2 text-16 mb-4">
<div className="col-span-1 w-full">
<p className="font-600 mb-2"> Họ và tên <span className="red">*</span> </p>
<input type="text" id="js-feedback-name" placeholder="Nhập họ và tên" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal"/>
</div>
<div className="col-span-1 w-full">
<p className="font-600 mb-2"> Số điện thoại <span className="red">*</span> </p>
<input type="text" id="js-feedback-phone" placeholder="Nhập số điện thoại" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal"/>
</div>
<div className="col-span-1 w-full">
<p className="font-600 mb-2"> Email </p>
<input type="text" id="js-feedback-email" placeholder="Nhập Email (tùy chọn)" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal"/>
</div>
<div className="col-span-1 w-full">
<p className="font-600 mb-2"> Loại yêu cầu <span className="red">*</span> </p>
<select id="js-feedback-type" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal">
<option value=""> Chọn loại yêu cầu </option>
<option value="1"> Tư vấn sản phẩm </option>
<option value="2"> Hỗ trợ kỹ thuật </option>
<option value="3"> Khiếu nại dịch vụ </option>
<option value="4"> Góp ý, phản hồi </option>
<option value="5"> Khác </option>
</select>
</div>
<div className="col-span-2 w-full">
<p className="font-600 mb-2"> Nội dung chi tiết </p>
<textarea id="js-feedback-content" placeholder="Vui lòng ghi rõ thông tin yêu cầu, góp ý hoặc khiếu nại của Quý khách." className="block w-full p-[14px_16px] min-h-[160px] border border-transparent rounded-[12px] bg-[#F3F3F3] placeholder:text-[#9B9B9B] placeholder:font-normal resize-none outline-none"></textarea>
</div>
<div className="col-span-2 w-full flex items-center justify-between flex-wrap gap-2 lg:gap-4">
<p className="m-0"> Thời gian phản hồi mong muốn </p>
<select id="js-feedback-time" className="w-full max-w-[400px] h-[46px] rounded-[12px] px-4 bg-[#fff] border border-[#D6DAE1]">
<option value=""> Thời gian phản hồi </option>
<option value="1"> Trong ngày </option>
<option value="2"> 1-3 ngày </option>
<option value="3"> 3-7 ngày </option>
<option value="4"> Trên 7 ngày </option>
</select>
</div>
</div>
<p className="text-[#757575] leading-4 my-6 flex items-center">
<i className="bx bx-info-circle blue mr-1 text-16"></i>
<span className="font-300"> Thông tin của Quý khách sẽ được chúng tôi bảo mật tuyệt đối và chỉ sử dụng nhằm mục đích hỗ trợ. </span>
</p>
<p className="red my-4"></p>
<button type="button" aria-label="Gửi phản hồi" className="font-600 bg-btn border text-white block w-full max-w-[320px] mx-auto text-center mt-4 leading-[40px] rounded-[40px] uppercase border-0"> Gửi góp ý </button>
</div>
</div>
</div>
)
}

40
src/components/shared/FixedButtons.tsx Normal file
View File

@@ -0,0 +1,40 @@
'use client';
import { useEffect, useState } from 'react'
export default function FixedButtons() {
const [showGoTop, setShowGoTop] = useState(false);
const [animate, setAnimate] = useState(false);
useEffect(() => {
const onScroll = () => {
setShowGoTop(window.scrollY > 250);
};
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
useEffect(() => {
const timer = setTimeout(() => setAnimate(true), 800);
return () => clearTimeout(timer);
}, []);
const goTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
return (
<>
<div className={`global-fixed-button-container ${animate ? 'animate__backInRight' : ''}`}>
<a href="" target="_blank" rel="nofollow noopener noreferrer"> <i className="bx bxs-message-bubble-dots animation-beat"></i> </a>
<a href="" target="_blank" rel="nofollow noopener noreferrer" style={{ backgroundImage: 'url(/images/icon-mess.png)' }}></a>
<a href="" target="_blank" rel="nofollow noopener noreferrer"> <i className="bx bxs-phone animation-phone-ring"></i> </a>
</div>
{showGoTop && (
<button type="button" className="icon-goTop bxr bx-arrow-up-stroke" aria-label="Lên đầu trang"
onClick={goTop}></button>
)}
</>
)
}

171
src/components/shared/Hotline.tsx Normal file
View File

@@ -0,0 +1,171 @@
export default function Hotline() {
return (
<div id="fancybox-headphone" style={{ display: 'none' }}
className="fancybox-content-container max-w-[720px] text-[#000] w-full text-16 leading-6 !p-0 !bg-transparent">
<div className="bg-white overflow-hidden rounded-[12px]">
<div className="text-center bg-[#0676DA] uppercase font-500 text-20 p-5 relative text-white">
<p className="m-0"> Liên hệ hotline để nhận được tư vấn tốt nhất </p>
</div>
<div className="p-4 tooltip-content">
{/* HOÀNG HÀ PC HÀ NỘI */}
<div className="last:mb-0 mb-4 bg-[#F2F6FF] rounded-[12px] p-4 grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-14">
<div>
<div className="last:mb-0 mb-10">
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC CẦU GIẤY </p>
<div className="hotline-list">
<p>
<a href="tel:0969123666"> 0969123666 </a>
<span> Mr.Long </span>
</p>
<p>
<a href="tel:0922635999"> 0922635999 </a>
<span> Mr. Thụ </span>
</p>
</div>
</div>
<div className="last:mb-0 mb-10">
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 mb-3 text-14"> BẢO HÀNH - HỖ TRỢ KỸ THUẬT </p>
<div className="hotline-list">
<p>
<a href="tel:0976382666"> 0976382666 </a>
<span> Mr. Dũng </span>
</p>
<p>
<a href="tel:19006100"> 19006100 </a>
<span> Bảo hành </span>
</p>
</div>
</div>
</div>
<div>
<div className="last:mb-0 mb-10">
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC ĐỐNG ĐA </p>
<div className="hotline-list">
<p>
<a href="tel:0396122999"> 0396122999 </a>
<span> Mr.Nghĩa </span>
</p>
<p>
<a href="tel:0396138999"> 0396138999 </a>
<span> Mr. Huy </span>
</p>
<p>
<a href="tel:0396178999"> 0396178999 </a>
<span> Mr. Duy </span>
</p>
<p>
<a href="tel:0397122122"> 0397122122 </a>
<span> Mr. Tùng Anh </span>
</p>
</div>
</div>
</div>
</div>
{/* HOÀNG HÀ PC MIỀN TRUNG */}
<div className="last:mb-0 mb-4 bg-[#F2F6FF] rounded-[12px] p-4 grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-12">
<div>
<div className="last:mb-0 mb-10">
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC MIỀN TRUNG </p>
<div className="hotline-list">
<p>
<a href="tel:0988163666"> 0988163666 </a>
<span> Mr. Hưng </span>
</p>
<p>
<a href="tel:0356072072"> 0356072072 </a>
<span> Mr. Huy </span>
</p>
</div>
</div>
</div>
<div>
<div className="last:mb-0 mb-10">
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 mb-3 text-14"> BẢO HÀNH - HỖ TRỢ KỸ THUẬT </p>
<div className="hotline-list">
<p>
<a href="tel:0358072072"> 0358072072 </a>
<span> Mr.Toản </span>
</p>
<p>
<a href="tel:19006100"> 19006100 </a>
<span> Bảo hành </span>
</p>
</div>
</div>
</div>
</div>
{/* HOÀNG HÀ PC HỒ CHÍ MINH */}
<div className="last:mb-0 mb-4 bg-[#F2F6FF] rounded-[12px] p-4 grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-12">
<div>
<div className="last:mb-0 mb-10">
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC ĐỐNG ĐA </p>
<div className="hotline-list">
<p>
<a href="tel:0968123666"> 0968123666 </a>
<span> Mr. Bình </span>
</p>
<p>
<a href="tel:0379260260"> 0379260260 </a>
<span> Mr. Khanh </span>
</p>
<p>
<a href="tel:0359072072"> 0359072072 </a>
<span> Mr. Kiên </span>
</p>
</div>
</div>
</div>
<div>
<div className="last:mb-0 mb-10">
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 mb-3 text-14"> BẢO HÀNH - HỖ TRỢ KỸ THUẬT </p>
<div className="hotline-list">
<p>
<a href="tel:0345260260"> 0345260260 </a>
<span> Mr. Nhân </span>
</p>
<p>
<a href="tel:19006100"> 19006100 </a>
<span> Bảo hành </span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}

41
src/components/shared/MenuItem.tsx Normal file
View File

@@ -0,0 +1,41 @@
import Link from "next/link"
export default function MenuItem({item}:any) {
const hasChildren = item.children.length > 0
return (
<li className="item" data-id={item.id}>
<Link href={item.url}
className={`cat-1 ${hasChildren ? 'has-children' : ''}`}
>
<i className="lazy cat-thumb"
style={{ backgroundImage: `url(${item.thumnail})` }}
></i>
<span className="cat-title"> {item.title} </span>
</Link>
{ hasChildren &&
<ul className="submenu">
{
item.children.map( (item_2:any) => (
<li key={item_2.id}>
<Link href={item_2.url} className="blue">
<span className="font-600"> {item_2.title} </span>
</Link>
{item_2.children.length > 0 &&
item_2.children?.map( (item_3:any) => (
<Link href={item_3.url} key={item_3.id}>
<span> {item_3.title} </span>
</Link>
))
}
</li>
))
}
</ul>
}
</li>
)
}