hoanghapc_nextJs/src/components/designer-tool/Detail.tsx

'use client';
import { usePathname } from 'next/navigation';
import Link from "next/link";
import FAQ from "./Faq";

export default function Detail({ slug }: any) {
    // console.log('DesignerDetail: ', slug)
    const title = usePathname().includes('device=laptop') ? 'Laptop' : 'PC';

    const ignoreKeys = ["Loại máy", "Loại máy tính"];

    const filteredAttribute = slug.attribute_list.filter(
        (item: any) => !ignoreKeys.includes(item.name)
    );


    return (
        <>
            <div className="global-breadcrumb">
                <div className="container">
                    <ol itemScope itemType="http://schema.org/BreadcrumbList" className="ul clearfix">
                        <li itemProp="itemListElement" itemScope itemType="http://schema.org/ListItem">
                            <Link href="/" itemProp="item" className="nopad-l">
                                <span itemProp="name">Trang chủ</span>
                            </Link>
                            <meta itemProp="position" content="1" />
                        </li>

                        <li itemProp="itemListElement" itemScope itemType="http://schema.org/ListItem">
                            <Link href="/designer-tool" itemProp="item" className="nopad-l">
                                <span itemProp="name"> PC Đồ Họa Tool </span>
                            </Link>
                            <meta itemProp="position" content="2" />
                        </li>

                        <li itemProp="itemListElement" itemScope itemType="http://schema.org/ListItem">
                            <Link href="" itemProp="item" className="nopad-l">
                                <span itemProp="name"> {slug.item_info.name} </span>
                            </Link>
                            <meta itemProp="position" content="3" />
                        </li>
                    </ol>
                </div>
            </div>

            <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}
                </h1>

                {filteredAttribute &&
                    <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"
                                    >
                                        {item.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">

                    </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>
                </div>

            </div>

            {slug.item_info.description &&
                <div className="designer-summary-container bg-white py-8 lg:py-12 px-3">
                    <div className="js-static-container static-container leading-[135%] m-auto max-w-[924px]">
                        <div className="js-static-content static-content text-16 leading-[22px] text-justify"> {slug.item_info.description} </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"></i>
                            </button>

                            <button type="button" aria-label="Thu gọn" className="js-showless-button">
                                Thu gọn <i className="bx bx-chevron-up"></i>
                            </button>
                        </div>
                    </div>
                </div>
            }

            <div className="designer-faq-container bg-[#e8ecf6] lg:-mb-16">
                <div className="global-faq-container 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.
                        </p>
                    </div>

                    <FAQ />

                </div>
            </div>
        </>
    )
}