"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 ] }) }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /***/ }) }; ;