pankod/refine

View on GitHub
packages/inferencer/src/inferencers/chakra-ui/__tests__/__snapshots__/list.test.tsx.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ChakraListInferencer should match the snapshot 1`] = `
<DocumentFragment>
  <div>
    <div
      class="css-1kekcgk"
    >
      <div
        class="css-15izviv"
      >
        <div
          class="css-gqssyb"
        >
          <h3
            class="chakra-heading refine-pageHeader-title css-0"
          >
            Posts
          </h3>
        </div>
        <div
          class="css-i08qke"
        />
      </div>
      <div
        class="css-0"
      >
        <div
          class="chakra-table__container css-1rcznqn"
        >
          <table
            class="chakra-table css-0"
          >
            <thead
              class="css-0"
            >
              <tr
                class="css-0"
              >
                <th
                  class="css-0"
                >
                  Id
                </th>
                <th
                  class="css-0"
                >
                  Title
                </th>
                <th
                  class="css-0"
                >
                  Slug
                </th>
                <th
                  class="css-0"
                >
                  Content
                </th>
                <th
                  class="css-0"
                >
                  Hit
                </th>
                <th
                  class="css-0"
                >
                  Category
                </th>
                <th
                  class="css-0"
                >
                  User
                </th>
                <th
                  class="css-0"
                >
                  Status
                </th>
                <th
                  class="css-0"
                >
                  Status Color
                </th>
                <th
                  class="css-0"
                >
                  Created At
                </th>
                <th
                  class="css-0"
                >
                  Published At
                </th>
                <th
                  class="css-0"
                >
                  Image
                </th>
                <th
                  class="css-0"
                >
                  Tags
                </th>
                <th
                  class="css-0"
                >
                  Language
                </th>
              </tr>
            </thead>
            <tbody
              class="css-0"
            >
              <tr
                class="css-0"
              >
                <td
                  class="css-0"
                >
                  11
                </td>
                <td
                  class="css-0"
                >
                  Nobis exercitationem officia quia est.
                </td>
                <td
                  class="css-0"
                >
                  provident-culpa-facere
                </td>
                <td
                  class="css-0"
                >
                  <p>
                    Non velit blanditiis optio quo quaerat nam aperiam. Odit tempore consequatur vol...
                  </p>
                </td>
                <td
                  class="css-0"
                >
                  920557
                </td>
                <td
                  class="css-0"
                >
                  Numquam Saepe Illo
                </td>
                <td
                  class="css-0"
                >
                  Eriberto Leannon
                </td>
                <td
                  class="css-0"
                >
                  draft
                </td>
                <td
                  class="css-0"
                >
                  orange
                </td>
                <td
                  class="css-0"
                >
                  <p
                    class="chakra-text css-0"
                  >
                    04/02/2022
                  </p>
                </td>
                <td
                  class="css-0"
                >
                  <p
                    class="chakra-text css-0"
                  >
                    08/10/2021
                  </p>
                </td>
                <td
                  class="css-0"
                >
                  <div
                    class="chakra-stack css-1igwmid"
                  >
                    <img
                      class="chakra-image css-1cooswl"
                      src="http://loremflickr.com/640/480/abstract"
                    />
                  </div>
                </td>
                <td
                  class="css-0"
                >
                  <div
                    class="chakra-stack css-1igwmid"
                  >
                    <span
                      class="css-1qm7lvz"
                    >
                      Nobis Et Ut
                    </span>
                  </div>
                </td>
                <td
                  class="css-0"
                >
                  2
                </td>
              </tr>
              <tr
                class="css-0"
              >
                <td
                  class="css-0"
                >
                  21
                </td>
                <td
                  class="css-0"
                >
                  Eaque in nesciunt.
                </td>
                <td
                  class="css-0"
                >
                  quod-quos-commodi
                </td>
                <td
                  class="css-0"
                >
                  <p>
                    Ut velit quo. Sed beatae et sit ea. Perferendis pariatur doloremque deleniti sap...
                  </p>
                </td>
                <td
                  class="css-0"
                >
                  175149
                </td>
                <td
                  class="css-0"
                >
                  Sit Natus Voluptatibus
                </td>
                <td
                  class="css-0"
                >
                  Tressie Reichel
                </td>
                <td
                  class="css-0"
                >
                  published
                </td>
                <td
                  class="css-0"
                >
                  lime
                </td>
                <td
                  class="css-0"
                >
                  <p
                    class="chakra-text css-0"
                  >
                    09/24/2022
                  </p>
                </td>
                <td
                  class="css-0"
                >
                  <p
                    class="chakra-text css-0"
                  >
                    09/01/2021
                  </p>
                </td>
                <td
                  class="css-0"
                >
                  <div
                    class="chakra-stack css-1igwmid"
                  >
                    <img
                      class="chakra-image css-1cooswl"
                      src="http://loremflickr.com/640/480/abstract"
                    />
                  </div>
                </td>
                <td
                  class="css-0"
                >
                  <div
                    class="chakra-stack css-1igwmid"
                  >
                    <span
                      class="css-1qm7lvz"
                    >
                      Error Eos Et
                    </span>
                    <span
                      class="css-1qm7lvz"
                    >
                      Nobis Et Ut
                    </span>
                  </div>
                </td>
                <td
                  class="css-0"
                >
                  2
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="css-1bvc4cc"
        >
          <div
            class="chakra-stack css-cfcsvg"
          >
            <button
              class="chakra-button css-4xx2wk"
              type="button"
            >
              1
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="refine-inferencer--code-viewer"
    style="position: sticky; bottom: 24px; padding-top: 24px; left: 0px; right: 0px; width: 100%; z-index: 10; display: flex; justify-content: center; transition: all 0.2s ease; opacity: 1; transform: translateY(0);"
  >
    <div
      style="max-width: 1080px; padding: 20px; background-color: rgb(26, 26, 26); box-shadow: 0px 4px 16px -4px rgba(0, 0, 0, 0.5), 0px 8px 32px -8px rgba(0, 0, 0, 0.35); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: 12px;"
    >
      <div
        style="display: flex; align-items: flex-start; gap: 8px;"
      >
        <div>
          <svg
            fill="none"
            height="20"
            width="20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              clip-rule="evenodd"
              d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10Zm0-15a1.25 1.25 0 1 0 0 2.5A1.25 1.25 0 0 0 10 5Zm0 10c.69 0 1.25-.56 1.25-1.25V10a1.25 1.25 0 1 0-2.5 0v3.75c0 .69.56 1.25 1.25 1.25Z"
              fill="#0080FF"
              fill-rule="evenodd"
            />
          </svg>
        </div>
        <div
          style="font-size: 14px; line-height: 20px; color: rgb(255, 255, 255);"
        >
          <p
            style="padding: 0px; margin: 0px;"
          >
            Most of the page code is auto-generated by the 
            <span
              style="text-decoration: underline;"
            >
              Inferencer
            </span>
             feature, based on your backend data structure.
          </p>
          <p
            style="padding: 0px; margin: 0px;"
          >
            While this is an excellent way to experiment with refine, 
            <span
              style="font-weight: 600;"
            >
              it's not intended to be used on production.
            </span>
          </p>
        </div>
      </div>
      <div>
        <button
          style="appearance: none; padding: 10px 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: rgb(0, 128, 255); color: rgb(255, 255, 255); font-size: 14px; line-height: 20px; font-weight: 600; gap: 8px; cursor: pointer; transition: all 0.2s ease;"
        >
          <svg
            fill="none"
            height="16"
            style="flex-shrink: 0;"
            width="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M5 2a1 1 0 0 1 0 2H4v8h8v-1a1 1 0 1 1 2 0v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1Z"
              fill="currentColor"
            />
            <path
              d="M9 2a1 1 0 0 0 0 2h1.586L6.293 8.293a1 1 0 0 0 1.414 1.414L12 5.414V7a1 1 0 1 0 2 0V3a1 1 0 0 0-1-1H9Z"
              fill="currentColor"
            />
          </svg>
          <span>
            Show the auto-generated code
          </span>
        </button>
      </div>
    </div>
  </div>
  <div
    class="refine-inferencer--code-viewer-modal"
    style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); transition: all 0.2s ease; opacity: 0; pointer-events: none; display: flex; justify-content: center; align-items: center;"
  >
    <div
      style="transform: scale(0) translateY(-200px); transition: all 0.25s cubic-bezier(.35,1.29,.81,1.08); transition-delay: 0.25; background-color: rgb(255, 255, 255); max-width: 640px; max-height: 720px; border-radius: 8px; padding: 16px;"
    >
      <div
        style="display: flex; flex-direction: column; height: 100%; width: 100%; gap: 16px;"
      >
        <div
          style="display: flex; justify-content: space-between; align-items: center;"
        >
          <div
            style="font-weight: 700; font-size: 20px; line-height: 32px; color: rgb(13, 13, 13);"
          >
            Auto-generated code by Inferencer
          </div>
          <button
            style="flex-shrink: 0; appearance: none; background: none; padding: 0px; margin: 0px; outline: none; border-radius: 50px; width: 32px; height: 32px; cursor: pointer; transition: all 0.15s ease;"
          >
            <svg
              fill="none"
              height="32"
              width="32"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16Zm-2.586-21.414a2 2 0 1 0-2.828 2.828L13.172 16l-2.586 2.586a2 2 0 1 0 2.828 2.828L16 18.828l2.586 2.586a2 2 0 1 0 2.828-2.828L18.828 16l2.586-2.586a2 2 0 1 0-2.828-2.828L16 13.172l-2.586-2.586Z"
                fill="#A6A6A6"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
        <div
          style="font-size: 13px; border-radius: 8px; flex: 1; overflow: scroll; background: rgb(30, 30, 30);"
        >
          <pre
            class="prism-code language-tsx"
            style="color: rgb(156, 220, 254); background-color: rgb(30, 30, 30); padding: 14px 14px 14px 14px; margin: 0px; width: 100%; box-sizing: border-box;"
          >
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                import
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token imports maybe-class-name"
              >
                React
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                from
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "react"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                import
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token imports"
              >
                 useTable 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                from
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "@refinedev/react-table"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                import
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports maybe-class-name"
              >
                ColumnDef
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              >
                 flexRender 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                from
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "@tanstack/react-table"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                import
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                List
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    usePagination
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                MarkdownField
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                DateField
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                TagField
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              />
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                from
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "@refinedev/chakra-ui"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                import
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                TableContainer
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Table
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Thead
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Tr
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Th
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Tbody
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Td
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                HStack
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Button
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                IconButton
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Box
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              >
                    
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Image
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token imports"
              />
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                from
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "@chakra-ui/react"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                import
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports maybe-class-name"
              >
                IconChevronRight
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports maybe-class-name"
              >
                IconChevronLeft
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                from
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "@tabler/icons-react"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                import
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports maybe-class-name"
              >
                GetManyResponse
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              >
                 useMany 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                from
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "@refinedev/core"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                export
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function-variable function"
                style="color: rgb(220, 220, 170);"
              >
                PostList
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 columns 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token maybe-class-name"
              >
                React
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                useMemo
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token maybe-class-name"
              >
                ColumnDef
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                [
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ]
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                [
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "id"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "id"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Id"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "title"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "title"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Title"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "slug"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "slug"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Slug"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "content"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "content"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Content"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token function-variable function"
                style="color: rgb(220, 220, 170);"
              >
                cell
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                function
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                render
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 getValue 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                MarkdownField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                value
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript generic-function function"
                style="color: rgb(220, 220, 170);"
              >
                getValue
              </span>
              <span
                class="token tag script language-javascript generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag script language-javascript generic-function generic class-name builtin"
                style="color: rgb(86, 156, 214);"
              >
                string
              </span>
              <span
                class="token tag script language-javascript generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                slice
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript number"
                style="color: rgb(181, 206, 168);"
              >
                0
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript number"
                style="color: rgb(181, 206, 168);"
              >
                80
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                +
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                "..."
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "hit"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "hit"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Hit"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "category"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Category"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "category.id"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token function-variable function"
                style="color: rgb(220, 220, 170);"
              >
                cell
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                function
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                render
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 getValue
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              >
                 table 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 meta 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 table
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                options
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                meta
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        categoryData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token maybe-class-name"
              >
                GetManyResponse
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 category 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 meta
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                categoryData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                data
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                find
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                item
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 item
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                id
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ==
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token generic-function function"
                style="color: rgb(220, 220, 170);"
              >
                getValue
              </span>
              <span
                class="token generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token generic-function generic class-name builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 category
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                title 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ??
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Loading..."
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "user"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "User"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "user.id"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token function-variable function"
                style="color: rgb(220, 220, 170);"
              >
                cell
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                function
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                render
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 getValue
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              >
                 table 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 meta 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 table
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                options
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                meta
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        userData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token maybe-class-name"
              >
                GetManyResponse
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 user 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 meta
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                userData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                data
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                find
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                item
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 item
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                id
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ==
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token generic-function function"
                style="color: rgb(220, 220, 170);"
              >
                getValue
              </span>
              <span
                class="token generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token generic-function generic class-name builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        user
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                firstName 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                +
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                " "
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                +
              </span>
              <span
                class="token plain"
              >
                 user
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                lastName 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ??
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Loading..."
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "status"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "status"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Status"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "status_color"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "status_color"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Status Color"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "createdAt"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "createdAt"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Created At"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token function-variable function"
                style="color: rgb(220, 220, 170);"
              >
                cell
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                function
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                render
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 getValue 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                DateField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                value
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript generic-function function"
                style="color: rgb(220, 220, 170);"
              >
                getValue
              </span>
              <span
                class="token tag script language-javascript generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag script language-javascript generic-function generic class-name builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "publishedAt"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "publishedAt"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Published At"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token function-variable function"
                style="color: rgb(220, 220, 170);"
              >
                cell
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                function
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                render
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 getValue 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                DateField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                value
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript generic-function function"
                style="color: rgb(220, 220, 170);"
              >
                getValue
              </span>
              <span
                class="token tag script language-javascript generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag script language-javascript generic-function generic class-name builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "image"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "image"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Image"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token function-variable function"
                style="color: rgb(220, 220, 170);"
              >
                cell
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                function
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                render
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 getValue 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                try
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                HStack
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token generic-function function"
                style="color: rgb(220, 220, 170);"
              >
                getValue
              </span>
              <span
                class="token generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token generic-function generic class-name builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token generic-function generic class-name punctuation"
                style="color: rgb(212, 212, 212);"
              >
                [
              </span>
              <span
                class="token generic-function generic class-name punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ]
              </span>
              <span
                class="token generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                item
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              >
                 index
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Image
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                                        
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                src
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                item
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                url
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                                        
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                key
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                index
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                                        
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                sx
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                            height
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                "50px"
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                            maxWidth
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                "100px"
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                        
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                HStack
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                catch
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                error
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                null
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "tags"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Tags"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "tags"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token function-variable function"
                style="color: rgb(220, 220, 170);"
              >
                cell
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                function
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                render
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 getValue
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              >
                 table 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 meta 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 table
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                options
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                meta
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        tagsData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token maybe-class-name"
              >
                GetManyResponse
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 tags 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token generic-function function"
                style="color: rgb(220, 220, 170);"
              >
                getValue
              </span>
              <span
                class="token generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token generic-function generic class-name builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token generic-function generic class-name punctuation"
                style="color: rgb(212, 212, 212);"
              >
                [
              </span>
              <span
                class="token generic-function generic class-name punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ]
              </span>
              <span
                class="token generic-function generic class-name operator"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                item
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 meta
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                tagsData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                data
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                find
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                resourceItems
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 resourceItems
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                id
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token plain"
              >
                 item
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                HStack
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                tags
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                item
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              >
                 index
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TagField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                key
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                index
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                value
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                item
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                title
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                HStack
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                id
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "language"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                accessorKey
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "language"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                header
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "Language"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ]
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                [
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ]
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        getHeaderGroups
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        getRowModel
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        setOptions
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        refineCore
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            setCurrent
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            pageCount
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            current
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            tableQueryResult
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 data
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 tableData 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                useTable
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        columns
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 data
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 categoryData 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                useMany
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        resource
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "categories"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        ids
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 tableData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                data
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                item
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 item
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                category
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                id
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ??
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                [
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ]
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        queryOptions
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            enabled
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token plain"
              >
                tableData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                data
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 data
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 userData 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                useMany
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        resource
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "users"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        ids
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 tableData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                data
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                item
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 item
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                user
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                id
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ??
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                [
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ]
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        queryOptions
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            enabled
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token plain"
              >
                tableData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                data
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 data
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 tagsData 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                useMany
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        resource
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "tags"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        ids
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                [
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ]
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                concat
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                tableData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                data
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                item
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 item
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                tags
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ??
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                [
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ]
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        queryOptions
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            enabled
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token plain"
              >
                tableData
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                data
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                setOptions
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                prev
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token plain"
              >
                prev
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        meta
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            
              </span>
              <span
                class="token spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token plain"
              >
                prev
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                meta
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            categoryData
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            userData
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                            tagsData
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                List
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TableContainer
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                whiteSpace
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                pre-line
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Table
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                variant
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                simple
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Thead
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                getHeaderGroups
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                headerGroup
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Tr
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                key
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                headerGroup
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token tag script language-javascript property-access"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                headerGroup
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                headers
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                header
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Th
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                key
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                header
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token tag script language-javascript property-access"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token plain"
              >
                header
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                isPlaceholder
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                &&
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                            
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                flexRender
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                                header
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                column
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                columnDef
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                header
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                                header
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                getContext
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Th
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Tr
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Thead
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Tbody
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                getRowModel
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                rows
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                row
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Tr
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                key
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                row
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token tag script language-javascript property-access"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                row
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                getVisibleCells
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                cell
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Td
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                key
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                cell
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token tag script language-javascript property-access"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                flexRender
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                            cell
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                column
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                columnDef
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token property-access"
              >
                cell
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                            cell
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                getContext
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Td
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Tr
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Tbody
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Table
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TableContainer
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Pagination
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                current
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                current
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                pageCount
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                pageCount
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                setCurrent
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                setCurrent
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                List
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                type
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token class-name"
                style="color: rgb(78, 201, 176);"
              >
                PaginationProps
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    current
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token builtin"
                style="color: rgb(86, 156, 214);"
              >
                number
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    pageCount
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token builtin"
                style="color: rgb(86, 156, 214);"
              >
                number
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token function-variable function"
                style="color: rgb(220, 220, 170);"
              >
                setCurrent
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                page
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token builtin"
                style="color: rgb(86, 156, 214);"
              >
                number
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                void
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token maybe-class-name"
              >
                Pagination
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token maybe-class-name"
              >
                React
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token constant"
                style="color: rgb(100, 102, 149);"
              >
                FC
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token maybe-class-name"
              >
                PaginationProps
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    current
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    pageCount
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    setCurrent
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 pagination 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                usePagination
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        current
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        pageCount
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Box
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                display
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                flex
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                justifyContent
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                flex-end
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                HStack
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                my
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                3
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                spacing
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                1
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                pagination
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                prev 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                &&
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                IconButton
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                aria-label
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                previous page
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                onClick
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript function"
                style="color: rgb(220, 220, 170);"
              >
                setCurrent
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                current 
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                -
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript number"
                style="color: rgb(181, 206, 168);"
              >
                1
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                disabled
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                pagination
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                prev
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                variant
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                outline
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                IconChevronLeft
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                size
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                18
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                IconButton
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                pagination
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                items
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              >
                page
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                if
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                typeof
              </span>
              <span
                class="token plain"
              >
                 page 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "string"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                span
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                key
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                page
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              >
                ...
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                span
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Button
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                key
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                page
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                onClick
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript function"
                style="color: rgb(220, 220, 170);"
              >
                setCurrent
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                page
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                variant
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                page 
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 current 
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                "solid"
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                "outline"
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                            
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                page
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Button
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                pagination
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token plain"
              >
                next 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                &&
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                IconButton
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                aria-label
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                next page
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                onClick
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript function"
                style="color: rgb(220, 220, 170);"
              >
                setCurrent
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                current 
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                +
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript number"
                style="color: rgb(181, 206, 168);"
              >
                1
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                variant
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                outline
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                IconChevronRight
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                size
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                18
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                    
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                IconButton
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                HStack
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Box
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
          </pre>
        </div>
        <div
          style="display: flex; justify-content: flex-start; align-items: flex-end; gap: 16px;"
        >
          <button
            style="appearance: none; height: 40px; padding: 10px 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: rgb(0, 128, 255); color: rgb(255, 255, 255); font-size: 14px; line-height: 20px; font-weight: 600; gap: 8px; cursor: pointer; position: relative; overflow: hidden; transition: filter 0.2s ease; transform: scale(1);"
          >
            <svg
              fill="none"
              height="20"
              style="flex-shrink: 0; margin-top: -2px; margin-bottom: -2px;"
              viewBox="0 0 24 24"
              width="20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M8 5a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h1Zm0 7a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2H9Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
              <path
                d="M13 4a1 1 0 1 1 0 2h-2a1 1 0 1 1 0-2h2Z"
                fill="currentColor"
              />
            </svg>
            <span>
              Copy Generated Code
            </span>
            <div
              style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center; background: rgb(0, 128, 255); transition: all 0.2s ease; transform: translateY(40px);"
            >
              <svg
                fill="none"
                height="20"
                style="flex-shrink: 0; margin-top: -2px; margin-bottom: -2px;"
                viewBox="0 0 24 24"
                width="20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M8 5a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h1Zm0 7a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2H9Z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
                <path
                  d="M13 4a1 1 0 1 1 0 2h-2a1 1 0 1 1 0-2h2Z"
                  fill="currentColor"
                />
              </svg>
              <span>
                Copied!
              </span>
            </div>
          </button>
          <a
            href="https://refine.dev/docs/packages/documentation/inferencer"
            rel="noreferrer"
            style="appearance: none; text-decoration: none; padding: 10px 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: rgba(0, 128, 255, 0.1); color: rgb(0, 128, 255); font-size: 14px; line-height: 20px; font-weight: 600; gap: 8px; cursor: pointer; transition: all 0.2s ease;"
            target="_blank"
          >
            <svg
              fill="none"
              height="16"
              style="flex-shrink: 0;"
              width="16"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M5 2a1 1 0 0 1 0 2H4v8h8v-1a1 1 0 1 1 2 0v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1Z"
                fill="currentColor"
              />
              <path
                d="M9 2a1 1 0 0 0 0 2h1.586L6.293 8.293a1 1 0 0 0 1.414 1.414L12 5.414V7a1 1 0 1 0 2 0V3a1 1 0 0 0-1-1H9Z"
                fill="currentColor"
              />
            </svg>
            <span>
              Learn more about inferencer
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;