151 lines
6.5 KiB
JavaScript
151 lines
6.5 KiB
JavaScript
"use strict";
|
|
exports.id = 2434;
|
|
exports.ids = [2434];
|
|
exports.modules = {
|
|
|
|
/***/ 1095:
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "Z": () => (/* binding */ CodeBlock)
|
|
/* harmony export */ });
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
/* harmony import */ var _mui_icons_material_ContentCopy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6843);
|
|
/* harmony import */ var _mui_icons_material_ContentCopy__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_mui_icons_material_ContentCopy__WEBPACK_IMPORTED_MODULE_2__);
|
|
/* harmony import */ var _mui_material_Snackbar__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9174);
|
|
/* harmony import */ var _mui_material_Snackbar__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_mui_material_Snackbar__WEBPACK_IMPORTED_MODULE_3__);
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {{
|
|
* content: string,
|
|
* language: string,
|
|
* style?: React.CSSProperties,
|
|
* }} props - React component props including { children }
|
|
*/ function CodeBlock({ content , language , style }) {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ const [open, setOpen] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false);
|
|
const handleClick = ()=>{
|
|
setOpen(true);
|
|
};
|
|
/**
|
|
* ## Handle Close
|
|
* @param {*} event
|
|
* @param {*} reason
|
|
* @returns
|
|
*/ const handleClose = (event, reason)=>{
|
|
if (reason === "clickaway") {
|
|
return;
|
|
}
|
|
setOpen(false);
|
|
};
|
|
const action = /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|
className: "outlined gray",
|
|
style: {
|
|
border: "none",
|
|
padding: "2px",
|
|
width: "20px",
|
|
height: "20px",
|
|
color: "white"
|
|
},
|
|
// @ts-ignore
|
|
onClick: handleClose,
|
|
children: "✖"
|
|
})
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("pre", {
|
|
className: `language-${language ? language : "javascript"} w-full overflow-hidden code-block relative max-w-4xl`,
|
|
style: style ? style : {},
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("code", {
|
|
className: `w-full`,
|
|
style: {
|
|
wordBreak: "break-all"
|
|
},
|
|
children: content
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|
className: "outlined absolute top-2 right-2 z-20 copy-code hover:opacity-50",
|
|
style: {
|
|
padding: "2px",
|
|
border: "none"
|
|
},
|
|
onClick: (/** @type {any} */ e)=>{
|
|
navigator.clipboard.writeText(content).then(()=>{
|
|
handleClick();
|
|
});
|
|
},
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((_mui_icons_material_ContentCopy__WEBPACK_IMPORTED_MODULE_2___default()), {
|
|
fontSize: "small",
|
|
color: "action"
|
|
})
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((_mui_material_Snackbar__WEBPACK_IMPORTED_MODULE_3___default()), {
|
|
open: open,
|
|
autoHideDuration: 2000,
|
|
onClose: handleClose,
|
|
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "h-full text-white px-4 py-2 justify-between rounded",
|
|
style: {
|
|
maxWidth: "250px",
|
|
width: "250px",
|
|
backgroundColor: "#0b8862"
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|
children: "Code Copied!"
|
|
}),
|
|
action
|
|
]
|
|
})
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
}
|
|
|
|
|
|
/***/ })
|
|
|
|
};
|
|
; |