ingredients.tsx

import { Section } from '@/components/section'
import { Heading } from '@/components/heading'
import { Paragraph } from '@/components/paragraph'
import { Image } from '@/components/image'
import { Button } from '@/components/button'
import { Grid } from '@/components/grid'
import { Label } from '@/components/label'
import { Span } from '@/components/span'
import clsx from 'clsx'
import arrowDownTrayIcon from '@iconify/icons-heroicons/arrow-down-tray'

const menuCategories = [
  {
    id: 'main-dishes',
    name: 'Main Dishes',
    number: '01.',
    image: '/images/layout-4/pexels-jonathanborba-2878738.jpg',
    items: [
      {
        name: 'Grilled Ribeye Steak',