coderhood-ui
Version:
UI Library
3 lines (2 loc) • 4.52 kB
JavaScript
"use strict";var r=require("react");function n(r,n){void 0===n&&(n={});var t=n.insertAt;if(r&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(document.createTextNode(r))}}n('@import url(\'https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap\');\r\n\r\n.glitch-btn {\r\n --glitch-content: "Cyberpunk Glitch";\r\n --glitch1-color: #ff0000;\r\n --glitch2-color: #00ffff;\r\n --color : #ffd700;\r\n position: relative;\r\n padding: 15px 40px;\r\n font-size: 24px;\r\n font-family: "Orbitron", sans-serif;\r\n color: var(--color);\r\n background: transparent;\r\n border: 3px solid var(--color);;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n transition: 0.3s ease;\r\n}\r\n\r\n.glitch-btn:hover {\r\n background: rgba(255, 215, 0, 0.1); /* Default fallback */\r\n background: color-mix(in srgb, var(--glitch-color) 10%, transparent);\r\n}\r\n\r\n\r\n.glitch-btn.glitch::before,\r\n.glitch-btn.glitch::after {\r\n content: var(--glitch-content);\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: transparent;\r\n text-align: center;\r\n text-transform: uppercase;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.glitch-btn.glitch::before {\r\n top: 5px;\r\n left: -10px;\r\n color: var(--glitch1-color);\r\n border: 3px solid var(--glitch1-color);\r\n animation: glitch-move 0.1s infinite;\r\n}\r\n\r\n.glitch-btn.glitch::after {\r\n top: -10px;\r\n left: 5px;\r\n color: var(--glitch2-color);\r\n border: 3px solid var(--glitch2-color);;\r\n animation: glitch-move 0.1s infinite reverse;\r\n}\r\n\r\n\r\n@keyframes glitch-move {\r\n 0% {\r\n transform: translateX(5px);\r\n }\r\n\r\n 25% {\r\n transform: translateX(-5px);\r\n }\r\n\r\n 50% {\r\n transform: translateX(5px);\r\n }\r\n\r\n 75% {\r\n transform: translateX(-5px);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n}');n(".orbit-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.orbit-spinner {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 3px solid transparent;\r\n animation: orbit-spin 1s linear infinite;\r\n box-sizing: border-box;\r\n}\r\n\r\n.orbit-inner-spinner {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 3px solid transparent;\r\n animation: orbit-spin-reverse 1.5s linear infinite;\r\n box-sizing: border-box;\r\n}\r\n\r\n@keyframes orbit-spin {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n@keyframes orbit-spin-reverse {\r\n 0% {\r\n transform: rotate(360deg);\r\n }\r\n\r\n 100% {\r\n transform: rotate(0deg);\r\n }\r\n}"),exports.GlitchButton=function({children:n="Cyberpunk Glitch",onClick:t=()=>{},className:e="",style:o={},font:i="Orbitron",color:s="#ffd700",glitchColor1:a="#ff0000",glitchColor2:l="#00ffff",glitchTime:c=250,...p}){const f=r.useRef(null);return r.useEffect((()=>{f.current&&(f.current.style.setProperty("--glitch-content",`"${n}"`),f.current.style.setProperty("--glitch1-color",a),f.current.style.setProperty("--glitch2-color",l),f.current.style.setProperty("--color",s),f.current.classList.remove("glitch"))}),[n]),r.createElement("button",{ref:f,className:`glitch-btn ${e}`,style:{fontFamily:i,color:s,borderColor:s,...o},onClick:r=>{var n;(n=r.currentTarget).classList.add("glitch"),setTimeout((()=>n.classList.remove("glitch")),c),setTimeout((()=>{t()}),c)}},n)},exports.LoaderOrbiter=function({size:n=60,outerColor:t="#ff69b4",innerColor:e="#b000e8",active:o=!0,rotationDuration:i=1}){const s={width:`${n}px`,height:`${n}px`,borderTopColor:t,animationDuration:`${i}s`},a=.7*n,l={width:`${a}px`,height:`${a}px`,borderBottomColor:e,animationDuration:1.5*i+"s"};return r.createElement("div",{className:"orbit-wrapper",style:{width:`${n}px`,height:`${n}px`,display:o?"flex":"none"}},r.createElement("div",{className:"orbit-spinner",style:s}),r.createElement("div",{className:"orbit-inner-spinner",style:l}))};
//# sourceMappingURL=index.js.map