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

12/02/2026

Browse Source
This commit is contained in:
Dao Duc
2026-02-12 17:14:04 +07:00
parent 2bc93383a0
commit 756cf6410c
35 changed files with 784 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/designer-tool/Detail.tsx
View File

@@ -1,18 +1,41 @@
'use client';
import { usePathname } from 'next/navigation';
import parse from "html-react-parser";
import { useState } from 'react';
import { useSearchParams } from 'next/navigation';
import Link from "next/link";
import FAQ from "./Faq";
import DesignerItem from "@/components/shared/DesignerItem";
import { usePagination } from "@/hooks/usePagination";
import ButtonShowMore from "@/components/shared/ProductShowMore";
export default function Detail({ slug }: any) {
// console.log('DesignerDetail: ', slug)
const title = usePathname().includes('device=laptop') ? 'Laptop' : 'PC';
const deviceTitle = useSearchParams().get('device') == 'laptop' ? 'Laptop' : 'PC';
const ignoreKeys = ["Loại máy", "Loại máy tính"];
const {
attribute_list,
product_list
} = slug
const filteredAttribute = slug.attribute_list.filter(
(item: any) => !ignoreKeys.includes(item.name)
const ignoreKeys = ["loại máy", "loại máy tính"];
const filteredAttribute = attribute_list.filter(
(item: any) =>
!ignoreKeys.map((key: string) =>
key.toLowerCase()).includes(item.name.toLowerCase())
);
const [attribute, setAttribute] = useState(0)
const result = product_list.filter((item: any) =>
attribute === 0 || item.attribute?.includes(attribute)
);
const {
currentData,
hasMore,
loadMore,
total
} = usePagination(result, 24);
return (
<>
@@ -45,38 +68,54 @@ export default function Detail({ slug }: any) {
<div className="container">
<h1 className="text-center text-[#004BA4] font-600 text-24 leading-[30px] lg:text-[32px] lg:leading-10 mb-4">
{title} dành cho {slug.item_info.name}
{deviceTitle} dành cho {slug.item_info.name}
</h1>
{filteredAttribute &&
{filteredAttribute.length > 0 &&
<div className="text-center tool-btn-list mb-4 lg:mb-6">
<div className="inline-flex items-center justify-center p-1 border border-[#DFE4EC] bg-[#F5F8FF] overflow-auto whitespace-nowrap no-scroll gap-1 leading-9 font-500 text-[#5D6776] text-14 rounded-[8px]">
{
filteredAttribute.map((item: any) =>
<button
key={item.id}
className="js-attribute-btn px-9"
data-id="{{ _item.id }}"
data-current="current"
<div className="inline-flex items-center justify-center p-1 border border-[#DFE4EC] bg-[#F5F8FF] overflow-auto whitespace-nowrap no-scroll gap-1 leading-9 font-500 text-[#5D6776] rounded-[8px]">
{filteredAttribute.map((item: any) =>
item.list.map((list: any) =>
<button className={`js-attribute-btn px-9
${list.id === attribute ? 'current' : ""}
`}
key={list.id}
onClick={() => setAttribute(list.id)}
>
{item.name}
{list.name}
</button>
)}
)
)}
</div>
</div>
}
<div className="mb-8 lg:mb-12">
<div className="tool-product-holder grid grid-cols-2 lg:grid-cols-4 gap-x-3 gap-y-4 lg:gap-x-4 lg:gap-y-6" id="js-product-holder">
{currentData.length == 0
? parse(` <div class="text-center py-20">
<p class="text-20 font-700">Sản phẩm đang được cập nhật ...!</p>
<a href="/" class="color-main text-18"> Quay lại trang chủ </a>
</div>
`) : (
<div className="tool-product-holder grid grid-cols-2 lg:grid-cols-4 gap-x-3 gap-y-4 lg:gap-x-4 lg:gap-y-6" id="js-product-holder">
{currentData.map((item: any) =>
<DesignerItem
key={item.id}
item={item}
/>
)}
</div>
)
}
</div>
<div className="text-center mt-12" id="js-paging-holder">
<button type="button" className="mb-3 bg-btn text-white rounded-[30px] h-10 font-500 text-16 table max-w-[240px] w-full m-auto mb-3" aria-label="Xem thêm"> TẢI THÊM </button>
<p className="text-14 leading-[18px] m-0" id="js-paging-count"> </p>
</div>
{hasMore &&
<ButtonShowMore
onClick={loadMore}
displayCount={currentData.length}
total={total}
/>
}
</div>
</div>
{slug.item_info.description &&