diff options
Diffstat (limited to 'src/lib/category/components')
| -rw-r--r-- | src/lib/category/components/Category.jsx | 60 | ||||
| -rw-r--r-- | src/lib/category/components/PopularBrand.jsx | 83 |
2 files changed, 18 insertions, 125 deletions
diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx index ff958378..e6ea5acf 100644 --- a/src/lib/category/components/Category.jsx +++ b/src/lib/category/components/Category.jsx @@ -2,15 +2,10 @@ import odooApi from '@/core/api/odooApi' import Link from '@/core/components/elements/Link/Link' import DesktopView from '@/core/components/views/DesktopView' import { createSlug } from '@/core/utils/slug' -import { ChevronRightIcon } from '@heroicons/react/24/outline' -import Image from 'next/image' import { useEffect, useState } from 'react' -import PopularBrand from './PopularBrand' const Category = () => { const [categories, setCategories] = useState([]) - const [openCategories, setOpenCategory] = useState([]); - useEffect(() => { const loadCategories = async () => { @@ -31,65 +26,46 @@ const Category = () => { } loadCategories() }, []) - // console.log("categories",categories) return ( <DesktopView> <div className='category-mega-box'> {categories?.map((category) => ( - <div key={category.id} className='flex'> + <div key={category.id}> <Link href={createSlug('/shop/category/', category.name, category.id)} - className='category-mega-box__parent flex items-center' + className='category-mega-box__parent' > - <div className='w-6 h-6 border mr-2 rounded-full flex justify-center items-center'> - <Image src={category.image} alt='' width={16} height={16} /> - </div> {category.name} </Link> <div className='category-mega-box__child-wrapper'> - <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full !w-[590px] overflow-auto'> + <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full overflow-auto'> {category.childs.map((child1Category) => ( - <div key={child1Category.id} className='w-full'> + <div key={child1Category.id}> <Link href={createSlug('/shop/category/', child1Category.name, child1Category.id)} - className='category-mega-box__child-one mb-4 w-full h-8 flex justify-center line-clamp-2' + className='category-mega-box__child-one mb-4' > {child1Category.name} </Link> - <div className='flex flex-col gap-y-3 w-full'> - {child1Category.childs.map((child2Category, index) => ( - (index < 4) && ( - <Link - href={createSlug('/shop/category/', child2Category.name, child2Category.id)} - className='category-mega-box__child-two truncate' - key={child2Category.id} - > - {child2Category.name} - </Link> - ) + <div className='flex flex-col gap-y-3'> + {child1Category.childs.map((child2Category) => ( + <Link + href={createSlug( + '/shop/category/', + child2Category.name, + child2Category.id + )} + className='category-mega-box__child-two' + key={child2Category.id} + > + {child2Category.name} + </Link> ))} - {child1Category.childs.length > 5 && ( - <div className='flex hover:bg-gray_r-8/35 rounded-10'> - <Link - href={createSlug('/shop/category/', child1Category.name, child1Category.id)} - className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4' - > - <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua</p> - <ChevronRightIcon className='w-4 text-danger-500 font-bold' /> - </Link> - </div> - )} </div> </div> ))} </div> - <div className='category-mega-box__child-wrapper !w-[260px] !flex !flex-col !gap-4'> - <PopularBrand category={category} /> - <div className='flex w-60 h-20 object-cover'> - <Image src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/397' alt='' width={275} height={4} /> - </div> - </div> </div> </div> ))} diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx deleted file mode 100644 index 09c0f8a1..00000000 --- a/src/lib/category/components/PopularBrand.jsx +++ /dev/null @@ -1,83 +0,0 @@ -import odooApi from '@/core/api/odooApi' -import React, { useEffect, useState } from 'react' -import axios from 'axios'; -import { useQuery } from 'react-query' -import Link from '@/core/components/elements/Link/Link' -import { createSlug } from '@/core/utils/slug' -import Image from 'next/image' -import { ChevronRightIcon } from '@heroicons/react/24/outline' -import useProductSearch from '../../../lib/product/hooks/useProductSearch'; -import { SolrResponse } from "~/types/solr"; -import { fetchPromoItemsSolr } from '../api/popularProduct' - -const SOLR_HOST = process.env.SOLR_HOST - -const PopularBrand = ({ category }) => { - const [topBrands, setTopBrands] = useState([]); - - const fetchTopBrands = async () => { - try { - const items = await fetchPromoItemsSolr(`category_id_ids:(${category?.categoryDataIds?.join(' OR ')})`); - // console.log("id",items) - // Fungsi untuk deduplikasi dan mengambil 12 nama brand teratas - const getTop12UniqueBrands = (prod) => { - const brandSet = new Set(); - const topBrands = []; - - for (const product of prod) { - if (!brandSet.has(product.manufacture_name)) { - brandSet.add(product.manufacture_name); - topBrands.push({ name: product.manufacture_name, id: product.manufacture_id }); - }else{ - } - if (topBrands.length === 18) break; - } - return topBrands; - } - - // Menggunakan hasil pencarian produk - const products = items; - const top12UniqueBrands = getTop12UniqueBrands(products); - - // console.log('top12UniqueBrands', top12UniqueBrands); - setTopBrands(top12UniqueBrands); - } catch (error) { - console.error("Error fetching data from Solr", error); - throw error; - } - } - - useEffect(() => { - fetchTopBrands(); - }, [category]); - - return ( - <div className='flex flex-col'> - <div className='grid grid-cols-3 max-h-full w-full gap-2'> - {topBrands.map((brand, index) => ( - <div key={index} className='w-full flex items-center justify-center pb-2'> - <Link - href={createSlug('/shop/brands/', brand.name, brand.id)} - className='category-mega-box__child-one w-8 h-full flex items-center justify-center ' - > - <Image src={`https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/${brand.id}` } alt={`${brand.name}`} width={104} height={44} objectFit='cover' /> - </Link> - </div> - ))} - </div> - {/* {topBrands.length > 8 && ( - <div className='flex hover:bg-gray_r-8/35 rounded-10'> - <Link - href={createSlug('/shop/category/', category.name, category.id)} - className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4' - > - <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua Brand</p> - <ChevronRightIcon className='w-4 text-danger-500 font-bold' /> - </Link> - </div> - )} */} - </div> - ) -} - -export default PopularBrand; |