export function PopupBuildpc({ show, onClose }) {
  return (
    <>
      <div
        id="backgroundPopup"
        className={`${show ? "active" : ""}`}
        onClick={onClose}
      ></div>
      <div
        className={`fixed w-[1400px] bg-white left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[999] ${
          show ? "" : "hidden"
        }`}
        id="js-modal-popup"
      >
        <div className="header-popup p-[10px] bg-[var(--color-global)] flex items-center justify-between">
          <b className="w-[205px] mr-[15px] text-white">Chọn linh kiện</b>

          <div className="w-[calc(100%-275px)] relative input-search">
            <form
              action="/search"
              enctype="text/plain"
              method="get"
              className="relative w-full h-[45px] bg-white rounded-[3px] overflow-hidden"
            >
              <input
                type="text"
                name="q"
                placeholder="Bạn cần tìm linh kiện gì..."
                className="search-input w-full h-full p-[0_10px] outline-none rounded-[8px] text-base"
              />
              <button
                type="submit"
                className="absolute right-[10px] top-[5px] w-[40px] h-[35px] pl-[10px]"
              >
                <i className="icon_2025 search "></i>
              </button>
            </form>
          </div>

          <a
            href="javascript:void(0)"
            onClick={onClose}
            className="w-[54px] flex items-center justify-end"
          >
            <i className="icon_2025 close brightness-0 invert-[1]"></i>
          </a>
        </div>
        <div className="content-popup p-[10px] bg-white">
          <div className="flex gap-[15px]">
            <div className="left w-[205px]">
              <b className="">230 sản phẩm</b>
              <div className="mt-3 title-filter flex items-center justify-between px-[20px] bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
                <b className="text-xl">Bộ lọc</b>
                <i className="icon_2025 filter"></i>
              </div>
              <div className="list-filter h-[calc(100vh-208px)] overflow-auto">
                <div className="item-filter mb-2.5">
                  <h3 className="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
                    Lọc theo
                  </h3>
                  <div className="mt-2.5 text-base leading-8 text-black">
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle1"
                        className="checkbox"
                      />
                      <label
                        for="vehicle1"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        Máy tính dành cho Máy tính dành cho
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle2"
                        className="checkbox"
                      />
                      <label
                        for="vehicle2"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        Máy tính dành cho
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle3"
                        className="checkbox"
                      />
                      <label
                        for="vehicle3"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        Máy tính dành cho
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle4"
                        className="checkbox"
                      />
                      <label
                        for="vehicle4"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        Máy tính dành cho
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle5"
                        className="checkbox"
                      />
                      <label
                        for="vehicle5"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        Máy tính dành cho
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle6"
                        className="checkbox"
                      />
                      <label
                        for="vehicle6"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        Máy tính dành cho
                      </label>
                    </a>
                  </div>
                </div>
                <div className="item-filter mb-2.5">
                  <h3 className="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
                    Lọc theo
                  </h3>
                  <div className="mt-2.5 grid grid-flow-col grid-rows-9 text-base leading-8 text-black">
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle1"
                        className="checkbox"
                      />
                      <label
                        for="vehicle1"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        All
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle2"
                        className="checkbox"
                      />
                      <label
                        for="vehicle2"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        32gb
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle3"
                        className="checkbox"
                      />
                      <label
                        for="vehicle3"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        64bg
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle4"
                        className="checkbox"
                      />
                      <label
                        for="vehicle4"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        16bg
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle5"
                        className="checkbox"
                      />
                      <label
                        for="vehicle5"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        12gb
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle6"
                        className="checkbox"
                      />
                      <label
                        for="vehicle6"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        4gb
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle6"
                        className="checkbox"
                      />
                      <label
                        for="vehicle6"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        2gb
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle6"
                        className="checkbox"
                      />
                      <label
                        for="vehicle6"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        24gb
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle2"
                        className="checkbox"
                      />
                      <label
                        for="vehicle2"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        32gb
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle3"
                        className="checkbox"
                      />
                      <label
                        for="vehicle3"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        64bg
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle4"
                        className="checkbox"
                      />
                      <label
                        for="vehicle4"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        16bg
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle5"
                        className="checkbox"
                      />
                      <label
                        for="vehicle5"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        12gb
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle6"
                        className="checkbox"
                      />
                      <label
                        for="vehicle6"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        4gb
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle6"
                        className="checkbox"
                      />
                      <label
                        for="vehicle6"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        2gb
                      </label>
                    </a>
                    <a href="" className="item flex items-center ">
                      <input
                        type="checkbox"
                        id="vehicle6"
                        className="checkbox"
                      />
                      <label
                        for="vehicle6"
                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
                      >
                        24gb
                      </label>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div className="right w-[calc(100%-220px)]">
              <div className="flex gap-[15px]">
                <a href="" className="text-[var(--color-hover)]">
                  Chọn tất cả
                </a>
                <a href="">Bỏ chọn tất cả</a>
                <a href="">So sánh sản phẩm đã chọn</a>
              </div>
              <div className="mt-3 relative z-[9] grid grid-cols-11 bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
                <b className="col-span-3 text-center">Tên</b>
                <b>Dung lượng</b>
                <b>Thế hệ</b>
                <b>Bộ nhớ</b>
                <b>Độ ồn</b>
                <b>Màu sắc</b>
                <b>Đánh giá</b>
                <b className="col-span-2">Thành tiền</b>
              </div>
              <div className="list mt-3 h-[calc(100vh-208px)] overflow-auto">
                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
                  <div className="col-span-3">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        className="checkbox w-[24px] mx-[20px]"
                      />
                      <a
                        href=""
                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
                      >
                        <img
                          src="/assets/images/lienkien-ram.png"
                          width="100%"
                          height="100%"
                          className="block w-full h-full object-contain"
                          alt=""
                        />
                      </a>
                      <a
                        href=""
                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
                      >
                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                      </a>
                    </div>
                  </div>
                  <div className="text-center">8bg</div>
                  <div className="">5</div>
                  <div>GDDR5</div>
                  <div className="text-center">5db</div>
                  <div>Đen</div>
                  <div className="flex items-center">
                    <i className="icon_star star4"></i>
                    <span className="ml-[5px]">(125)</span>
                  </div>
                  <div className="col-span-2 flex items-center justify-between">
                    <div className="price">3.400.000đ</div>
                    <a
                      href=""
                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
                    >
                      Add
                    </a>
                  </div>
                </div>
                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
                  <div className="col-span-3">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        className="checkbox w-[24px] mx-[20px]"
                      />
                      <a
                        href=""
                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
                      >
                        <img
                          src="/assets/images/lienkien-ram.png"
                          width="100%"
                          height="100%"
                          className="block w-full h-full object-contain"
                          alt=""
                        />
                      </a>
                      <a
                        href=""
                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
                      >
                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                      </a>
                    </div>
                  </div>
                  <div className="text-center">8bg</div>
                  <div className="">5</div>
                  <div>GDDR5</div>
                  <div className="text-center">5db</div>
                  <div>Đen</div>
                  <div className="flex items-center">
                    <i className="icon_star star4"></i>
                    <span className="ml-[5px]">(125)</span>
                  </div>
                  <div className="col-span-2 flex items-center justify-between">
                    <div className="price">3.400.000đ</div>
                    <a
                      href=""
                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
                    >
                      Add
                    </a>
                  </div>
                </div>
                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
                  <div className="col-span-3">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        className="checkbox w-[24px] mx-[20px]"
                      />
                      <a
                        href=""
                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
                      >
                        <img
                          src="/assets/images/lienkien-ram.png"
                          width="100%"
                          height="100%"
                          className="block w-full h-full object-contain"
                          alt=""
                        />
                      </a>
                      <a
                        href=""
                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
                      >
                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                      </a>
                    </div>
                  </div>
                  <div className="text-center">8bg</div>
                  <div className="">5</div>
                  <div>GDDR5</div>
                  <div className="text-center">5db</div>
                  <div>Đen</div>
                  <div className="flex items-center">
                    <i className="icon_star star4"></i>
                    <span className="ml-[5px]">(125)</span>
                  </div>
                  <div className="col-span-2 flex items-center justify-between">
                    <div className="price">3.400.000đ</div>
                    <a
                      href=""
                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
                    >
                      Add
                    </a>
                  </div>
                </div>
                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
                  <div className="col-span-3">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        className="checkbox w-[24px] mx-[20px]"
                      />
                      <a
                        href=""
                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
                      >
                        <img
                          src="/assets/images/lienkien-ram.png"
                          width="100%"
                          height="100%"
                          className="block w-full h-full object-contain"
                          alt=""
                        />
                      </a>
                      <a
                        href=""
                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
                      >
                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                      </a>
                    </div>
                  </div>
                  <div className="text-center">8bg</div>
                  <div className="">5</div>
                  <div>GDDR5</div>
                  <div className="text-center">5db</div>
                  <div>Đen</div>
                  <div className="flex items-center">
                    <i className="icon_star star4"></i>
                    <span className="ml-[5px]">(125)</span>
                  </div>
                  <div className="col-span-2 flex items-center justify-between">
                    <div className="price">3.400.000đ</div>
                    <a
                      href=""
                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
                    >
                      Add
                    </a>
                  </div>
                </div>
                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
                  <div className="col-span-3">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        className="checkbox w-[24px] mx-[20px]"
                      />
                      <a
                        href=""
                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
                      >
                        <img
                          src="/assets/images/lienkien-ram.png"
                          width="100%"
                          height="100%"
                          className="block w-full h-full object-contain"
                          alt=""
                        />
                      </a>
                      <a
                        href=""
                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
                      >
                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                      </a>
                    </div>
                  </div>
                  <div className="text-center">8bg</div>
                  <div className="">5</div>
                  <div>GDDR5</div>
                  <div className="text-center">5db</div>
                  <div>Đen</div>
                  <div className="flex items-center">
                    <i className="icon_star star4"></i>
                    <span className="ml-[5px]">(125)</span>
                  </div>
                  <div className="col-span-2 flex items-center justify-between">
                    <div className="price">3.400.000đ</div>
                    <a
                      href=""
                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
                    >
                      Add
                    </a>
                  </div>
                </div>
                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
                  <div className="col-span-3">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        className="checkbox w-[24px] mx-[20px]"
                      />
                      <a
                        href=""
                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
                      >
                        <img
                          src="/assets/images/lienkien-ram.png"
                          width="100%"
                          height="100%"
                          className="block w-full h-full object-contain"
                          alt=""
                        />
                      </a>
                      <a
                        href=""
                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
                      >
                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                      </a>
                    </div>
                  </div>
                  <div className="text-center">8bg</div>
                  <div className="">5</div>
                  <div>GDDR5</div>
                  <div className="text-center">5db</div>
                  <div>Đen</div>
                  <div className="flex items-center">
                    <i className="icon_star star4"></i>
                    <span className="ml-[5px]">(125)</span>
                  </div>
                  <div className="col-span-2 flex items-center justify-between">
                    <div className="price">3.400.000đ</div>
                    <a
                      href=""
                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
                    >
                      Add
                    </a>
                  </div>
                </div>
                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
                  <div className="col-span-3">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        className="checkbox w-[24px] mx-[20px]"
                      />
                      <a
                        href=""
                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
                      >
                        <img
                          src="/assets/images/lienkien-ram.png"
                          width="100%"
                          height="100%"
                          className="block w-full h-full object-contain"
                          alt=""
                        />
                      </a>
                      <a
                        href=""
                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
                      >
                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                      </a>
                    </div>
                  </div>
                  <div className="text-center">8bg</div>
                  <div className="">5</div>
                  <div>GDDR5</div>
                  <div className="text-center">5db</div>
                  <div>Đen</div>
                  <div className="flex items-center">
                    <i className="icon_star star4"></i>
                    <span className="ml-[5px]">(125)</span>
                  </div>
                  <div className="col-span-2 flex items-center justify-between">
                    <div className="price">3.400.000đ</div>
                    <a
                      href=""
                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
                    >
                      Add
                    </a>
                  </div>
                </div>
                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
                  <div className="col-span-3">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        className="checkbox w-[24px] mx-[20px]"
                      />
                      <a
                        href=""
                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
                      >
                        <img
                          src="/assets/images/lienkien-ram.png"
                          width="100%"
                          height="100%"
                          className="block w-full h-full object-contain"
                          alt=""
                        />
                      </a>
                      <a
                        href=""
                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
                      >
                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                      </a>
                    </div>
                  </div>
                  <div className="text-center">8bg</div>
                  <div className="">5</div>
                  <div>GDDR5</div>
                  <div className="text-center">5db</div>
                  <div>Đen</div>
                  <div className="flex items-center">
                    <i className="icon_star star4"></i>
                    <span className="ml-[5px]">(125)</span>
                  </div>
                  <div className="col-span-2 flex items-center justify-between">
                    <div className="price">3.400.000đ</div>
                    <a
                      href=""
                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
                    >
                      Add
                    </a>
                  </div>
                </div>
                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
                  <div className="col-span-3">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        className="checkbox w-[24px] mx-[20px]"
                      />
                      <a
                        href=""
                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
                      >
                        <img
                          src="/assets/images/lienkien-ram.png"
                          width="100%"
                          height="100%"
                          className="block w-full h-full object-contain"
                          alt=""
                        />
                      </a>
                      <a
                        href=""
                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
                      >
                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                      </a>
                    </div>
                  </div>
                  <div className="text-center">8bg</div>
                  <div className="">5</div>
                  <div>GDDR5</div>
                  <div className="text-center">5db</div>
                  <div>Đen</div>
                  <div className="flex items-center">
                    <i className="icon_star star4"></i>
                    <span className="ml-[5px]">(125)</span>
                  </div>
                  <div className="col-span-2 flex items-center justify-between">
                    <div className="price">3.400.000đ</div>
                    <a
                      href=""
                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
                    >
                      Add
                    </a>
                  </div>
                </div>
                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
                  <div className="col-span-3">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        className="checkbox w-[24px] mx-[20px]"
                      />
                      <a
                        href=""
                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
                      >
                        <img
                          src="/assets/images/lienkien-ram.png"
                          width="100%"
                          height="100%"
                          className="block w-full h-full object-contain"
                          alt=""
                        />
                      </a>
                      <a
                        href=""
                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
                      >
                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                      </a>
                    </div>
                  </div>
                  <div className="text-center">8bg</div>
                  <div className="">5</div>
                  <div>GDDR5</div>
                  <div className="text-center">5db</div>
                  <div>Đen</div>
                  <div className="flex items-center">
                    <i className="icon_star star4"></i>
                    <span className="ml-[5px]">(125)</span>
                  </div>
                  <div className="col-span-2 flex items-center justify-between">
                    <div className="price">3.400.000đ</div>
                    <a
                      href=""
                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
                    >
                      Add
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
