react-icons/ri#RiShoppingCart2Fill TypeScript Examples

The following examples show how to use react-icons/ri#RiShoppingCart2Fill. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From webapis-playground with MIT License 4 votes vote down vote up 
function WebPayments() {
  if (!hasSupport()) {
    return <NotSupported />;
  }

  return (
    <React.Fragment>
      <span
        className="
          tw-block
          tw-text-base
          tw-italic
          tw-mb-8
        "
      >
        Feel free to try out this information for purchase(Dont worry, it is all
        FAKE!!! ?)
      </span>
      <div
        className="
        tw-shadow
        tw-overflow-hidden
        tw-border-b 
        tw-border-gray-200
        sm:tw-rounded-lg
      "
      >
        <table
          className="
          tw-w-full
          tw-min-w-full
          tw-divide-y
          tw-divide-gray-200
        "
        >
          <thead className="tw-bg-gray-100">
            <tr>
              <th
                scope="col"
                className="
                tw-px-6
                tw-py-3
                tw-text-left
                tw-text-xs
                tw-font-medium
                tw-text-gray-500
                tw-uppercase
                tw-tracking-wider
              "
              >
                Property
              </th>
              <th
                scope="col"
                className="
                tw-px-6
                tw-py-3
                tw-text-left
                tw-text-xs
                tw-font-medium
                tw-text-gray-500
                tw-uppercase
                tw-tracking-wider
              "
              >
                Value
              </th>
            </tr>
          </thead>
          <tbody
            className="
          tw-bg-white
            tw-divide-y
            tw-divide-gray-200
          "
          >
            <tr>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <div
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  Credit Card Number
                </div>
              </td>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <span
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  5115883692618333
                </span>
              </td>
            </tr>
            <tr className="tw-bg-gray-50">
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <div
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  Name on the Card
                </div>
              </td>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <span
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  Jhon Doe
                </span>
              </td>
            </tr>
            <tr>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <div
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  Card Expiry
                </div>
              </td>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <span
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  3020
                </span>
              </td>
            </tr>
            <tr className="tw-bg-gray-50">
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <div
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  CVV
                </div>
              </td>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <span
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  007
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <span id="js-payment--message"></span>
      <div className="tw-flex tw-mt-4 tw-justify-end">
        <Button leftIcon={<RiShoppingCart2Fill />} onClick={run}>
          Click here to buy
        </Button>
      </div>
    </React.Fragment>
  );
}