pizza-online

1
'use client'
2

3
import React from 'react'
4
import {ProductCard} from './product-card'
5
import {observer} from '@/lib/utils'
6
import {useCategoriesStore} from '../store/categories'
7

8
interface Props {
9
  groupId: number
10
  title: string
11
  items: any[]
12
  className?: string
13
}
14

15
export const ProductsGroup: React.FC<Props> = ({title, items}) => {
16
  const targetRef = React.useRef(null)
17
  const setCategoryName = useCategoriesStore(state => state.updateCategoryName)
18

19
  React.useEffect(() => {
20
    const cleanup = observer(targetRef.current!, setCategoryName)
21
    return cleanup
22
  }, [targetRef, setCategoryName, title])
23

24
  return (
25
    <section id={title}>
26
      <h2 ref={targetRef} className='font-bold text-[32px]'>
27
        {title}
28
      </h2>
29

30
      <ul className='grid grid-cols-3 gap-[50px]'>
31
        {items.map((item, i) => (
32
          <li key={`${i}${item.name}`}>
33
            <ProductCard
34
              id={item.id}
35
              name={item.name}
36
              price={item.price[0]}
37
              count={item.count}
38
              imageUrl={item.imageUrl}
39
            />
40
          </li>
41
        ))}
42
      </ul>
43
    </section>
44
  )
45
}
46