84
 85  return (
 86    // apply the table props
 87    <> 88      <table className="checkoutTable" {...getTableProps()}> 89        <thead className="checkoutTable-head"> 90          { 91            // Loop over the header rows 92            headerGroups.map((headerGroup) => ( 93              // Apply the header row props 94              <tr 95                className="checkoutTable-head-row" 96                {...headerGroup.getHeaderGroupProps()} 97                key={nanoid()} 98              > 99                <th className="checkoutTable-head-row__cell delete">Delete</th>100101                {102                  // Loop over the headers in each row103                  headerGroup.headers.map((column) => (104                    // Apply the header cell props105                    <th106                      className="checkoutTable-head-row__cell"107                      {...column.getHeaderProps()}108                      key={nanoid()}109                    >110                      {111                        // Render the header112                        column.render("Header")113                      }114                    </th>115                  ))116                }117              </tr>118            ))119          }120        </thead>121        {/* Apply the table body props */}122        <tbody className="checkoutTable-body" {...getTableBodyProps()}>123          {124            // Loop over the table rows125            rows.map((row) => {126              // Prepare the row for display127              prepareRow(row);128              return (129                // Apply the row props130                <tr131                  className="checkoutTable-body-row"132                  {...row.getRowProps()}133                  key={nanoid()}134                >135                  <td className="checkoutTable-body-row__cell delete">136                    <Button137                      className="delete"138                      onClick={() => changeQuantity(row.original, 0)}139                    >140                      ❌141                    </Button>142                  </td>143                  {144                    // Loop over the rows cells145                    row.cells.map((cell) => {146                      // Apply the cell props147                      return (148                        <td149                          className="checkoutTable-body-row__cell"150                          {...cell.getCellProps()}151                          key={nanoid()}152                        >153                          {cell.column.id === "quantity" ? (154                            <form155                              className="quantity-actions"156                              //   onSubmit={(e) => {157                              //     e.preventDefault();158                              //     handleSubmit((data) => {159                              //       changeQuantity(row.original, data.quantity);160                              //     });161                              //   }}162                            >163                              <Button164                                className="quantity-actions__button"165                                onClick={() => {166                                  changeQuantity(row.original, 1, true);167                                }}168                              >169                                +170                              </Button>171                              <input172                                //   {...register("quantity")}173                                value={cell.value}174                                onChange={(e) => {175                                  changeQuantity(176                                    row.original,177                                    parseInt(e.target.value)178                                  );179                                }}180                                onBlur={(e) => {181                                  console.log("blur");182                                }}183                                type="number"184                              />185                              <Button186                                className="quantity-actions__button"187                                onClick={() => {188                                  changeQuantity(row.original, -1, true);189                                }}190                              >191                                --192                              </Button>193                            </form>194                          ) : cell.column.id === "total" ||195                            cell.column.id === "price" ? (196                            `$${cell.value}`197                          ) : (198                            cell.render("Cell")199                          )}200                        </td>201                      );202                    })203                  }204                </tr>205              );206            })207          }208        </tbody>209      </table>210    </>211  );
212};
213

12}
13const Modal = ({ children, onClose, onSubmit, title, width }: Props) => {
14  return createPortal(
15    <>16      <div className="container" style={{ width: "100%" }}>17        <div className="modal" style={{ width: width }}>18          <header className="modal__title">19            <p>{title}</p>20            <Button backgroundColor="white" onClick={onClose}>21              ❌22            </Button>23          </header>24          <main className="modal__content">{children}</main>25          <footer className="footer">26            <Button onClick={onClose}>Cancel</Button>27            <Button primary backgroundColor="#153851" onClick={onSubmit}>28              Submit29            </Button>30          </footer>31        </div>32      </div>33    </>,34    document.body
35  );
36};

51              </Button>
52            </>
53          ) : (
54            <>55              <Button size="small" primary onClick={onLogin}>56                Log in57              </Button>58            </>59          )}
60        </div>
61      </div>