LLC/src/view/Landing/components/Products.jsx

101 lines
2.7 KiB
JavaScript

import { getLocale, getMessages } from "next-intl/server";
import Link from "next/link";
import React from "react";
import CardNormal from "src/components/Cards/CardNormal";
import ProductCarousel from "src/components/Carousel/ProductCarousel";
import graphql from "src/utils/graphql";
const gql = `
query Products_connection($locale: I18NLocaleCode, $page: Int, $pageSize: Int,$category:String,$brand:String) {
products_connection(
pagination: { page: $page, pageSize: $pageSize }
locale: $locale
sort: ["createdAt:desc"]
filters: {
or:[
{brand: { slug: { eqi: $brand } }}
{category:{ slug: { eqi: $category } }}
]
}
) {
nodes {
title
documentId
images {
alternativeText
documentId
url
}
category {
documentId
title
slug
}
brand {
title
documentId
slug
image {
url
alternativeText
documentId
}
}
slug
}
}
}
`
const getProducts = async (brand = "", category = "") => {
const locale = await getLocale()
const products = await graphql(gql, {
page: 1,
pageSize: 20,
locale: "en",
brand: brand,
category: category
})
return products.products_connection.nodes;
}
const Products = async () => {
const products1 = await getProducts("active")
const products2 = await getProducts("", "construction")
const t = await getMessages()
return (
<div className="my-20 max-w-screen-xl mx-auto px-4 lg:px-0 ">
<div>
<ProductCarousel products={products1} subtitle={""} title={t.HomePage.products.title[0]} showMoreLink={"/products/active"} />
</div>
<div>
<ProductCarousel products={products2} subtitle={""} title={t.HomePage.products.title[1]} showMoreLink={"/products/constructions"} />
</div>
{/* <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
{products?.map((product, index) => (
<div key={index} className="relative">
<CardNormal product={product} priority />
</div>
))}
</div> */}
{/* <div className="flex justify-center">
<Link href={"categories/Product-20Listing-Page"}>
<button className="btn btn-primary px-10 text-sm ">
{" "}
See All Products
</button>
</Link>
</div> */}
</div>
);
};
export default Products;