pizza-online

1
import {cn} from '@/lib/utils'
2
import Link from 'next/link'
3
import React from 'react'
4
import {useCategoriesStore} from '../store/categories'
5

6
type Props = {
7
  className?: string
8
}
9

10
const cats = [
11
  {id: 1, name: 'Пиццы'},
12
  {id: 2, name: 'Комбо'},
13
  {id: 3, name: 'Закуски'},
14
  {id: 4, name: 'Коктейли'},
15
  {id: 5, name: 'Кофе'},
16
  {id: 6, name: 'Напитки'},
17
  {id: 7, name: 'Десерты'},
18
  {id: 8, name: 'Десерты'},
19
]
20

21
export const Categories: React.FC<Props> = ({className}) => {
22
  const categoryName = useCategoriesStore(state => state.categoryName)
23

24
  return (
25
    <ul className={cn('inline-flex gap-1 p-1 bg-gray-50 rounded-2xl', className)}>
26
      {cats.map((cat, i) => (
27
        <li
28
          className={cn(
29
            'flex items-center font-bold h-11 rounded-2xl px-5',
30
            categoryName === cat.name && 'bg-white shadow-md shadow-gray-200 text-primary'
31
          )}
32
          key={i}
33
        >
34
          <Link className='font-normal' href={`/#${cat.name}`}>
35
            {cat.name}
36
          </Link>
37
        </li>
38
      ))}
39
    </ul>
40
  )
41
}
42