@zendesk/react-measure-timing-hooks/cjs/v3/visualizer/components/FileUploadButton.js

react hooks for measuring time to interactive and time to render of components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const FileUploadButton = ({ name, id, onChange }) => (react_1.default.createElement(react_1.default.Fragment, null,
    react_1.default.createElement("div", { className: "file-loader" },
        react_1.default.createElement("label", { htmlFor: id, className: "file-input" },
            "Upload File",
            react_1.default.createElement("input", { className: "file-input", type: "file", name: name, id: id, onChange: onChange }))),
    react_1.default.createElement("style", null, `
    .file-loader {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .file-input {
        font-family: sans-serif;
        font-size: 1.5rem;
        background: lightblue;
        padding: 1rem;
        border-radius: .5rem;
        transition: background .2s ease-out;
    }
    .file-input:hover {
        cursor: pointer;
        background: lightgreen;
    }
    .file-input input {
        display: none;
    }
  `)));
// eslint-disable-next-line import/no-default-export
exports.default = FileUploadButton;
//# sourceMappingURL=FileUploadButton.js.map