1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / chinawholesale-frontend-next / src / components / pages / home / includes /
Filename : SectionsProducts.js
back
'use client';
import React from "react";
import {loadAsset} from "@/helpers/helpers";
import RecentItems from "./Products/recentProduct/includes/RecentItems";
import {useSectionProducts} from "@/api/product-api";
import Link from "next/link";
import ProductSectionSkeleton from "@/components/skeleton/ProductSectionSkeleton";
import ExpressButton from "@/components/buttons/ExpressButton";
import {NextImageServer} from "@/components/mixed/NextImageServer";


export default function SectionsProducts({settings, section}) {

    const query_url = settings?.[`${section}_query_url`] || '';
    const {data: products, isLoading} = useSectionProducts(section, query_url);

    const title = settings?.[`${section}_title`] || '';
    const image = settings?.[`${section}_title_image`] || '';
    const visible_title = settings?.[`${section}_visible_title`] || '';
    const actionURL = settings?.[`${section}_action_url`] || '';
    // const query_type = settings?.[`${section}_query_type`] || '';

    return (
        <section className="my-2 my-md-3">
            <div className="container">
                <div className={'bg-white rounded-[6px]'}>
                    <div
                        className={'border-b border-solid border-[#f0f0f0] px-2 py-2 lg:px-3 lg:py-2 flex justify-between items-center'}>
                        {
                            visible_title === "image" ? (
                                <NextImageServer src={loadAsset(image)} alt={'title'}/>
                            ) : (
                                <h2 className={'text-xl font-semibold'}>{title}</h2>
                            )
                        }
                        <Link href={actionURL}>
                            <ExpressButton type={'purple'} label={'View All'}
                                           className={'text-[1rem] py-[4px] font-semibold'}/>
                        </Link>
                    </div>
                    <div className={'p-2 lg:p-3'}>
                        {
                            isLoading ?
                                <ProductSectionSkeleton/>
                                :
                                <RecentItems products={products} settings={settings}/>
                        }
                    </div>
                </div>
            </div>
        </section>
    );
};