UNPKG

slaviors-emblem

Version:

A customizable React component for the Slaviors team emblem

3 lines (2 loc) 10.9 kB
import e,{useState as t,useRef as n,useEffect as a}from"react";function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=Array(t);n<t;n++)a[n]=e[n];return a}function o(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,o,i,c=[],l=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(a=o.call(n)).done)&&(c.push(a.value),c.length!==t);l=!0);}catch(e){s=!0,r=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw r}}return c}}(e,t)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var s=function(r){var i=r.primaryColor,s=void 0===i?"#212832":i,p=r.secondaryColor,m=void 0===p?"#393d46":p,u=r.accentColor,d=void 0===u?"#0f8086":u,f=r.textColor,x=void 0===f?"#00adb4":f,y=r.size,v=void 0===y?160:y,h=r.responsive,g=void 0!==h&&h,b=r.minSize,w=void 0===b?100:b,E=r.maxSize,S=void 0===E?300:E,N=r.animate,C=void 0===N||N,O=r.onColorChange,k=void 0===O?function(){}:O,j=r.editable,M=void 0!==j&&j,z=r.fontFamily,P=void 0===z?"Orbitron":z,R=r.url,F=void 0===R?"https://slaviors.xyz":R,T=r.openInNewTab,A=void 0===T||T,I=r.memberRole,L=void 0===I?"The Architect":I,D=l(t({primary:s,secondary:m,accent:d,text:x}),2),U=D[0],W=D[1],B=l(t(P),2),V=B[0],X=B[1],Y=l(t(!1),2),_=Y[0],H=Y[1],K=l(t(L),2),$=K[0],q=K[1],G=l(t(v),2),J=G[0],Q=G[1],Z=n(null),ee=C?{animation:"pulse 3s infinite"}:{};a((function(){if(g){var e=function(){if(Z.current&&Z.current.parentElement){var e=Z.current.parentElement.clientWidth,t=Math.max(w,Math.min(.9*e,S));Q(t)}};return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}Q(v)}),[g,v,w,S]);var te=J,ne=.5*J,ae=function(e,t){var n=c(c({},U),{},o({},e,t));W(n),k(n)};return a((function(){var e=document.createElement("style");return e.innerHTML=function(e){return"\n @keyframes pulse {\n 0% { filter: drop-shadow(0 0 2px ".concat(e.text,"90); }\n 50% { filter: drop-shadow(0 0 8px ").concat(e.text,"); }\n 100% { filter: drop-shadow(0 0 2px ").concat(e.text,"90); }\n }\n @keyframes code-line {\n 0% { width: 30%; }\n 50% { width: 70%; }\n 100% { width: 30%; }\n }\n @keyframes blink {\n 0% { opacity: 1; }\n 49% { opacity: 1; }\n 50% { opacity: 0; }\n 100% { opacity: 0; }\n }\n @keyframes scan {\n 0% { transform: translateY(-100%); opacity: 0.5; }\n 100% { transform: translateY(100%); opacity: 0; }\n }\n @keyframes glitch {\n 0% { transform: translate(0); }\n 20% { transform: translate(-2px, 2px); }\n 40% { transform: translate(-2px, -2px); }\n 60% { transform: translate(2px, 2px); }\n 80% { transform: translate(2px, -2px); }\n 100% { transform: translate(0); }\n }\n ")}(U),document.head.appendChild(e),function(){document.head.removeChild(e)}}),[U]),e.createElement("div",{className:"flex flex-col items-center",ref:Z},e.createElement("div",{onClick:function(){M||window.open(F,A?"_blank":"_self")},onMouseEnter:function(){return H(!0)},onMouseLeave:function(){return H(!1)},style:c({width:"".concat(te,"px"),height:"".concat(ne,"px"),background:"linear-gradient(135deg, ".concat(U.primary,", ").concat(U.secondary,")"),borderRadius:"6px",position:"relative",overflow:"hidden",border:"1px solid ".concat(U.accent),cursor:M?"default":"pointer",transform:_&&!M?"scale(1.02)":"scale(1)",transition:"transform 0.3s ease, box-shadow 0.3s ease",boxShadow:_&&!M?"0 6px 20px rgba(0,0,0,0.2), 0 0 0 1px ".concat(U.accent,", 0 0 15px ").concat(U.text,"50"):""},ee),className:"relative shadow-lg transition-all duration-300"},e.createElement("div",{style:{position:"absolute",top:"0",left:"0",width:"100%",height:"2px",background:"linear-gradient(to right, transparent, ".concat(U.text,", transparent)"),opacity:.6,animation:"scan 3s infinite",animationTimingFunction:"linear"}}),e.createElement("div",{style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",backgroundImage:"radial-gradient(".concat(U.text,"15 1px, transparent 1px)"),backgroundSize:"15px 15px",opacity:.15}}),e.createElement("div",{style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",backgroundImage:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%23".concat(U.text.slice(1),"' fill-opacity='0.1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/g%3E%3C/svg%3E\")"),opacity:.1}}),e.createElement("div",{style:{position:"absolute",top:"20%",left:"3%",width:"15%",height:"1px",background:U.text,opacity:.7}}),e.createElement("div",{style:{position:"absolute",top:"20%",left:"3%",width:"1px",height:"30%",background:U.text,opacity:.7}}),e.createElement("div",{style:{position:"absolute",top:"50%",left:"3%",width:"5%",height:"1px",background:U.text,opacity:.7}}),e.createElement("div",{style:{position:"absolute",bottom:"30%",right:"5%",width:"20%",height:"1px",background:U.text,opacity:.7,animation:"code-line 4s infinite",animationTimingFunction:"ease-in-out"}}),e.createElement("div",{style:{position:"absolute",bottom:"40%",right:"5%",width:"10%",height:"1px",background:U.text,opacity:.5}}),e.createElement("div",{style:{position:"absolute",top:"65%",right:"12%",width:"5px",height:"12px",background:U.text,animation:"blink 1s infinite"}}),e.createElement("div",{style:c({position:"absolute",top:"40%",left:"50%",transform:"translate(-50%, -50%)",fontFamily:'"'.concat(V,'", "Orbitron", "Courier New", monospace'),fontWeight:"700",fontSize:"".concat(.13*te,"px"),color:U.text,letterSpacing:"2px",textTransform:"uppercase",textShadow:"0 0 8px ".concat(U.text,"60")},C&&"Major Mono Display"===V?{animation:"glitch 10s infinite"}:{})},"SLAVIORS"),e.createElement("div",{style:{position:"absolute",top:"58%",left:"50%",transform:"translateX(-50%)",fontFamily:'"Space Mono", "Courier New", monospace',fontSize:"".concat(.05*te,"px"),color:U.text,opacity:.9,whiteSpace:"nowrap",background:"".concat(U.primary,"70"),padding:"2px 8px",borderRadius:"3px",border:"1px solid ".concat(U.accent,"70"),textTransform:"uppercase",letterSpacing:"1px"}},$),e.createElement("div",{style:{position:"absolute",bottom:"10%",left:"50%",transform:"translateX(-50%)",fontFamily:'"Space Mono", "Courier New", monospace',fontSize:"".concat(.035*te,"px"),color:U.text,opacity:.8,whiteSpace:"nowrap"}},"WEB • AI • FUTURE"),_&&!M&&e.createElement("div",{style:{position:"absolute",top:"10%",right:"10%",fontFamily:'"Space Mono", "Courier New", monospace',fontSize:"".concat(.03*te,"px"),color:U.text,opacity:.8,whiteSpace:"nowrap",background:"".concat(U.primary,"80"),padding:"2px 6px",borderRadius:"3px",border:"1px solid ".concat(U.text,"50")}},"visit site")),M&&e.createElement("div",{className:"mt-4 flex flex-col gap-2 w-full max-w-xs"},e.createElement("div",{className:"flex items-center gap-2"},e.createElement("label",{className:"text-sm w-24"},"Primary:"),e.createElement("input",{type:"color",value:U.primary,onChange:function(e){return ae("primary",e.target.value)},className:"w-8 h-8"})),e.createElement("div",{className:"flex items-center gap-2"},e.createElement("label",{className:"text-sm w-24"},"Secondary:"),e.createElement("input",{type:"color",value:U.secondary,onChange:function(e){return ae("secondary",e.target.value)},className:"w-8 h-8"})),e.createElement("div",{className:"flex items-center gap-2"},e.createElement("label",{className:"text-sm w-24"},"Accent:"),e.createElement("input",{type:"color",value:U.accent,onChange:function(e){return ae("accent",e.target.value)},className:"w-8 h-8"})),e.createElement("div",{className:"flex items-center gap-2"},e.createElement("label",{className:"text-sm w-24"},"Text:"),e.createElement("input",{type:"color",value:U.text,onChange:function(e){return ae("text",e.target.value)},className:"w-8 h-8"})),e.createElement("div",{className:"flex items-center gap-2 mt-2"},e.createElement("label",{className:"text-sm w-24"},"Font:"),e.createElement("select",{value:V,onChange:function(e){return X(e.target.value)},style:{fontFamily:V,padding:"4px 8px",border:"1px solid #ccc",borderRadius:"4px"}},["Orbitron","Chakra Petch","Rajdhani","Syncopate","Space Mono","Titillium Web","Exo 2","B612 Mono","Major Mono Display","Kallisto"].map((function(t){return e.createElement("option",{key:t,value:t,style:{fontFamily:t}},t)})))),e.createElement("div",{className:"flex items-center gap-2 mt-2"},e.createElement("label",{className:"text-sm w-24"},"Role:"),e.createElement("input",{type:"text",value:$,onChange:function(e){q(e.target.value)},style:{padding:"4px 8px",border:"1px solid #ccc",borderRadius:"4px",width:"100%",fontSize:"12px",fontFamily:'"Space Mono", monospace'}})),e.createElement("div",{className:"flex items-center gap-2 mt-2"},e.createElement("label",{className:"text-sm w-24"},"URL:"),e.createElement("input",{type:"text",value:F,readOnly:!0,style:{padding:"4px 8px",border:"1px solid #ccc",borderRadius:"4px",width:"100%",fontSize:"12px"}})),g&&e.createElement("div",{className:"mt-2 p-2 bg-gray-100 rounded text-xs opacity-75"},e.createElement("p",null,"Responsive mode active - size will adjust to container width"),e.createElement("p",null,"Current size: ",Math.round(J),"px"))))};export{s as default}; //# sourceMappingURL=index.esm.js.map