diff options
Diffstat (limited to 'src/lib/home/components')
| -rw-r--r-- | src/lib/home/components/CategoryPilihan.jsx | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx new file mode 100644 index 00000000..c506ef29 --- /dev/null +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -0,0 +1,32 @@ +import Image from 'next/image' +import useCategoryHome from '../hooks/useCategoryHome' + +const CategoryPilihan = ({ id, categories }) => { + const { categoryHome } = useCategoryHome({ id }) + + return ( + <section> + <div className='flex flex-row items-center gap-4'> + <h1>Kategori Pilihan</h1> + <p className='text-gray_r-10'>total produk</p> + </div> + <div className="group/item grid grid-cols-6 gap-2 w-full h-full col-span-2 border"> + {categories.map((category) => ( + <div className="max-w-sm w-full gap-4 lg:max-w-full flex flex-col bg-white px-4 py-2 border-2 border-gray_r-8 rounded-lg"> + <div className="group/edit flex items-center justify-center group-hover/item:visible"> + <Image src='group-hover/ https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={80} height={80} alt={category?.name} /> + <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}"> + <span class="group-hover/edit:text-gray-700 ...">Call</span> + </a> + </div> + <div className="flex flex-col justify-center leading-normal items-center"> + <h2 className="text-gray-900 font-bold text-sm items-center text-center">{category?.name}</h2> + </div> + </div> + ))} + </div> + </section> + ) +} + +export default CategoryPilihan |