coderhood-ui
Version:
UI Library
3 lines (2 loc) • 4.53 kB
JavaScript
import r,{useRef as n,useEffect as t}from"react";function e(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))}}function o({children:e="Cyberpunk Glitch",onClick:o=()=>{},className:i="",style:a={},font:l="Orbitron",color:s="#ffd700",glitchColor1:c="#ff0000",glitchColor2:p="#00ffff",glitchTime:f=250,...d}){const g=n(null);t((()=>{g.current&&(g.current.style.setProperty("--glitch-content",`"${e}"`),g.current.style.setProperty("--glitch1-color",c),g.current.style.setProperty("--glitch2-color",p),g.current.style.setProperty("--color",s),g.current.classList.remove("glitch"))}),[e]);return r.createElement("button",{ref:g,className:`glitch-btn ${i}`,style:{fontFamily:l,color:s,borderColor:s,...a},onClick:r=>{var n;(n=r.currentTarget).classList.add("glitch"),setTimeout((()=>n.classList.remove("glitch")),f),setTimeout((()=>{o()}),f)}},e)}e('@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}');function i({size:n=60,outerColor:t="#ff69b4",innerColor:e="#b000e8",active:o=!0,rotationDuration:i=1}){const a={width:`${n}px`,height:`${n}px`,borderTopColor:t,animationDuration:`${i}s`},l=.7*n,s={width:`${l}px`,height:`${l}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:a}),r.createElement("div",{className:"orbit-inner-spinner",style:s}))}e(".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}");export{o as GlitchButton,i as LoaderOrbiter};
//# sourceMappingURL=index.mjs.map