oceanic-transcripts
Version:
A nicely formatted html transcript generator for oceanic.js.
56 lines • 2.39 kB
JavaScript
"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 DiscordAttachmentSpoiler = ({ children }) => {
const spoilerId = `spoiler-${Math.random().toString(36).substring(2, 11)}`;
return (react_1.default.createElement("div", { className: "spoiler-container", style: {
position: 'relative',
width: '100%',
maxWidth: '500px',
borderRadius: '8px',
overflow: 'hidden',
} },
react_1.default.createElement("div", { style: { width: '100%' } }, children),
react_1.default.createElement("div", { className: "spoiler-control" },
react_1.default.createElement("input", { type: "checkbox", id: spoilerId, className: "spoiler-checkbox", style: {
position: 'absolute',
opacity: 0,
width: '1px',
height: '1px',
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0, 0, 0, 0)',
whiteSpace: 'nowrap',
border: 0,
zIndex: -1,
} }),
react_1.default.createElement("label", { htmlFor: spoilerId, className: "spoiler-label", style: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#4f5359',
color: '#ffffff',
fontSize: '14px',
fontWeight: '500',
cursor: 'pointer',
zIndex: 2,
userSelect: 'none',
} }, "SPOILER")),
react_1.default.createElement("style", { dangerouslySetInnerHTML: {
__html: `
.spoiler-checkbox:checked + .spoiler-label {
display: none !important;
}
`,
} })));
};
exports.default = DiscordAttachmentSpoiler;
//# sourceMappingURL=AttachmentSpoiler.js.map