update 28/011
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
||||
import { categories } from "@/data/categories"
|
||||
import { productList } from '@/data/products';
|
||||
import { productList } from '@/data/productList';
|
||||
import CategoryIcon from "./CategoryIcon"
|
||||
import ProductItem from "@/components/shared/ProductItem"
|
||||
import Link from 'next/link';
|
||||
|
||||
@@ -1,19 +1,55 @@
|
||||
export default function Banner() {
|
||||
'use client';
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from 'next/image';
|
||||
import { banner } from "@/data/banner";
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
||||
|
||||
export default function Banner( {id}:any ) {
|
||||
const { banner_category_2020 } = banner.product_list;
|
||||
|
||||
const categoryBanner = banner_category_2020.filter((item: any) => {
|
||||
const category_list = item.category_list.split(',');
|
||||
return category_list.includes(String(id));
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="swiper custom-dots overflow-hidden relative mb-6" id="js-category-banner">
|
||||
<div className="swiper-wrapper">
|
||||
<div className="swiper-slide">
|
||||
<a href="">
|
||||
<img
|
||||
src="images/category/slide-category.png"
|
||||
alt=""
|
||||
width=""
|
||||
height=""
|
||||
className="block w-full lazy rounded-[24px]"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="custom-dots overflow-hidden relative mb-6" id="js-category-banner">
|
||||
<Swiper
|
||||
speed={1000}
|
||||
spaceBetween={10}
|
||||
slidesPerView={1}
|
||||
loop={true}
|
||||
autoplay={{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
navigation={{
|
||||
prevEl: ".custom-dots .swiper-button-prev",
|
||||
nextEl: ".custom-dots .swiper-button-next",
|
||||
}}
|
||||
pagination={{ clickable: true }}
|
||||
>
|
||||
{
|
||||
categoryBanner.map((item:any) =>
|
||||
<SwiperSlide key={item.id}>
|
||||
<Link href={item.desUrl}>
|
||||
<Image
|
||||
src={item.fileUrl}
|
||||
alt={item.name}
|
||||
width={100}
|
||||
height={100}
|
||||
className="block w-full lazy rounded-[24px]"
|
||||
unoptimized
|
||||
/>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
)
|
||||
}
|
||||
|
||||
</Swiper>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,35 +1,55 @@
|
||||
export default function FAQ() {
|
||||
'use client';
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function FAQ({ faq }: any) {
|
||||
|
||||
const [openIds, setOpenIds] = useState<number[]>([]);
|
||||
|
||||
const toggle = (id: number) => {
|
||||
setOpenIds(prev =>
|
||||
prev.includes(id)
|
||||
? prev.filter(i => i !== id)
|
||||
: [...prev, id]
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="global-faq-container py-8 lg:py-12 text-18 leading-6">
|
||||
<div className="text-center mb-8">
|
||||
<p className="text-[#004BA4] text-20 lg:text-[40px] leading-5 lg:leading-[48px] mb-2 font-600">
|
||||
Các câu hỏi thường gặp
|
||||
</p>
|
||||
|
||||
<p className="max-w-[620px] m-auto text-16 leading-[21px] lg:text-[18px] lg:leading-6">
|
||||
Nếu quý khách còn có bất kì câu hỏi nào cần hỗ trợ, vui lòng liên hệ với
|
||||
chúng tôi qua các số hotline để được tư vấn và giải đáp nhanh chóng
|
||||
nhất.
|
||||
Nếu quý khách còn có bất kì câu hỏi nào cần hỗ trợ, vui lòng liên hệ với chúng tôi qua các số hotline để được tư vấn và giải đáp nhanh chóng nhất.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{
|
||||
faq.map((item: any) => {
|
||||
const isOpen = openIds.includes(item.id);
|
||||
|
||||
<div className="faq-item js-faq-item relative">
|
||||
<button
|
||||
type="button"
|
||||
className="bx bx-plus w-10 h-10 rounded-full bg-[#EAF1FF] border border-[#FBFBFB] text-24 absolute right-5 top-4"
|
||||
aria-label="xem thêm"
|
||||
/>
|
||||
return (
|
||||
<div className={`faq-item relative ${isOpen ? 'active' : ''}`} key={item.id}>
|
||||
<button
|
||||
type="button"
|
||||
className="bx bx-plus w-10 h-10 rounded-full bg-[#EAF1FF] border border-[#FBFBFB] text-24 absolute right-5 top-4"
|
||||
aria-label="xem thêm"
|
||||
onClick={() => toggle(item.id) }
|
||||
></button>
|
||||
|
||||
<p className="m-0 text-20 font-600">
|
||||
Có thể kiểm tra tính tương thích của linh kiện trước khi đặt không?
|
||||
</p>
|
||||
<p className="m-0 text-20 font-600">
|
||||
{item.title}
|
||||
</p>
|
||||
|
||||
<div className="faq-answer mt-4">
|
||||
<p> Có. Chúng tôi cung cấp công cụ "Build PC" để bạn dễ dàng chọn và kiểm
|
||||
tra tính tương thích giữa CPU, mainboard, RAM, GPU, và các linh kiện
|
||||
khác trước khi mua hàng.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="faq-answer mt-4">
|
||||
{item.content}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
12
src/components/product/Category/Filter/FilterItem.jsx
Normal file
12
src/components/product/Category/Filter/FilterItem.jsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import Link from "next/link"
|
||||
|
||||
export default function FilterItem( {item} ) {
|
||||
return (
|
||||
<Link href={item.url}
|
||||
className={`${item.is_selected || item.is_selected == 1 ? 'current' : ''}`}
|
||||
>
|
||||
<span> {item.name} </span>
|
||||
<span> ({item.count}) </span>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -1,195 +1,118 @@
|
||||
export default function ProductFilter({data}: any) {
|
||||
console.log( data)
|
||||
'use client';
|
||||
import Link from "next/link";
|
||||
import FilterItem from "./FilterItem";
|
||||
import { normalizeKey } from "@/lib/utils";
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
export default function ProductFilter({ data }: any) {
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const hasFilter = searchParams.toString().length > 0;
|
||||
|
||||
const {
|
||||
current_category,
|
||||
attribute_filter_list,
|
||||
brand_filter_list,
|
||||
price_filter_list
|
||||
} = data;
|
||||
|
||||
const categoryList = current_category.children && current_category.children.length > 0
|
||||
? current_category.children
|
||||
: current_category.same_parent_categories;
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="uppercase font-500 text-center border text-[#0678DB] leading-10 border-[#114CDD] rounded-[8px] mb-6">
|
||||
Lọc sản phẩm
|
||||
</p>
|
||||
|
||||
|
||||
<div className="product-filter-group">
|
||||
<div className="filter-category-group text-18 leading-6 mb-6">
|
||||
<p className="font-600 mb-3"> Danh mục </p>
|
||||
<p className="leading-9 bg-[#F0F5FF] font-500 relative pl-6 mb-1">
|
||||
<i className="bg-[#0678DB] w-1 absolute top-0 left-0 bottom-0" />
|
||||
<span> Tất cả </span>
|
||||
</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
<a
|
||||
href="/pc-photo-editing"
|
||||
className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
|
||||
>
|
||||
{" "}
|
||||
<i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
|
||||
<h2 className="inherit"> Photo Editing </h2>
|
||||
</a>
|
||||
<a
|
||||
href="/pc-edit-render-video"
|
||||
className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
|
||||
>
|
||||
{" "}
|
||||
<i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
|
||||
<h2 className="inherit"> PC Video Editing </h2>
|
||||
</a>
|
||||
<a
|
||||
href="/hhpc-3d"
|
||||
className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
|
||||
>
|
||||
{" "}
|
||||
<i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
|
||||
<h2 className="inherit"> PC 3D Design, Animation </h2>
|
||||
</a>
|
||||
<a
|
||||
href="/hhpc-3d-render"
|
||||
className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
|
||||
>
|
||||
{" "}
|
||||
<i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
|
||||
<h2 className="inherit"> PC Rendering </h2>
|
||||
</a>
|
||||
<a
|
||||
href="/pc-visualization"
|
||||
className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
|
||||
>
|
||||
{" "}
|
||||
<i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
|
||||
<h2 className="inherit"> PC Visualization </h2>
|
||||
</a>
|
||||
<a
|
||||
href="/pc-architecture-cad"
|
||||
className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
|
||||
>
|
||||
{" "}
|
||||
<i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
|
||||
<h2 className="inherit"> PC Architecture & CAD </h2>
|
||||
</a>
|
||||
<a
|
||||
href="/machine-learning-ai-tensorflow"
|
||||
className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
|
||||
>
|
||||
{" "}
|
||||
<i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
|
||||
<h2 className="inherit"> PC Machine Learning / AI </h2>
|
||||
</a>
|
||||
<a
|
||||
href="/server-may-ao-gia-lap"
|
||||
className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
|
||||
>
|
||||
{" "}
|
||||
<i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
|
||||
<h2 className="inherit"> Server, Máy Ảo, Giả Lập </h2>
|
||||
</a>
|
||||
<a
|
||||
href="/pc-dep"
|
||||
className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
|
||||
>
|
||||
{" "}
|
||||
<i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
|
||||
<h2 className="inherit"> PC Đẹp </h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{categoryList.length > 0 &&
|
||||
<div className="filter-category-group text-18 leading-6 mb-6">
|
||||
<p className="font-600 mb-3"> Danh mục </p>
|
||||
|
||||
<div className="filter-item-group leading-[22px] text-16 mb-6">
|
||||
<p className="font-600 text-18 mb-3"> Khoảng giá </p>
|
||||
<div className="filter-list">
|
||||
<a href="https://hoanghapc.vn/pc-workstation?max=10000000">
|
||||
<span> Dưới 10 triệu </span>
|
||||
<span> (3) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?max=20000000&min=15000000">
|
||||
<span> 15 triệu - 20 triệu </span>
|
||||
<span> (3) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?max=25000000&min=20000000">
|
||||
<span> 20 triệu - 25 triệu </span>
|
||||
<span> (1) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?max=30000000&min=25000000">
|
||||
<span> 25 triệu - 30 triệu </span>
|
||||
<span> (2) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?max=35000000&min=30000000">
|
||||
<span> 30 triệu - 35 triệu </span>
|
||||
<span> (2) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?max=40000000&min=35000000">
|
||||
<span> 35 triệu - 40 triệu </span>
|
||||
<span> (3) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?max=45000000&min=40000000">
|
||||
<span> 40 triệu - 45 triệu </span>
|
||||
<span> (13) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?max=50000000&min=45000000">
|
||||
<span> 45 triệu - 50 triệu </span>
|
||||
<span> (13) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?min=50000000">
|
||||
<span> Trên 50 triệu </span>
|
||||
<span> (85) </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p className="leading-9 bg-[#F0F5FF] font-500 relative pl-6 mb-1">
|
||||
<i className="bg-[#0678DB] w-1 absolute top-0 left-0 bottom-0" />
|
||||
<span> Tất cả </span>
|
||||
</p>
|
||||
|
||||
<div className="filter-item-group leading-[22px] text-16 mb-6">
|
||||
<p className="font-600 text-18 mb-3"> Thương hiệu </p>
|
||||
<div className="filter-list">
|
||||
<a href="https://hoanghapc.vn/pc-workstation?brand=6">
|
||||
<span> GIGABYTE </span>
|
||||
<span> (2) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?brand=19">
|
||||
<span> HP </span>
|
||||
<span> (1) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?brand=7">
|
||||
<span> MSI </span>
|
||||
<span> (1) </span>
|
||||
</a>
|
||||
<div className="flex flex-col gap-1">
|
||||
{
|
||||
categoryList.map((category: any) => (
|
||||
<Link
|
||||
href={category.url}
|
||||
key={category.id}
|
||||
className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
|
||||
>
|
||||
<i className="bxr bx-chevrons-right leading-[inherit]"></i>
|
||||
<h2 className="inherit"> {category.title} </h2>
|
||||
</Link>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className="filter-item-group leading-[22px] text-16 mb-6">
|
||||
<p className="font-600 text-18 mb-3"> CPU </p>
|
||||
<div className="filter-list">
|
||||
<a href="https://hoanghapc.vn/pc-workstation?filter=397">
|
||||
<span> Intel Core i7 </span>
|
||||
<span> (13) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?filter=398">
|
||||
<span> Intel Core i9 </span>
|
||||
<span> (20) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?filter=399">
|
||||
<span> Intel Xeon </span>
|
||||
<span> (16) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?filter=402">
|
||||
<span> AMD Ryzen 7 </span>
|
||||
<span> (5) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?filter=403">
|
||||
<span> AMD Ryzen 9 </span>
|
||||
<span> (21) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?filter=404">
|
||||
<span> AMD Ryzen Threadripper </span>
|
||||
<span> (8) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?filter=637">
|
||||
<span> Core Ultra 9 </span>
|
||||
<span> (18) </span>
|
||||
</a>
|
||||
<a href="https://hoanghapc.vn/pc-workstation?filter=636">
|
||||
<span> Core Ultra 7 </span>
|
||||
<span> (10) </span>
|
||||
</a>
|
||||
{price_filter_list && price_filter_list.length > 0 &&
|
||||
<div className="filter-item-group leading-[22px] text-16 mb-6">
|
||||
<p className="font-600 text-18 mb-3"> Khoảng giá </p>
|
||||
|
||||
<div className="filter-list">
|
||||
{
|
||||
price_filter_list.map((price: any) =>
|
||||
<FilterItem
|
||||
key={`${price.min}-${price.max}`}
|
||||
item={price}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<a href="/pc-workstation" className="js-partName block text-center uppercase bg-[linear-gradient(165.29deg,#259AFF_8.53%,#114CDD_93.19%)] text-white rounded-[30px] leading-5 text-16 font-500 p-[10px] mt-8">
|
||||
Bỏ bộ lọc (1)
|
||||
</a>
|
||||
{brand_filter_list && brand_filter_list.length > 0 &&
|
||||
<div className="filter-item-group leading-[22px] text-16 mb-6">
|
||||
<p className="font-600 text-18 mb-3"> Thương hiệu </p>
|
||||
|
||||
<div className="filter-list">
|
||||
{
|
||||
brand_filter_list.map((brand: any) =>
|
||||
<FilterItem
|
||||
key={brand.id}
|
||||
item={brand}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{attribute_filter_list && attribute_filter_list.length > 0 &&
|
||||
attribute_filter_list.map((attr: any) =>
|
||||
<div className="filter-item-group leading-[22px] text-16 mb-6"
|
||||
key={normalizeKey(attr.name)}
|
||||
>
|
||||
<p className="font-600 text-18 mb-3"> {attr.name} </p>
|
||||
|
||||
<div className="filter-list">
|
||||
{
|
||||
attr.value_list.map((item: any) =>
|
||||
<FilterItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{hasFilter &&
|
||||
<Link href={current_category.request_path} className="block text-center uppercase bg-[linear-gradient(165.29deg,#259AFF_8.53%,#114CDD_93.19%)] text-white rounded-[30px] leading-5 text-16 font-500 p-[10px] mt-8">
|
||||
Bỏ bộ lọc
|
||||
</Link>
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -1,43 +1,46 @@
|
||||
export default function SortByCollection() {
|
||||
'use client';
|
||||
import Link from "next/link";
|
||||
import { usePathname, useSearchParams } from 'next/navigation';
|
||||
|
||||
export default function SortByCollection({
|
||||
sort,
|
||||
total
|
||||
} : any ) {
|
||||
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const fullUrl = `${pathname}?${searchParams.toString()}`;
|
||||
|
||||
return (
|
||||
<div className="sort-group flex flex-wrap items-center justify-between gap-4 text-16 leading-[22px] border-b border-[#DEE4EC] pb-3 mb-5">
|
||||
<p className="m-0"> Tổng 124 sản phẩm </p>
|
||||
<p className="m-0"> Tổng {total} sản phẩm </p>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<p className="m-0"> Lọc theo: </p>
|
||||
<div className="group relative border border-[#D6DAE1] whitespace-nowrap leading-[38px] rounded-[30px] px-4 min-w-[170px]">
|
||||
<p className="m-0 flex items-center justify-between cursor-pointer">
|
||||
<span> Lựa chọn </span>{" "}
|
||||
<i className="bx bx-chevron-down text-[#A0A5AC] text-18 transition-all group-hover:rotate-[-180deg]" />
|
||||
</p>
|
||||
<div className="absolute shadow border bg-white opacity-0 z-[-1] right-0 top-[100%] whitespace-nowrap transition group-hover:opacity-100 group-hover:z-[5] leading-[22px] p-1 border border-[#D6DAE1] rounded-[12px] w-full">
|
||||
<a
|
||||
href=""
|
||||
className="bg-[#F2F2F2] block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
|
||||
>
|
||||
Mức độ phổ biến
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
|
||||
>
|
||||
Giá tăng dần
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
|
||||
>
|
||||
Giá giảm dần
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
|
||||
>
|
||||
% Giảm giá nhiều
|
||||
</a>
|
||||
{sort.length > 0 &&
|
||||
<div className="flex items-center gap-3">
|
||||
<p className="m-0"> Lọc theo: </p>
|
||||
|
||||
<div className="group relative border border-[#D6DAE1] whitespace-nowrap leading-[38px] rounded-[30px] px-4 min-w-[170px]">
|
||||
<p className="m-0 flex items-center justify-between cursor-pointer">
|
||||
<span> Lựa chọn </span>
|
||||
<i className="bx bx-chevron-down text-[#A0A5AC] text-18 transition-all group-hover:rotate-[-180deg]" />
|
||||
</p>
|
||||
|
||||
<div className="absolute shadow border bg-white opacity-0 z-[-1] right-0 top-[100%] whitespace-nowrap transition group-hover:opacity-100 group-hover:z-[5] leading-[22px] p-1 border border-[#D6DAE1] rounded-[12px] w-full">
|
||||
{
|
||||
sort.map( (item:any) => (
|
||||
<Link
|
||||
className={`${fullUrl.includes('sort=' + item.key) ? 'bg-[#F2F2F2]' : ''} block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]`}
|
||||
key={item.key}
|
||||
href={item.url}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,29 +1,60 @@
|
||||
export default function Static( {data}:any ) {
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
export default function Static({ data }: any) {
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [isOverflow, setIsOverflow] = useState(false);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (contentRef.current) {
|
||||
if (contentRef.current.scrollHeight > 700) {
|
||||
setIsOverflow(true);
|
||||
}
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const handleCollapse = () => {
|
||||
setExpanded(false);
|
||||
|
||||
containerRef.current?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="js-static-container static-container rounded-[24px] bg-white pt-10 pb-8">
|
||||
<div className="js-static-content static-content px-6 text-16 leading-[22px] text-justify">
|
||||
<div suppressHydrationWarning
|
||||
dangerouslySetInnerHTML={{ __html: data }}/>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="static-container rounded-[24px] bg-white pt-10 pb-8"
|
||||
>
|
||||
<div
|
||||
ref={contentRef}
|
||||
className={`static-content px-6 text-16 leading-[22px] text-justify transition-all duration-300
|
||||
${!expanded && isOverflow ? 'max-h-[700px] overflow-hidden' : ''}`}
|
||||
>
|
||||
<div
|
||||
suppressHydrationWarning
|
||||
dangerouslySetInnerHTML={{ __html: data }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="static-btn">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Xem thêm"
|
||||
className="js-showmore-button"
|
||||
>
|
||||
Xem thêm
|
||||
<i className="bx bx-chevron-down" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Thu gọn"
|
||||
className="js-showless-button"
|
||||
>
|
||||
Thu gọn
|
||||
<i className="bx bx-chevron-up" />
|
||||
</button>
|
||||
</div>
|
||||
{isOverflow && (
|
||||
<div className="static-btn mt-4 flex justify-center">
|
||||
{!expanded ? (
|
||||
<button onClick={() => setExpanded(true)}>
|
||||
Xem thêm <i className="bx bx-chevron-down" />
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={handleCollapse}>
|
||||
Thu gọn <i className="bx bx-chevron-up" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,9 +6,20 @@ import FAQ from "./faq";
|
||||
import Banner from "./banner";
|
||||
import SortByCollection from "./sort";
|
||||
import ProductList from "./productList";
|
||||
import { productList } from "@/data/productList";
|
||||
|
||||
export default function ProductCategory({ slug }: any) {
|
||||
const { name,id, static_html } = productCategory.current_category
|
||||
|
||||
const { name,
|
||||
id,
|
||||
sort_by_collection,
|
||||
static_html,
|
||||
extend
|
||||
} = productCategory.current_category;
|
||||
|
||||
const productsFilter = productList.find(item => item.id === id)?.list || [];
|
||||
const total = productsFilter?.length;
|
||||
|
||||
return(
|
||||
<div className="product-page container">
|
||||
<h1 className="text-[#004BA4] text-[32px] leading-10 mb-4 font-600">
|
||||
@@ -17,16 +28,16 @@ export default function ProductCategory({ slug }: any) {
|
||||
|
||||
<div className="product-page-content flex flex-wrap items-start gap-4 mb-5">
|
||||
<div className="col-left-group w-[264px] rounded-[16px] bg-white p-4 pb-6">
|
||||
<ProductFilter data={slug} />
|
||||
<ProductFilter data={productCategory} />
|
||||
</div>
|
||||
|
||||
<div className="col-right-group w-[968px]">
|
||||
<div className="box-item rounded-[24px] bg-white px-6 pt-4 pb-8 mb-4">
|
||||
<Banner />
|
||||
<Banner id={id} />
|
||||
|
||||
<SortByCollection />
|
||||
<SortByCollection sort={sort_by_collection} total={total} />
|
||||
|
||||
<ProductList id={id}/>
|
||||
<ProductList id={id} />
|
||||
</div>
|
||||
|
||||
{static_html &&
|
||||
@@ -35,7 +46,9 @@ export default function ProductCategory({ slug }: any) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FAQ />
|
||||
{ extend &&
|
||||
<FAQ faq={extend.faq} />
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
import { useState } from "react";
|
||||
import { productList } from "@/data/products";
|
||||
import { productList } from "@/data/productList";
|
||||
import ProductItem from "@/components/shared/ProductItem";
|
||||
|
||||
const PRODUCT_PER_PAGE = 30;
|
||||
|
||||
138
src/components/product/detail/article/index.tsx
Normal file
138
src/components/product/detail/article/index.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
export default function Article() {
|
||||
return (
|
||||
<div className="pd-box-group bg-white mb-6 px-4 py-6 rounded-[24px]">
|
||||
<p className="text-20 font-600 mb-4"> Tin tức mới nhất </p>
|
||||
{/* limit: 5 */}
|
||||
<div className="pd-article-holder flex flex-col gap-4">
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur
|
||||
neque voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
|
||||
nostrum fugit facere illo quos. Ad error suscipit, quidem optio
|
||||
aut laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC] mx-1" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur
|
||||
neque voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
|
||||
nostrum fugit facere illo quos. Ad error suscipit, quidem optio
|
||||
aut laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur
|
||||
neque voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
|
||||
nostrum fugit facere illo quos. Ad error suscipit, quidem optio
|
||||
aut laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="art-item">
|
||||
<a href="" className="art-img">
|
||||
<img
|
||||
src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
|
||||
alt=""
|
||||
width={1}
|
||||
height={1}
|
||||
/>
|
||||
</a>
|
||||
<div className="art-text">
|
||||
<a href="" className="art-title">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
|
||||
quidem asperiores provident dicta veniam deleniti eaque
|
||||
repudiandae cum esse, ducimus officiis quibusdam pariatur
|
||||
neque voluptates voluptas. Quisquam qui minus dolorum?
|
||||
</h3>
|
||||
</a>
|
||||
<div className="art-summary">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
|
||||
obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
|
||||
nostrum fugit facere illo quos. Ad error suscipit, quidem optio
|
||||
aut laudantium at!
|
||||
</div>
|
||||
<div className="art-time">
|
||||
<i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
|
||||
<time>23/4/2024</time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
|
||||
<span>Mai Văn Học</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
32
src/components/product/detail/button/index.tsx
Normal file
32
src/components/product/detail/button/index.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
export default function Buttons() {
|
||||
return (
|
||||
<>
|
||||
<div className="pd-button-group my-5 gap-2 grid grid-cols-2 text-18 font-500">
|
||||
<button
|
||||
type="button"
|
||||
className="col-span-2 uppercase rounded-[12px] text-white h-[52px] border border-[#FFD83E] bg-[linear-gradient(148.21deg,#FFD83E_-14.02%,#FF4E2A_70.14%)]"
|
||||
aria-label="Mua sản phẩm"
|
||||
>
|
||||
{" "}
|
||||
Mua ngay{" "}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="col-span-1 flex items-center justify-center uppercase rounded-[12px] text-white h-[52px] border border-[#259AFF] bg-[linear-gradient(165.29deg,#259AFF_8.53%,#114CDD_93.19%)]"
|
||||
aria-label="Mua sản phẩm"
|
||||
>
|
||||
<i className="icons icon-cart !w-[22px] !h-[22px] mr-[6px]" />
|
||||
<span> Thêm vào giỏ </span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="col-span-1 flex items-center justify-center uppercase rounded-[12px] text-white h-[52px] border border-[#259AFF] bg-[linear-gradient(165.29deg,#259AFF_8.53%,#114CDD_93.19%)]"
|
||||
aria-label="Mua sản phẩm"
|
||||
>
|
||||
<i className="icons icon-card w-[22px] h-[22px] mr-[6px]" />
|
||||
<span> Mua trả góp </span>
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
161
src/components/product/detail/comment/index.tsx
Normal file
161
src/components/product/detail/comment/index.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
export default function Comment() {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between leading-8 gap-2 mb-4">
|
||||
<p className="m-0 text-18 font-500"> 0 Bình luận </p>
|
||||
<div className="flex flex-wrap gap-2 text-14 font-500 pd-comment-btn">
|
||||
<button
|
||||
className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-8 hover:border-[#0678DB] hover:text-[#0678DB] current"
|
||||
type="button"
|
||||
aria-label="Đánh giá"
|
||||
>
|
||||
{" "}
|
||||
Tất cả{" "}
|
||||
</button>
|
||||
<button
|
||||
className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
|
||||
type="button"
|
||||
aria-label="Đánh giá"
|
||||
>
|
||||
{" "}
|
||||
5 <i className="bxr bx-star" />{" "}
|
||||
</button>
|
||||
<button
|
||||
className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
|
||||
type="button"
|
||||
aria-label="Đánh giá"
|
||||
>
|
||||
{" "}
|
||||
4 <i className="bxr bx-star" />{" "}
|
||||
</button>
|
||||
<button
|
||||
className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
|
||||
type="button"
|
||||
aria-label="Đánh giá"
|
||||
>
|
||||
{" "}
|
||||
3 <i className="bxr bx-star" />{" "}
|
||||
</button>
|
||||
<button
|
||||
className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
|
||||
type="button"
|
||||
aria-label="Đánh giá"
|
||||
>
|
||||
{" "}
|
||||
2 <i className="bxr bx-star" />{" "}
|
||||
</button>
|
||||
<button
|
||||
className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
|
||||
type="button"
|
||||
aria-label="Đánh giá"
|
||||
>
|
||||
{" "}
|
||||
1 <i className="bxr bx-star" />{" "}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-[#DDDDDD] rounded-[12px] overflow-hidden ">
|
||||
<textarea
|
||||
className="p-3 w-full resize-none h-[96px] outline-none border-none"
|
||||
defaultValue={""}
|
||||
/>
|
||||
<div className="border-t border-[#DDDDDD] bg-[#F5F6F7] p-[10px_12px] text-right">
|
||||
<button
|
||||
className="bg-btn text-white h-10 px-9 text-18 font-500 rounded-[30px]"
|
||||
type="button"
|
||||
aria-label="submit"
|
||||
>
|
||||
{" "}
|
||||
GỬI{" "}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="">
|
||||
<div className="first:border-t first:mt-4 first:pt-4 border-[#D1D5DB] mb-5 flex gap-3 text-14 leading-[18px]">
|
||||
<div className="w-10 h-10 rounded-full bg-[#9CA3AF] leading-10 text-center uppercase text-white font-600 overflow-hidden">
|
||||
<span>p</span>
|
||||
{/* <img src="images/avatar-admin.png" class="block w-full h-full"/> */}
|
||||
</div>
|
||||
<div className="w-[calc(100%_-_52px)]">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<b className="capitalize"> tên khách hàng </b>
|
||||
<i className="bxr bxs-radio-circle text-[7px] text-[#6B7280]" />
|
||||
<span className="text-[#6B7280]"> 11-11-2025, 11:11 </span>
|
||||
</div>
|
||||
<i className="star star-2" />
|
||||
<div className="my-2">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||
Fugiat magnam ipsam pariatur mollitia ratione distinctio magni
|
||||
corrupti ad expedita. Natus, ullam inventore. Amet
|
||||
consequuntur aspernatur deserunt accusantium, tempore
|
||||
blanditiis magni!
|
||||
</div>
|
||||
<div className="flex gap-2 leading-[30px]">
|
||||
<button
|
||||
className="group flex items-center gap-[6px] border border-[#D1D5DB] px-3 rounded-[20px] hover:border-[#0678DB] hover:text-[#0678DB]"
|
||||
type="button"
|
||||
aria-label="actions"
|
||||
>
|
||||
{" "}
|
||||
<i className="group-hover:text-[#0678DB] text-[#928FA8] bxr bx-heart" />{" "}
|
||||
0{" "}
|
||||
</button>
|
||||
<button
|
||||
className="group flex items-center gap-[6px] border border-[#D1D5DB] px-3 rounded-[20px] hover:border-[#0678DB] hover:text-[#0678DB]"
|
||||
type="button"
|
||||
aria-label="actions"
|
||||
>
|
||||
{" "}
|
||||
<i className="group-hover:text-[#0678DB] text-[#928FA8] bxr bx-reply-stroke" />{" "}
|
||||
Trả lời{" "}
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-[#F3F4F6] rounded-[12px] overflow-hidden mt-3">
|
||||
<div className="first:border-0 flex items-start gap-3 p-3 border-t border-[#D1D5DB]">
|
||||
<div className="w-10 h-10 rounded-full bg-[#9CA3AF] leading-10 text-center uppercase text-white font-600 overflow-hidden">
|
||||
{/* <span>p</span> */}
|
||||
<img
|
||||
src="images/avatar-admin.png"
|
||||
className="block w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-[calc(100%_-_52px)]">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<b className="capitalize"> tên khách hàng </b>
|
||||
<span className="bg-[linear-gradient(70.1deg,#75798B_62.94%,#ADB5CD_100%)] text-white px-[6px] leading-[18px] rounded-[20px] font-500 text-10">
|
||||
{" "}
|
||||
Quản trị viên{" "}
|
||||
</span>
|
||||
<i className="bxr bxs-radio-circle text-[7px] text-[#6B7280]" />
|
||||
<span className="text-[#6B7280]">
|
||||
{" "}
|
||||
11-11-2025, 11:11{" "}
|
||||
</span>
|
||||
</div>
|
||||
<div className="my-2" style={{ whiteSpace: "pre-line" }}>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing
|
||||
elit. Fugiat magnam ipsam pariatur mollitia ratione
|
||||
distinctio magni corrupti ad expedita. Natus, ullam
|
||||
inventore. Amet consequuntur aspernatur deserunt
|
||||
accusantium, tempore blanditiis magni!{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* xem thêm */}
|
||||
<div className="text-center mt-4">
|
||||
<button
|
||||
type="button"
|
||||
className="border border-[#0678DB] text-[#0678DB] rounded-[30px] h-10 px-6 hover:bg-[#0678DB] hover:text-white"
|
||||
aria-label="Xem thêm"
|
||||
>
|
||||
XEM THÊM{" "}
|
||||
<i className="bx bx-chevron-down text-20 align-middle mt-[-3px]" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
31
src/components/product/detail/description/index.tsx
Normal file
31
src/components/product/detail/description/index.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
export default function ProductDescription() {
|
||||
return (
|
||||
<div className="pd-box-group bg-white mb-6 p-8 pt-6 rounded-[24px]">
|
||||
<p className="group-title border-b border-[#D0D8E3] leading-[31px] font-600 text-24 mb-4 pb-4">
|
||||
Đánh giá HHPC CORE i7 14700 | 32G DDR5 | NVIDIA RTX 3060 12G{" "}
|
||||
</p>
|
||||
<div className="js-static-container static-container leading-[135%]">
|
||||
<div className="js-static-content static-content text-16 leading-[22px] text-justify">
|
||||
|
||||
</div>
|
||||
|
||||
<div className="static-btn">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Xem thêm"
|
||||
className="js-showmore-button"
|
||||
>
|
||||
Xem thêm <i className="bx bx-chevron-down" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Thu gọn"
|
||||
className="js-showless-button"
|
||||
>
|
||||
Thu gọn <i className="bx bx-chevron-up" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
85
src/components/product/detail/image/index.tsx
Normal file
85
src/components/product/detail/image/index.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
export default function ProductImage() {
|
||||
return (
|
||||
<>
|
||||
<div className="pd-image-top mb-3">
|
||||
<a
|
||||
className="MagicZoom"
|
||||
id="Zoomer"
|
||||
rel="selectors-effect-speed: 600"
|
||||
href="images/product-1.jpg"
|
||||
>
|
||||
<img src="images/product-1.jpg" alt="" />
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="pd-image-btn"
|
||||
/>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="pd-image-btn btn-next"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pd-gallery-list">
|
||||
<div className="swiper w-full" id="js-pd-gallery">
|
||||
<div className="swiper-wrapper">
|
||||
<div className="swiper-slide">
|
||||
<a
|
||||
href="images/product-1.jpg"
|
||||
rel="zoom-id:Zoomer"
|
||||
rev="images/product-1.jpg"
|
||||
>
|
||||
<img src="images/product-1.jpg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a
|
||||
href="images/product-2.jpg"
|
||||
rel="zoom-id:Zoomer"
|
||||
rev="images/product-2.jpg"
|
||||
>
|
||||
<img src="images/product-2.jpg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a
|
||||
href="images/product-3.jpg"
|
||||
rel="zoom-id:Zoomer"
|
||||
rev="images/product-3.jpg"
|
||||
>
|
||||
<img src="images/product-3.jpg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a
|
||||
href="images/product-4.jpg"
|
||||
rel="zoom-id:Zoomer"
|
||||
rev="images/product-4.jpg"
|
||||
>
|
||||
<img src="images/product-4.jpg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a
|
||||
href="images/product-5.jpg"
|
||||
rel="zoom-id:Zoomer"
|
||||
rev="images/product-5.jpg"
|
||||
>
|
||||
<img src="images/product-5.jpg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<a
|
||||
href="images/product-6.jpg"
|
||||
rel="zoom-id:Zoomer"
|
||||
rev="images/product-6.jpg"
|
||||
>
|
||||
<img src="images/product-6.jpg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
43
src/components/product/detail/offer/index.tsx
Normal file
43
src/components/product/detail/offer/index.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
export default function ProductOffer() {
|
||||
return (
|
||||
<>
|
||||
{/* Khuyến mại hấp dẫn */}
|
||||
<div className="pd-offer-group mb-4 bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2 rounded-[8px]">
|
||||
<div className="group-title font-600 text-white flex items-center leading-[22px] mb-2 px-2 text-16">
|
||||
<i className="icons icon-discount mr-[6px] animation-tada" />
|
||||
<span> Khuyến mại hấp dẫn </span>
|
||||
</div>
|
||||
<div className="rounded-[8px] bg-[#FEF2F2] px-2 py-4">
|
||||
<div className="item">
|
||||
{" "}
|
||||
Giảm ngay 100.000đ khi mua thêm Màn Hình Máy Tính.
|
||||
</div>
|
||||
<div className="item"> Giảm ngay 100.000đ khi mua thêm RAM </div>
|
||||
<div className="item">
|
||||
{" "}
|
||||
Giảm ngay 100.000đ khi mua thêm Card màn hình{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quà tặng và ưu đãi kèm theo */}
|
||||
<div className="pd-offer-group mb-4 bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2 rounded-[8px]">
|
||||
<div className="group-title font-600 text-white flex items-center leading-[22px] mb-2 px-2 text-16">
|
||||
<i className="icons icon-gift mr-2 animation-tada -mt-1" />
|
||||
<span> Quà tặng và ưu đãi kèm theo </span>
|
||||
</div>
|
||||
<div className="rounded-[8px] bg-[#FEF2F2] px-2 py-4">
|
||||
<div className="item">
|
||||
{" "}
|
||||
Giảm ngay 100.000đ khi mua thêm Màn Hình Máy Tính.
|
||||
</div>
|
||||
<div className="item"> Giảm ngay 100.000đ khi mua thêm RAM </div>
|
||||
<div className="item">
|
||||
{" "}
|
||||
Giảm ngay 100.000đ khi mua thêm Card màn hình{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
86
src/components/product/detail/price/index.tsx
Normal file
86
src/components/product/detail/price/index.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
export default function ProductPrice() {
|
||||
return (
|
||||
<>
|
||||
{/* Deal */}
|
||||
<div className="pd-deal-group rounded-[12px] bg-[#FEF2F2] overflow-hidden border border-[#FA354A] ">
|
||||
<div className="group-title p-2 bg-[linear-gradient(270.05deg,#CB0F23_0.04%,#FF3246_99.97%)] flex items-center flex-wrap justify-between gap-2">
|
||||
<p className="m-0 leading-7 font-600 text-18 flex items-center gap-[6px] text-white">
|
||||
<i className="icons icon-flame animation-beat" />
|
||||
<span> BIG SALE </span>
|
||||
</p>
|
||||
<div className="relative bg-[#EBEBEB] rounded-[20px] text-center font-500 text-13 leading-[22px] px-[51px]">
|
||||
<i
|
||||
className="w-[22px] h-[28px] absolute left-[-8px] top-[-4px] z-[1] bg-no-repeat bg-center bg-[length:100%_100%] animation-bounce lazy"
|
||||
data-bg="url(images/deal-icon-bolt.png)"
|
||||
/>
|
||||
<i
|
||||
className="bg-[#FFE078] absolute inset-0 max-w-[100%] rounded-[20px]"
|
||||
style={{ width: "50%" }}
|
||||
/>
|
||||
<span className="relative z-[1] block"> Còn: 3/5 sản phẩm </span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="leading-8 flex items-baseline flex-wrap mb-1">
|
||||
<p className="pd-price text-[#FF4E2A] font-bold mb-0 mr-3 text-24">
|
||||
{" "}
|
||||
48.990.000 đ{" "}
|
||||
</p>
|
||||
<del className="mr-2 text-16"> 52.000.000 đ </del>
|
||||
<span className="pd-discount bg-[#FA354A] text-white leading-4 rounded-[20px] px-[6px] font-500">
|
||||
{" "}
|
||||
-6%{" "}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 font-500 text-[#2563EB] leading-[22px]">
|
||||
<p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2">
|
||||
{" "}
|
||||
Giá đã bao gồm VAT{" "}
|
||||
</p>
|
||||
<p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2">
|
||||
{" "}
|
||||
Bảo hành theo từng linh kiện{" "}
|
||||
</p>
|
||||
<p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2"> Liên hệ </p>
|
||||
</div>
|
||||
<div className="my-2 flex items-center leading-6 gap-2">
|
||||
<p className="m-0"> Kết thúc sau: </p>
|
||||
<div className="deal-time-holder flex items-center gap-5 text-white text-14 font-600">
|
||||
<p> 00 </p> <p> 00 </p> <p> 00 </p> <p> 00 </p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="m-0 font-600 text-13 leading-4 text-[#FF4E2A] mt-3">
|
||||
{" "}
|
||||
*KHÔNG ÁP DỤNG CỘNG DỒN CHƯƠNG TRÌNH KHUYẾN MẠI KHÁC{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="my-3 border border-[#FA354A] rounded-[12px] leading-[22px] p-4 pd-price-group">
|
||||
<div className="leading-8 flex items-baseline flex-wrap mb-1">
|
||||
<p className="pd-price text-[#FF4E2A] font-bold mb-0 mr-3 text-24">
|
||||
{" "}
|
||||
48.990.000 đ{" "}
|
||||
</p>
|
||||
<del className="mr-2 text-16"> 52.000.000 đ </del>
|
||||
<span className="pd-discount bg-[#FA354A] text-white leading-4 rounded-[20px] px-[6px] font-500">
|
||||
{" "}
|
||||
-6%{" "}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 font-500 text-[#2563EB]">
|
||||
<p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2">
|
||||
{" "}
|
||||
Giá đã bao gồm VAT{" "}
|
||||
</p>
|
||||
<p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2">
|
||||
{" "}
|
||||
Bảo hành theo từng linh kiện{" "}
|
||||
</p>
|
||||
<p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2"> Liên hệ </p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
227
src/components/product/detail/review/index.tsx
Normal file
227
src/components/product/detail/review/index.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
export default function Review() {
|
||||
return (
|
||||
<>
|
||||
<p className="leading-[31px] font-600 text-24 mb-4 pb-4">
|
||||
{" "}
|
||||
Đánh giá và bình luận{" "}
|
||||
</p>
|
||||
{/* Rating */}
|
||||
<div className="pd-rating-conatiner mb-9" id="js-pd-rating">
|
||||
<div className="flex flex-wrap justify-between gap-6">
|
||||
<div className="w-[200px] text-center">
|
||||
<p className="font-600 text-[40px] leading-[48px] mb-2"> 0 </p>
|
||||
<p className="my-2 text-[#6B7280]"> 0 lượt đánh giá </p>
|
||||
<i className="star star-3" />
|
||||
<button
|
||||
className="rating-btn block h-10 w-full text-white text-14 font-500 rounded-[30px] bg-btn uppercase mt-3"
|
||||
type="button"
|
||||
aria-label="đánh giá"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-[calc(100%_-_224px)] text-14 font-500 leading-[18px] flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between gap-2 flex-wrap">
|
||||
<p className="m-0 flex gap-[3px] w-[30px]">
|
||||
{" "}
|
||||
<span>5</span>{" "}
|
||||
<i className="bx bxs-star text-[#FBBF24] text-16" />{" "}
|
||||
</p>
|
||||
<div className="relative bg-[#E8ECF6] overflow-hidden rounded-[30px] h-3 w-[calc(100%_-_71px)]">
|
||||
<i
|
||||
className="max-w-[100%] bg-[#0678DB] absolute inset-0"
|
||||
style={{ width: "0%" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="m-0 text-[#6B7280] w-[25px] text-right"> 0 </p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2 flex-wrap">
|
||||
<p className="m-0 flex gap-[3px] w-[30px]">
|
||||
<span>4</span>{" "}
|
||||
<i className="bx bxs-star text-[#FBBF24] text-16" />
|
||||
</p>
|
||||
<div className="relative bg-[#E8ECF6] overflow-hidden rounded-[30px] h-3 w-[calc(100%_-_71px)]">
|
||||
<i
|
||||
className="max-w-[100%] bg-[#0678DB] absolute inset-0"
|
||||
style={{ width: "0%" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="m-0 text-[#6B7280] w-[25px] text-right"> 0 </p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2 flex-wrap">
|
||||
<p className="m-0 flex gap-[3px] w-[30px]">
|
||||
<span>3</span>{" "}
|
||||
<i className="bx bxs-star text-[#FBBF24] text-16" />
|
||||
</p>
|
||||
<div className="relative bg-[#E8ECF6] overflow-hidden rounded-[30px] h-3 w-[calc(100%_-_71px)]">
|
||||
<i
|
||||
className="max-w-[100%] bg-[#0678DB] absolute inset-0"
|
||||
style={{ width: "0%" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="m-0 text-[#6B7280] w-[25px] text-right"> 0 </p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2 flex-wrap">
|
||||
<p className="m-0 flex gap-[3px] w-[30px]">
|
||||
<span>2</span>{" "}
|
||||
<i className="bx bxs-star text-[#FBBF24] text-16" />
|
||||
</p>
|
||||
<div className="relative bg-[#E8ECF6] overflow-hidden rounded-[30px] h-3 w-[calc(100%_-_71px)]">
|
||||
<i
|
||||
className="max-w-[100%] bg-[#0678DB] absolute inset-0"
|
||||
style={{ width: "0%" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="m-0 text-[#6B7280] w-[25px] text-right"> 0 </p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2 flex-wrap">
|
||||
<p className="m-0 flex gap-[3px] w-[30px]">
|
||||
<span>1</span>{" "}
|
||||
<i className="bx bxs-star text-[#FBBF24] text-16" />
|
||||
</p>
|
||||
<div className="relative bg-[#E8ECF6] overflow-hidden rounded-[30px] h-3 w-[calc(100%_-_71px)]">
|
||||
<i
|
||||
className="max-w-[100%] bg-[#0678DB] absolute inset-0"
|
||||
style={{ width: "0%" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="m-0 text-[#6B7280] w-[25px] text-right"> 0 </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pd-rating-form mt-8 hidden">
|
||||
<div className="flex items-center mb-4 gap-4">
|
||||
<p className="m-0"> Chọn đánh giá của bạn </p>
|
||||
<div className="rating-comment clearfix">
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-input"
|
||||
id="rating-input-review-0-5"
|
||||
defaultValue={5}
|
||||
data-title="Quá tuyệt vời"
|
||||
name="user_post[rate]"
|
||||
defaultChecked={true}
|
||||
/>
|
||||
<label
|
||||
htmlFor="rating-input-review-0-5"
|
||||
className="rating-star js-rating-star"
|
||||
data-title="Quá tuyệt vời"
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-input"
|
||||
id="rating-input-review-0-4"
|
||||
defaultValue={4}
|
||||
data-title="Rất tốt"
|
||||
name="user_post[rate]"
|
||||
/>
|
||||
<label
|
||||
htmlFor="rating-input-review-0-4"
|
||||
className="rating-star js-rating-star"
|
||||
data-title="Rất tốt"
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-input"
|
||||
id="rating-input-review-0-3"
|
||||
defaultValue={3}
|
||||
data-title="Bình thường"
|
||||
name="user_post[rate]"
|
||||
/>
|
||||
<label
|
||||
htmlFor="rating-input-review-0-3"
|
||||
className="rating-star js-rating-star"
|
||||
data-title="Bình thường"
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-input"
|
||||
id="rating-input-review-0-2"
|
||||
defaultValue={2}
|
||||
data-title="Tạm được"
|
||||
name="user_post[rate]"
|
||||
/>
|
||||
<label
|
||||
htmlFor="rating-input-review-0-2"
|
||||
className="rating-star js-rating-star"
|
||||
data-title="Tạm được"
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-input"
|
||||
id="rating-input-review-0-1"
|
||||
defaultValue={1}
|
||||
data-title="Không thích"
|
||||
name="user_post[rate]"
|
||||
/>
|
||||
<label
|
||||
htmlFor="rating-input-review-0-1"
|
||||
className="rating-star js-rating-star"
|
||||
data-title="Không thích"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
id="js-star-tip"
|
||||
className="star-tip bg-[#2b8ae0] text-white rounded-[3px] relative px-2 leading-[26px]"
|
||||
>
|
||||
{" "}
|
||||
Quá tuyệt vời{" "}
|
||||
</span>
|
||||
</div>
|
||||
<div className="lg:grid grid-cols-2 gap-3">
|
||||
<textarea
|
||||
className="w-full block p-3 resize-none h-[100px] outline-none border border-[#DDDDDD] rounded-[12px]"
|
||||
placeholder="Nhập đánh giá của bạn"
|
||||
defaultValue={""}
|
||||
/>
|
||||
<div className="grid lg:grid-cols-2 gap-2">
|
||||
<input
|
||||
type="text"
|
||||
className="border border-[#DDDDDD] rounded-[8px] px-3"
|
||||
placeholder="Họ tên*"
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
className="border border-[#DDDDDD] rounded-[8px] px-3"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]{10,11}"
|
||||
maxLength={11}
|
||||
placeholder="Số điện thoại*"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-[#DDDDDD] rounded-[8px] px-3"
|
||||
placeholder="Email*"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="bg-btn text-white rounded-[8px]"
|
||||
aria-label="Đánh giá"
|
||||
>
|
||||
{" "}
|
||||
Gửi đánh giá{" "}
|
||||
</button>
|
||||
</div>
|
||||
<p className="red font-600"> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-14 leading-[18px] mt-4" id="">
|
||||
<div className="last:border-0 border-b border-[#DDDDDD] py-5">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<b className="font-600 capitalize"> tên khách hàng </b>
|
||||
<i className="bxr bxs-radio-circle text-[7px] text-[#6B7280]" />
|
||||
<span className="text-[#6B7280]"> 11-11-2025, 11:11 </span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<i className="star star-3 scale-[0.8] ml-[-7px]" />
|
||||
<div className="w-[calc(100%-98px)]">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
|
||||
illum deserunt similique cumque accusantium qui assumenda
|
||||
quod. Saepe illum beatae aspernatur odit, voluptatum voluptate
|
||||
maiores dolore expedita similique officia consequuntur?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
350
src/components/product/detail/specifications/index.tsx
Normal file
350
src/components/product/detail/specifications/index.tsx
Normal file
@@ -0,0 +1,350 @@
|
||||
export default function ProductSpec() {
|
||||
return (
|
||||
<div className="pd-box-group bg-white mb-6 px-4 py-6 rounded-[24px]">
|
||||
<p className="group-title border-b border-[#D0D8E3] leading-[31px] font-600 text-24 mb-4 pb-4">
|
||||
{" "}
|
||||
Thông số kỹ thuật{" "}
|
||||
</p>
|
||||
<div className="pd-spec-group">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>STT</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>MÃ HÀNG</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>TÊN HÀNG</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>THỜI HẠN BẢO HÀNH</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>1</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>CPU</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/cpu-intel-core-ultra-7-265k">
|
||||
INTEL CORE ULTRA 7 265K UP 5.5GHz | 20 CORE | 20 THREAD
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>36 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>2</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>MAIN</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/mainboard-colorful-battle-ax-z890m-plus-v20">
|
||||
COLORFUL BATTLE-AX Z890M-PLUS V20 DDR5
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>36 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>3</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>TẢN NHIỆT</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/tan-nhiet-cpu-id-cooling-frozn-a620-pro-se-argb">
|
||||
ID-COOLING FROZN A620 PRO SE ARGB
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>12 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>4</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>RAM</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/ram-ddr5-teamgroup-t-create-expert-32gb-6000mhz">
|
||||
DDR5 TEAMGROUP T-CREATE EXPERT 32GB 6000MHz (2x16GB)
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>36 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>5</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>SSD</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/o-cung-ssd-teamgroup-g50-1tb">
|
||||
TEAMGROUP G50 1TB PCIE Gen4x4 - RW 5000MB/s
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>60 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>6</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<span style={{ color: "#000" }}>
|
||||
<strong>VGA</strong>
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/vga-colorful-rtx-3060-nb-duo-12g-v4-l-v">
|
||||
COLORFUL RTX 3060 NB DUO 12G V4 L-V GDDR6
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>36 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>7</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>PSU</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/nguon-deepcool-pl750d-750w">
|
||||
DEEPCOOL PL750D 750W 80 PLUS BRONZE | ATX 3.1 | PCIE 5.1
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>60 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>8</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>CASE</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/vo-case-xigmatek-gaming-x-ii-3f-3fan-rgb">
|
||||
XIGMATEK GAMING X II 3F - 3FAN RGB
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }} />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<a
|
||||
href="#fancybox-spec"
|
||||
data-fancybox=""
|
||||
className="table m-auto mt-4 text-white leading-10 uppercase rounded-[40px] bg-btn font-500 text-16 px-6"
|
||||
>
|
||||
{" "}
|
||||
Xem tất cả thông số{" "}
|
||||
</a>
|
||||
<div
|
||||
className="pd-spec-group p-3"
|
||||
id="fancybox-spec"
|
||||
style={{ display: "none" }}
|
||||
>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>STT</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>MÃ HÀNG</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>TÊN HÀNG</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>THỜI HẠN BẢO HÀNH</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>1</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>CPU</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/cpu-intel-core-ultra-7-265k">
|
||||
INTEL CORE ULTRA 7 265K UP 5.5GHz | 20 CORE | 20 THREAD
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>36 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>2</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>MAIN</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/mainboard-colorful-battle-ax-z890m-plus-v20">
|
||||
COLORFUL BATTLE-AX Z890M-PLUS V20 DDR5
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>36 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>3</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>TẢN NHIỆT</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/tan-nhiet-cpu-id-cooling-frozn-a620-pro-se-argb">
|
||||
ID-COOLING FROZN A620 PRO SE ARGB
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>12 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>4</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>RAM</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/ram-ddr5-teamgroup-t-create-expert-32gb-6000mhz">
|
||||
DDR5 TEAMGROUP T-CREATE EXPERT 32GB 6000MHz (2x16GB)
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>36 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>5</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>SSD</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/o-cung-ssd-teamgroup-g50-1tb">
|
||||
TEAMGROUP G50 1TB PCIE Gen4x4 - RW 5000MB/s
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>60 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>6</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<span style={{ color: "#000" }}>
|
||||
<strong>VGA</strong>
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/vga-colorful-rtx-3060-nb-duo-12g-v4-l-v">
|
||||
COLORFUL RTX 3060 NB DUO 12G V4 L-V GDDR6
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>36 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>7</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>PSU</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/nguon-deepcool-pl750d-750w">
|
||||
DEEPCOOL PL750D 750W 80 PLUS BRONZE | ATX 3.1 | PCIE 5.1
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>60 THÁNG</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>8</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>CASE</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>
|
||||
<strong>
|
||||
<a href="https://hoanghapc.vn/vo-case-xigmatek-gaming-x-ii-3f-3fan-rgb">
|
||||
XIGMATEK GAMING X II 3F - 3FAN RGB
|
||||
</a>
|
||||
</strong>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }} />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
169
src/components/product/detail/static/index.tsx
Normal file
169
src/components/product/detail/static/index.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
export default function Static() {
|
||||
return (
|
||||
<>
|
||||
<div className="group relative border border-[#D6DAE1] leading-[38px] rounded-[8px] pl-3 pr-2 mb-3">
|
||||
<p className="m-0 flex items-center justify-between cursor-pointer">
|
||||
<span> Xem chi nhánh còn hàng </span>
|
||||
<i className="bx bx-chevron-down text-[#A0A5AC] text-18 transition-all group-hover:rotate-[-180deg]" />
|
||||
</p>
|
||||
<div className="absolute shadow border bg-white opacity-0 z-[-1] right-0 top-[100%] transition group-hover:opacity-100 group-hover:z-[5] leading-[22px] p-1 border border-[#D6DAE1] rounded-[12px] w-full">
|
||||
<div className="my-3">
|
||||
<b className="block underline px-2 font-600 mb-2">
|
||||
Showroom Miền Bắc:
|
||||
</b>
|
||||
<a
|
||||
href="https://goo.gl/maps/56ARHjWKoVhpWBCF6"
|
||||
target="_blank"
|
||||
rel="nofollow"
|
||||
className="flex gap-1 p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
|
||||
>
|
||||
<i className="icons icon-location" />
|
||||
<span> 41 Khúc Thừa Dụ, Phường Cầu Giấy, Hà Nội </span>
|
||||
</a>
|
||||
<a
|
||||
href="https://g.page/hoanghapc?share"
|
||||
target="_blank"
|
||||
rel="nofollow"
|
||||
className="flex gap-1 p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
|
||||
>
|
||||
<i className="icons icon-location" />
|
||||
<span> 94E-94F Đường Láng, Phường Đống Đa, Hà Nội </span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="my-3">
|
||||
<b className="block underline px-2 font-600 mb-2">
|
||||
Showroom Miền Trung:
|
||||
</b>
|
||||
<a
|
||||
href="https://goo.gl/maps/1HQrD6mdf4VMYccs6"
|
||||
target="_blank"
|
||||
rel="nofollow"
|
||||
className="flex gap-1 p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
|
||||
>
|
||||
<i className="icons icon-location" />
|
||||
<span>72 Lê Lợi, Thành Vinh, Nghệ An </span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="my-3">
|
||||
<b className="block underline px-2 font-600 mb-2">
|
||||
Showroom Miền Nam:
|
||||
</b>
|
||||
<a
|
||||
href="https://g.page/hoanghapchcm?share"
|
||||
target="_blank"
|
||||
rel="nofollow"
|
||||
className="flex gap-1 p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
|
||||
>
|
||||
<i className="icons icon-location" />
|
||||
<span>
|
||||
{" "}
|
||||
K8bis Bửu Long, Phường Hoà Hưng, Thành phố Hồ Chí Minh
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<i className="block red my-3 px-2">
|
||||
Chú ý: Sản phẩm có thể điều chuyển kho theo yêu cầu của quý khách.
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
{/* Yên Tâm Mua Sắm Tại HoangHaPC */}
|
||||
<div className="pd-static-group mb-3 rounded-[12px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,#114CDD_100.92%)] p-1 pt-2">
|
||||
<p className="group-title text-white leading-[21px] text-16 font-600 mb-2 text-center">
|
||||
{" "}
|
||||
Yên Tâm Mua Sắm Tại HoangHaPC{" "}
|
||||
</p>
|
||||
<div className="pd-static-list bg-white p-[16px_8px] leading-[18px] font-500 rounded-[8px]">
|
||||
<p className="last:mb-0 mb-2 item-circle">
|
||||
{" "}
|
||||
Đội ngũ kỹ thuật tư vấn chuyên sâu{" "}
|
||||
</p>
|
||||
<p className="last:mb-0 mb-2 item-circle">
|
||||
{" "}
|
||||
Thanh toán thuận tiện{" "}
|
||||
</p>
|
||||
<p className="last:mb-0 mb-2 item-circle">
|
||||
{" "}
|
||||
Sản phẩm 100% chính hãng{" "}
|
||||
</p>
|
||||
<p className="last:mb-0 mb-2 item-circle">
|
||||
{" "}
|
||||
Bảo hành 1 đổi 1 tại nơi sử dụng{" "}
|
||||
</p>
|
||||
<p className="last:mb-0 mb-2 item-circle">
|
||||
{" "}
|
||||
Giá cạnh tranh nhất thị trường{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Liên Hệ Với Kinh Doanh Online */}
|
||||
<div className="pd-static-group mb-3 rounded-[12px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,#114CDD_100.92%)] p-1 pt-2">
|
||||
<p className="group-title text-white leading-[21px] text-16 font-600 mb-2 text-center">
|
||||
{" "}
|
||||
Liên Hệ Với Kinh Doanh Online{" "}
|
||||
</p>
|
||||
<div className="pd-static-list bg-white p-[16px_8px] leading-[18px] font-500 rounded-[8px]">
|
||||
<div className="last:mb-0 mb-2 flex gap-2">
|
||||
<i className="icons icon-phone" />
|
||||
<p className="m-0">
|
||||
Hotline Hà Nội:{" "}
|
||||
<a href="tel:0969123666" className="red font-500">
|
||||
{" "}
|
||||
0969123666{" "}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="last:mb-0 mb-2 flex gap-2">
|
||||
<i className="icons icon-phone" />
|
||||
<p className="m-0">
|
||||
Hotline Vinh, Nghệ An:{" "}
|
||||
<a href="tel:0988.163.666" className="red font-500">
|
||||
{" "}
|
||||
0988.163.666{" "}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="last:mb-0 mb-2 flex gap-2">
|
||||
<i className="icons icon-phone" />
|
||||
<p className="m-0">
|
||||
Hotline Hồ Chí Minh:{" "}
|
||||
<a href="tel:0968.123.666" className="red font-500">
|
||||
{" "}
|
||||
0968.123.666{" "}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="last:mb-0 mb-2 flex gap-2">
|
||||
<i className="icons icon-phone" />
|
||||
<p className="m-0">
|
||||
Hotline Bảo Hành:{" "}
|
||||
<a href="tel:1900.6100" className="red font-500">
|
||||
{" "}
|
||||
1900.6100{" "}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-[#0678DB] rounded-[12px] px-3 py-4 gap-[6px] flex flex-wrap items-center">
|
||||
<a
|
||||
href="https://hoanghapc.vn/media/lib/17-10-2022/qr-hoang-ha-pc-nhom.png"
|
||||
data-fancybox=""
|
||||
className="w-[110px]"
|
||||
>
|
||||
<img
|
||||
data-src="https://hoanghapc.vn/media/lib/17-10-2022/qr-hoang-ha-pc-nhom.png"
|
||||
alt="QR code"
|
||||
width={110}
|
||||
height={110}
|
||||
className="block m-auto lazy"
|
||||
/>
|
||||
</a>
|
||||
<p className="m-0 font-500 w-[calc(100%-116px)]">
|
||||
{" "}
|
||||
Tham gia Cộng đồng "Cẩm Nang Build PC - Đồ Họa, Render, Giả Lập" để
|
||||
theo dõi các ưu đãi dành riêng cho thành viên{" "}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
44
src/components/product/detail/summary/index.tsx
Normal file
44
src/components/product/detail/summary/index.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
|
||||
'use client';
|
||||
|
||||
export default function ProductSummary({ item }: any) {
|
||||
return (
|
||||
<div className="mb-3 pd-summary-group">
|
||||
<p className="leading-6 mb-2 text-16 font-600"> Thông số sản phẩm </p>
|
||||
|
||||
<div> {renderSummary(item)}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
function renderSummary(data:any) {
|
||||
if (!data) return null;
|
||||
|
||||
if (typeof data === 'string' && data.includes('<')) {
|
||||
if (typeof window === 'undefined') return null;
|
||||
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(data, 'text/html');
|
||||
|
||||
return Array.from(doc.body.childNodes)
|
||||
.filter(
|
||||
node =>
|
||||
node.nodeType === 1 && node.textContent !== null && node.textContent.trim() !== ''
|
||||
)
|
||||
.map((node, index) => (
|
||||
<div key={index} className="item-circle">
|
||||
{node.textContent?.trim()}
|
||||
</div>
|
||||
));
|
||||
}
|
||||
|
||||
return data
|
||||
.split(/\r?\n/)
|
||||
.filter((line:any) => line.trim() !== '')
|
||||
.map((line:any, index:any) => (
|
||||
<div key={index} className="item-circle">
|
||||
{line.trim()}
|
||||
</div>
|
||||
));
|
||||
}
|
||||
Reference in New Issue
Block a user