text: import { Box } from '@mui/material';
  import drinkList from 'constants/Category/drinkList';
  import pizzaList from 'constants/Category/pizzaList';
  import ListItem from 'features/HomePage/components/ListItem';
  import TaskBar from 'features/HomePage/components/TaskBar';
  import React, { useState } from 'react';
  
  export default function Category() {
    const [activeId, setActiveId] = useState(1);
  
    const onTabClick = (id) => {
      setActiveId(id);
    };
  
    return (
      <Box>
        <TaskBar
          categories={categories}
          activeId={activeId}
          onTabClick={onTabClick}
          title="Category"
        />
        {categories.map(
          (category) =>
            category.id === activeId && (
              /* category.listItem &&  */
              <ListItem
                key={category.id}
                listItem={category.listItem}
                api={category.api}
              />
            )
        )}
      </Box>
    );
  }
  
  const categories = [
    {
      id: 1,
      name: 'Pizza',
      listItem: pizzaList,
      api: 'http://127.0.0.1:8000/piza',
      img: (
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M7.5 9.002C7.69825 9.002 7.88838 8.92324 8.02856 8.78306C8.16875 8.64288 8.2475 8.45275 8.2475 8.2545C8.2475 8.05625 8.16875 7.86612 8.02856 7.72594C7.88838 7.58575 7.69825 7.507 7.5 7.507C7.30175 7.507 7.11162 7.58575 6.97144 7.72594C6.83125 7.86612 6.7525 8.05625 6.7525 8.2545C6.7525 8.45275 6.83125 8.64288 6.97144 8.78306C7.11162 8.92324 7.30175 9.002 7.5 9.002V9.002ZM11.223 10.255C11.223 10.4532 11.1442 10.6434 11.0041 10.7836C10.8639 10.9237 10.6737 11.0025 10.4755 11.0025C10.2773 11.0025 10.0871 10.9237 9.94694 10.7836C9.80675 10.6434 9.728 10.4532 9.728 10.255C9.728 10.0567 9.80675 9.86662 9.94694 9.72644C10.0871 9.58625 10.2773 9.5075 10.4755 9.5075C10.6737 9.5075 10.8639 9.58625 11.0041 9.72644C11.1442 9.86662 11.223 10.0567 11.223 10.255ZM7.504 13.508C7.60262 13.508 7.70028 13.4886 7.7914 13.4508C7.88251 13.4131 7.9653 13.3578 8.03504 13.288C8.10477 13.2183 8.16009 13.1355 8.19783 13.0444C8.23558 12.9533 8.255 12.8556 8.255 12.757C8.255 12.6584 8.23558 12.5607 8.19783 12.4696C8.16009 12.3785 8.10477 12.2957 8.03504 12.226C7.9653 12.1562 7.88251 12.1009 7.7914 12.0632C7.70028 12.0254 7.60262 12.006 7.504 12.006C7.30482 12.006 7.1138 12.0851 6.97296 12.226C6.83212 12.3668 6.753 12.5578 6.753 12.757C6.753 12.9562 6.83212 13.1472 6.97296 13.288C7.1138 13.4289 7.30482 13.508 7.504 13.508V13.508ZM4 3.956C4 2.861 4.895 1.934 6.03 2.004C10.477 2.278 14.377 3.774 17.432 6.691C18.299 7.518 18.128 8.869 17.229 9.559C15.83 10.639 14.4216 11.7067 13.004 12.762V14.502C13.004 15.219 12.449 16.002 11.504 16.002C11.323 16.002 11.156 15.972 11.006 15.922V16.005C11.006 16.718 10.45 17.496 9.503 17.496C8.749 17.496 8.252 17 8.077 16.446C7.529 16.856 6.93 17.302 6.395 17.7C5.405 18.437 4 17.73 4 16.5V3.956ZM11.005 14.502C11.005 14.761 11.2 15.002 11.504 15.002C11.809 15.002 12.004 14.759 12.004 14.502V12.508C12.0041 12.4292 12.0228 12.3515 12.0586 12.2813C12.0944 12.2111 12.1463 12.1503 12.21 12.104C12.99 11.538 14.318 10.529 15.494 9.63C12.801 7.067 9.026 5.546 5 5.514V16.499C5.00028 16.5915 5.02622 16.6821 5.07493 16.7608C5.12365 16.8394 5.19323 16.903 5.27594 16.9445C5.35865 16.986 5.45124 17.0037 5.54341 16.9956C5.63558 16.9876 5.72371 16.9541 5.798 16.899C6.584 16.313 7.511 15.623 8.207 15.101C8.28128 15.0453 8.36962 15.0114 8.4621 15.003C8.55458 14.9947 8.64755 15.0123 8.73061 15.0538C8.81366 15.0953 8.88351 15.1591 8.93233 15.2381C8.98114 15.3171 9.007 15.4081 9.007 15.501V16.005C9.007 16.252 9.197 16.497 9.503 16.497C9.56852 16.4986 9.63369 16.487 9.69467 16.463C9.75564 16.439 9.81118 16.403 9.85798 16.3571C9.90479 16.3112 9.94192 16.2564 9.96717 16.1959C9.99242 16.1355 10.0053 16.0705 10.005 16.005V14.502C10.005 14.3694 10.0577 14.2422 10.1514 14.1484C10.2452 14.0547 10.3724 14.002 10.505 14.002C10.6376 14.002 10.7648 14.0547 10.8586 14.1484C10.9523 14.2422 11.005 14.3694 11.005 14.502V14.502ZM16.619 8.767C17.084 8.41 17.119 7.774 16.741 7.413C13.884 4.686 10.221 3.263 5.969 3.001C5.45 2.969 5 3.395 5 3.956V4.514C9.327 4.547 13.402 6.201 16.297 9.014L16.619 8.767Z" />
        </svg>
      ),
    },
    {
      id: 2,
      name: 'Mỳ Ý',
      listItem: undefined,
      api: 'http://127.0.0.1:8000/side/?type=Noodle',
      img: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 122.88 103.85"
        >
          <g>
            <path d="M63.97,63.46c0.39-2.74,1.67-5.2,3.54-7.06c2.26-2.26,5.39-3.67,8.85-3.67c3.46,0,6.58,1.4,8.85,3.67 c1.87,1.87,3.15,4.32,3.54,7.06h7.33c-0.59-4.36-2.65-8.25-5.66-11.16c-3.44-3.33-8.13-5.38-13.3-5.38 c-5.16,0-9.85,2.04-13.29,5.36c-3.02,2.91-5.08,6.81-5.67,11.18H63.97L63.97,63.46z M70.12,59.01c-1.19,1.19-2.05,2.73-2.4,4.45 h17.27c-0.35-1.72-1.21-3.26-2.4-4.45c-1.6-1.6-3.8-2.58-6.23-2.58C73.92,56.43,71.71,57.41,70.12,59.01L70.12,59.01z M12.06,14.04 c-1.02,0-1.85-0.83-1.85-1.85c0-1.02,0.83-1.85,1.85-1.85h1.55V7.7c0-2.1,0.82-4.01,2.13-5.4C17.09,0.88,18.95,0,21,0 c2.05,0,3.91,0.88,5.25,2.31c0.43,0.45,0.8,0.96,1.11,1.51c1.28-1.13,2.93-1.8,4.73-1.8c2.05,0,3.91,0.88,5.25,2.31 c1.32,1.39,2.13,3.3,2.13,5.4v0.63h5.37c0.12,0,0.25,0.01,0.36,0.04c1.91,0.3,3.78,0.98,5.58,2.11c1.56,0.98,3.08,2.3,4.53,4.01 l56.1-1.91c4.63-0.35,8.33,2.33,10.17,5.88c0.69,1.33,1.13,2.79,1.25,4.25c0.13,1.5-0.06,3.01-0.62,4.42 c-1.32,3.36-4.64,6.05-10.57,6.4c-0.08,0-0.16,0-0.23,0l-56.11-3.93c-1.45,1.8-2.95,3.24-4.5,4.26l-0.13,0.08 c-1.86,1.19-3.81,1.81-5.85,1.77v0.01h-5.37v5.3c3.76-0.85,7.69-0.72,11.39,0.31c3.93,1.09,7.6,3.18,10.52,6.19 c4.09-3.9,9.64-6.3,15.73-6.3c6.16,0,11.75,2.44,15.86,6.42c3.8,3.68,6.33,8.67,6.86,14.25c1.1,0.4,2.07,1.08,2.83,1.93l0.1,0.13 c1.02,1.21,1.64,2.77,1.64,4.46c0,1.26-0.34,2.45-0.94,3.47h2.28c1.85,0,3.54,0.76,4.76,1.98l0.01,0.01 c1.22,1.22,1.98,2.91,1.98,4.76c0,1.18-0.3,2.28-0.84,3.25h6.98c1.02,0,1.85,0.83,1.85,1.85c0,0.56-0.25,1.06-0.65,1.4 c-3.27,3.25-6.84,6.1-10.76,8.53c-3.95,2.45-8.25,4.48-12.92,6.04c-1.28,0.43-2.55,0.81-3.81,1.15c-1.26,0.34-2.58,0.66-3.96,0.95 c-0.13,0.03-0.25,0.04-0.38,0.04v0H33.68c-0.21,0-0.41-0.04-0.6-0.1c-1.46-0.35-2.8-0.7-4.01-1.05c-1.31-0.37-2.64-0.79-4-1.24 c-1.87-0.63-3.67-1.3-5.4-2.01c-1.76-0.73-3.43-1.49-5-2.29c-2.8-1.42-5.37-2.98-7.73-4.67c-2.36-1.7-4.49-3.52-6.4-5.47 c-0.71-0.73-0.7-1.89,0.02-2.61c0.36-0.35,0.83-0.53,1.29-0.53v-0.01h7.47c-0.54-0.96-0.84-2.07-0.84-3.25 c0-1.86,0.76-3.54,1.98-4.77l0.12-0.11c0.84-0.8,1.88-1.39,3.04-1.68V37.72h-2.03c-1.02,0-1.85-0.83-1.85-1.85s0.83-1.85,1.85-1.85 h2.03v-3.97h-1.9c-1.02,0-1.85-0.83-1.85-1.85s0.83-1.85,1.85-1.85h1.9v-4.65h-1.9c-1.02,0-1.85-0.83-1.85-1.85 c0-1.02,0.83-1.85,1.85-1.85h1.9v-3.97H12.06L12.06,14.04z M44.7,14.04h-5.24v3.97h3.18c1.02,0,1.85,0.83,1.85,1.85 c0,1.02-0.83,1.85-1.85,1.85h-3.18v4.65h3.47c1.02,0,1.85,0.83,1.85,1.85s-0.83,1.85-1.85,1.85h-3.47v3.97h5.37v0.01l0.04,0 c1.28,0.03,2.55-0.38,3.8-1.18l0.11-0.08c1.4-0.92,2.78-2.3,4.13-4.09c0.35-0.54,0.98-0.88,1.67-0.83l56.97,4 c4.16-0.28,6.4-1.97,7.23-4.05c0.34-0.86,0.45-1.81,0.37-2.76c-0.09-0.98-0.38-1.96-0.85-2.87c-1.22-2.35-3.63-4.13-6.62-3.9l0,0 l-57.16,1.95c-0.56,0.02-1.13-0.22-1.5-0.7c-1.36-1.72-2.76-2.99-4.19-3.89C47.49,14.78,46.11,14.28,44.7,14.04L44.7,14.04z M28.4,9.71c0,0.11-0.01,0.21-0.03,0.31v54c0.84-0.36,1.76-0.56,2.72-0.56h4.67V9.71c0-1.12-0.43-2.14-1.12-2.87 c-0.66-0.7-1.57-1.14-2.56-1.14c-0.99,0-1.9,0.43-2.56,1.13C28.83,7.57,28.4,8.59,28.4,9.71L28.4,9.71z M39.47,46.82v6.61 c1.48-0.51,3.05-0.76,4.62-0.76c2.25,0,4.52,0.51,6.55,1.51l0.1,0.05c1.93,0.97,3.63,2.39,4.85,4.22c0.79-2.24,1.92-4.32,3.33-6.18 c-2.48-2.63-5.64-4.46-9.03-5.4C46.49,45.95,42.87,45.9,39.47,46.82L39.47,46.82z M39.47,57.43v6.03h14.24 c-0.2-1.06-0.58-1.99-1.09-2.81c-0.85-1.35-2.09-2.4-3.52-3.12l-0.09-0.04c-1.5-0.74-3.21-1.12-4.91-1.12 C42.47,56.37,40.87,56.72,39.47,57.43L39.47,57.43z M17.31,36.13v37.76h7.76c-0.59-1.02-0.93-2.21-0.93-3.47 c0-0.46,0.05-0.91,0.13-1.35l0.02-0.08c0.09-0.41,0.22-0.82,0.38-1.21l0.01-0.03V7.7c0-1.12-0.43-2.14-1.12-2.87 C22.9,4.13,21.99,3.7,21,3.7c-0.99,0-1.9,0.43-2.56,1.13c-0.69,0.73-1.12,1.75-1.12,2.87V36.13L17.31,36.13z M28.23,68.87 c-0.03,0.06-0.06,0.12-0.09,0.18l-0.02,0.03l-0.04,0.1c-0.07,0.17-0.13,0.35-0.17,0.55l-0.01,0.06c-0.04,0.2-0.06,0.41-0.06,0.63 c0,0.9,0.37,1.71,0.96,2.3l0,0c0.59,0.59,1.41,0.96,2.31,0.96h66.34c0.89,0,1.71-0.37,2.3-0.96l0,0c0.59-0.59,0.96-1.41,0.96-2.31 c0-0.79-0.28-1.51-0.74-2.07l-0.08-0.08c-0.51-0.57-1.2-0.97-1.98-1.08c-17.72-2.1-46.53-0.02-66.8-0.02 c-0.63,0-1.22,0.18-1.71,0.48C28.91,67.93,28.5,68.36,28.23,68.87L28.23,68.87z M113.91,87.58H6.59c0.8,0.66,1.63,1.3,2.5,1.92 c2.19,1.57,4.6,3.03,7.23,4.37c1.52,0.77,3.1,1.5,4.75,2.18c1.65,0.68,3.37,1.32,5.17,1.92c1.18,0.39,2.46,0.79,3.84,1.18 c1.32,0.38,2.58,0.71,3.79,1.01h53.98c1.18-0.25,2.36-0.54,3.55-0.86c1.26-0.34,2.45-0.7,3.59-1.08c4.38-1.47,8.42-3.37,12.14-5.68 C109.52,91.05,111.78,89.39,113.91,87.58L113.91,87.58z M105.74,77.59H15.22c-0.8,0-1.53,0.31-2.08,0.82l-0.07,0.08 c-0.55,0.55-0.9,1.32-0.9,2.15c0,0.84,0.34,1.6,0.89,2.16c0.55,0.55,1.32,0.89,2.16,0.89h90.52c0.8,0,1.54-0.31,2.08-0.82 l0.07-0.08c0.55-0.55,0.9-1.31,0.9-2.15c0-0.84-0.34-1.6-0.89-2.16C107.34,77.93,106.58,77.59,105.74,77.59L105.74,77.59z" />
          </g>
        </svg>
      ),
    },
    {
      id: 3,
      name: 'Gà BBQ',
      listItem: undefined,
      api: 'http://127.0.0.1:8000/side/?type=GaBBQ',
      img: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          role="img"
          width="20"
          height="20"
          preserveAspectRatio="xMidYMid meet"
          viewBox="0 0 48 48"
        >
          <g fill="none">
            <g clipPath="url(#simplesvg-id-a)">
              <path
                d="M33.374 33.874c4.243-4.242 1.415-18.384-4.95-24.748c-2.828-2.829-10.96-8.84-19.798 0c-8.84 8.838-2.829 16.97 0 19.798c6.364 6.365 20.506 9.193 24.748 4.95z"
                stroke="#ff8000"
                strokeWidth="3"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path d="M41 41l-7-7" stroke="#ff8000" strokeWidth="3" />
              <circle
                cx="42.193"
                cy="40.071"
                r="2.5"
                transform="rotate(135 42.193 40.071)"
                fill="#ff8000"
              />
              <circle
                cx="40.071"
                cy="42.193"
                r="2.5"
                transform="rotate(135 40.071 42.193)"
                fill="#ff8000"
              />
              <circle cx="17" cy="18" r="2" fill="#ff8000" />
              <circle cx="12" cy="21" r="2" fill="#ff8000" />
              <circle cx="17" cy="24" r="2" fill="#ff8000" />
            </g>
            <defs>
              <clipPath id="simplesvg-id-a">
                <path fill="#fff" d="M0 0h48v48H0z" />
              </clipPath>
            </defs>
          </g>
        </svg>
      ),
    },
    {
      id: 4,
      name: 'Salad',
      listItem: undefined,
      api: 'http://127.0.0.1:8000/side/?type=GaBBQ',
      img: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          role="img"
          width="20"
          height="20"
          preserveAspectRatio="xMidYMid meet"
          viewBox="0 0 64 64"
        >
          <path
            d="M39.842 28.281c-.582-1.732-1.47-2.352-2.497-2.352c-1.252 0-2.712.919-4.085 1.871c-.817.568-3.98 4.061-5.705 4.061a.936.936 0 0 1-.555-.164c-1.684-1.192.426-6.386.426-8.877c0-2.411-.438-3.332-1.109-3.332c-1.855 0-5.489 7.063-6.502 9.101c-.286.575-.685.802-1.148.802c-1.619 0-4.027-2.785-5.133-3.212a1.447 1.447 0 0 0-.519-.106c-1.848 0-1.808 4.597-1.78 5.817c1.01-.276 1.957-.446 2.785-.446c2.087 0 3.414 1.081 3.068 4.254c-.078.713-.529 2.985.209 3.486a.689.689 0 0 0 .399.111c.851 0 2.199-1.049 2.7-1.369c.674-.432 1.381-.748 1.979-.748c.72 0 1.282.457 1.443 1.722c.096.749-.271 3.599.463 4.054a.677.677 0 0 0 .357.097c1.355 0 3.668-3.386 4.715-3.774a4.386 4.386 0 0 1 1.536-.273c1.393 0 2.718.615 4.073 1.135c.228.088.414.126.565.126c.819 0 .581-1.137-.12-1.864c-1.021-1.064-2.641-.597-3.777-1.359c-1.443-.968.566-2.913 1.346-3.49c.931-.69 2.995-1.799 4.642-1.799c.763 0 1.436.238 1.864.864c.809 1.183-.537 2.677-.197 4.005c.143.551.489.741.899.741c.873 0 2.03-.862 2.11-.944a15.438 15.438 0 0 1 1.713-1.533c-3.04-.673-3.298-4.019-4.165-6.605"
            fill="#ff8000"
          />
          <path
            d="M14.916 25.789s2.629 2.319 3.752 2.319c.215 0 .376-.085.451-.291c1.616-4.425 5.033-9.482 7.264-9.482c.973 0 1.72.963 1.992 3.363c.352 3.107-1.797 7.816-.764 8.889a.23.23 0 0 0 .173.068c1.161 0 5.748-5.874 9.674-5.874a3.6 3.6 0 0 1 .896.111c3.537.907 2.004 6.938 4.875 8.661a3.077 3.077 0 0 0 1.577.449c1.058 0 2.024-.603 2.255-1.85c.583-3.148-9.415-9.25-4.006-9.25c.776 0 1.869.125 3.355.403c.885-6.064.576-7.745-.216-7.745c-.903 0-2.435 2.183-3.55 2.559a.328.328 0 0 1-.1.017c-.637 0-.615-2.294-1.705-2.294c-.704 0-1.871.957-3.977 4.103c-1.086 1.623-1.899 2.265-2.541 2.265c-2.442 0-2.373-9.341-5.303-9.341c-.592 0-1.306.381-2.188 1.296c-1.354 1.406-2.618 1.904-3.801 1.904c-2.881 0-5.268-2.959-7.225-2.959c-.772 0-1.479.461-2.121 1.749c-1.329 2.671 3.171 2.533 1.233 10.93m3.443 1.202c-.526-.236-1.46-.868-2.336-1.588c.162-.793.262-1.505.32-2.161c.247-.414.551-.822.922-1.2c1.511-1.541 3.447-2.028 4.396-1.138c-1.353 1.865-2.544 4.148-3.302 6.087m22.211-3.974c-.494 1.169.467 2.403 1.938 4.016a1.465 1.465 0 0 1-.354.283a1.44 1.44 0 0 1-.45.159c-.468-1.58-1.253-3.097-3.106-3.572a4.552 4.552 0 0 0-.83-.123c-.502-1.632-.269-3.165.682-3.695c1.048-.587 2.576.251 3.619 1.877c-.581.111-1.213.379-1.499 1.055"
            fill="#ff8000"
          />
          <path
            d="M48.007 32.174c-.219 1.431 1.861 1.687.867 4.031c-.51 1.199-4.829 3.963-4.511 4.568c.471.885 1.037 1.229 1.61 1.229c1.134 0 2.289-1.346 2.754-2.512c.609-1.525.766-5.528 2.25-6.27c.251-.127.499-.183.744-.183c1.465 0 2.834 1.981 4.154 2.249c.322-1.434.092-2.922.42-4.364c-5.572-.07 3.096-7.685-1.857-10.792c-.267-.167-.491-.242-.687-.241c-1.559 0-1.196 4.774-5.135 4.774c-.314 0-.657-.031-1.03-.097c-1.441-.254-2.436-.372-3.087-.372c-3.794.002 4.123 3.993 3.508 7.98"
            fill="#ff8000"
          />
          <path
            d="M57.877 24.693a8.384 8.384 0 0 0 .022-2.596c-.358-2.399-2.233-4.351-4.179-4.352c-.665 0-2.257.277-3.01 2.64a36.22 36.22 0 0 0-1.533-.6c.445-2.995.278-5.048-.521-6.097a2.068 2.068 0 0 0-1.673-.844c-1.046 0-2.221.7-3.681 2.197l-.053-.142c-.31-.838-.828-2.24-2.218-2.24c-.95 0-2.208.586-4.852 4.44a57.45 57.45 0 0 0-2.303-.123l-.142-.516c-.825-3.029-1.761-6.461-4.398-6.462h-.001c-1.075 0-2.206.633-3.459 1.934c-.933.97-1.856 1.441-2.823 1.441c-1.179 0-2.386-.676-3.554-1.329c-1.181-.66-2.401-1.343-3.663-1.343c-1.496 0-2.712.917-3.718 2.804c-1.149 2.156-.51 3.58.108 4.958c.27.601.553 1.238.754 2.02C6.283 23.359 2 27.714 2 32.597C2 46.13 15.432 62 32 62c16.569 0 30-15.87 30-29.403c0-2.886-1.518-5.582-4.123-7.904M32 59.961c-12.611 0-23.215-9.896-26.742-20.259c4.959 5.089 15.068 8.576 26.742 8.576s21.781-3.487 26.74-8.575C55.213 50.064 44.61 59.961 32 59.961m11.135-17.486c-.241.758-.99 1.91-1.919 2.721c-1.434 1.251-3.182 1.52-4.015.646c-.7-.738-.585-2.109.219-3.392c1.646-2.628 4.006-3.204 5.03-2.684c-.02.072-.048.141-.062.218c-.142.799.115 1.637.747 2.491m15.368-12.848c-.979 0-1.45 2.712-1.52 4.417c-.062 1.503-.496 2.004-1.117 2.004c-.894 0-2.176-1.036-3.295-1.622c-.358-.188-.633-.271-.849-.271c-.641 0-.758.749-.978 1.809c-.371 1.789-.813 3.645-1.783 5.188c-.712 1.133-1.813 1.921-2.916 1.921c-.725 0-1.451-.34-2.069-1.145c-2.43-3.158 2.908-3.804 3.972-5.969c.616-1.252.419-1.688-.145-1.688c-1.11 0-3.641 1.694-4.163 2.173c-.922.843-1.981 2.085-3.277 2.085c-.219 0-.446-.036-.68-.115c-1.375-.464-1.568-2.194-1.277-3.479c.242-1.074.799-2.039-.637-2.094a3.892 3.892 0 0 0-.152-.003c-.925 0-1.87.304-2.709.684c-1.018.462-2.426 1.288-2.795 2.501c-.115.373 2.354.762 2.738.91c1.924.752 2.865 4.373.852 4.373c-.26 0-.569-.061-.932-.193c-1.262-.471-2.531-1.137-3.852-1.137c-.434 0-.873.072-1.318.247c-.922.362-1.426 1.395-2.152 2.042c-1.074.964-2.024 1.482-2.77 1.482c-1.028 0-1.668-.984-1.709-3.145c-.036-1.756-.373-2.325-.918-2.325c-.972 0-2.604 1.815-4.357 1.949c-.051.003-.1.005-.147.005c-2.339 0-1.429-4.447-1.247-5.818c.199-1.495-.703-2.026-2.092-2.026c-1.561 0-3.732.67-5.644 1.397c.092.082.188.154.276.244c1.75 1.746 2.325 4.049 1.288 5.14c-1.039 1.089-3.298.556-5.046-1.192s-2.325-4.051-1.286-5.141c.887-.937 2.266-.622 3.439.003c1.533-.515 3.088-.964 3.052-1.688c-.273-5.476 1.28-6.498 2.479-6.497a2.76 2.76 0 0 1 1.301.363c1.082-6.969-2.977-7.442-1.07-11.021c.903-1.693 1.846-2.271 2.84-2.271c2.137 0 4.508 2.671 7.217 2.671c1.119 0 2.296-.457 3.537-1.746c1.113-1.156 2.009-1.629 2.746-1.629c3.297.001 3.385 9.47 5.27 9.47c.362 0 .791-.349 1.32-1.181c2.765-4.342 4.236-5.629 5.104-5.629c1.266 0 1.249 2.738 2.086 2.738c.172 0 .382-.117.646-.398c1.389-1.479 2.458-2.156 3.22-2.156c1.797 0 1.886 3.761.422 9.62c0 0 .327.083.806.083c1.021 0 2.728-.375 3.396-2.719c.421-1.476 1.24-2.082 2.114-2.082c1.38 0 2.895 1.51 3.19 3.485c.537 3.607-1.842 6.162-1.656 7.25c.032.193.127.269.269.269c.533 0 1.73-1.085 2.775-1.085c.779 0 1.475.605 1.743 2.719c-.612-1.281-1.122-1.777-1.54-1.777"
            fill="#ff8000"
          />
        </svg>
      ),
    },
    {
      id: 5,
      name: 'Khoai tây chiên',
      listItem: undefined,
      api: 'http://127.0.0.1:8000/side/?type=Frenchfries',
      img: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          role="img"
          width="20"
          height="20"
          preserveAspectRatio="xMidYMid meet"
          viewBox="0 0 24 24"
        >
          <path
            d="M18 11V6h-3V4h-3V2H8v3H6v6H5l2 11h10l2-11h-1m-2.14 0c-.16.61-.46 1.16-.86 1.62v-4l2 1V11h-1.14M17 7v1.5l-2-1V7h2m-5-2h2v3.5l-2 1V5m0 5.62l2-1v3.83c-.59.35-1.27.55-2 .55v-3.38m-1 3.24c-.79-.21-1.5-.64-2-1.24v-3l2-1v5.24M9 3h2v4.5L10 8V5H9V3M7 6h2v2.5L8 9v2H7V6z"
            fill="#ff8000"
          />
        </svg>
      ),
    },
    {
      id: 6,
      name: 'Đồ uống',
      listItem: drinkList,
      api: 'http://127.0.0.1:8000/side/?type=Drink',
      img: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          role="img"
          width="20"
          height="20"
          preserveAspectRatio="xMidYMid meet"
          viewBox="0 0 48 48"
        >
          <g fill="none" stroke="#ff8000" strokeWidth="2">
            <path
              d="M36 37l-2.79 6.4a1 1 0 0 1-.918.6H15.707a1 1 0 0 1-.916-.6L12 37"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M12 11l2.79-6.4a1 1 0 0 1 .918-.6h16.584a1 1 0 0 1 .917.6L36 11"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path d="M12 12a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2H14a2 2 0 0 1-2-2V12z" />
            <path
              d="M13 22.5l6.396-1.01a8.934 8.934 0 0 0 5.218-2.815v0a8.935 8.935 0 0 1 7.168-2.907L35.5 16"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M12.5 32.5l5.553-.252a9.54 9.54 0 0 0 7.998-5.067v0a9.54 9.54 0 0 1 5.974-4.754L35.5 21.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path d="M36 12v20" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M12 16v20" strokeLinecap="round" strokeLinejoin="round" />
          </g>
        </svg>
      ),
    },
  ];
  