UNPKG

slaviors-emblem

Version:

A customizable React component for the Slaviors team emblem

3 lines (2 loc) 10.9 kB
"use strict";var e=require("react");function t(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 n(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 a(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 r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function o(e,n){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,n)||function(e,n){if(e){if("string"==typeof e)return t(e,n);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?t(e,n):void 0}}(e,n)||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.")}()}module.exports=function(t){var a=t.primaryColor,i=void 0===a?"#212832":a,c=t.secondaryColor,l=void 0===c?"#393d46":c,s=t.accentColor,p=void 0===s?"#0f8086":s,u=t.textColor,m=void 0===u?"#00adb4":u,d=t.size,f=void 0===d?160:d,x=t.responsive,y=void 0!==x&&x,v=t.minSize,h=void 0===v?100:v,g=t.maxSize,b=void 0===g?300:g,w=t.animate,E=void 0===w||w,S=t.onColorChange,N=void 0===S?function(){}:S,C=t.editable,O=void 0!==C&&C,k=t.fontFamily,j=void 0===k?"Orbitron":k,M=t.url,z=void 0===M?"https://slaviors.xyz":M,R=t.openInNewTab,P=void 0===R||R,F=t.memberRole,T=void 0===F?"The Architect":F,A=o(e.useState({primary:i,secondary:l,accent:p,text:m}),2),I=A[0],L=A[1],D=o(e.useState(j),2),U=D[0],W=D[1],B=o(e.useState(!1),2),V=B[0],X=B[1],Y=o(e.useState(T),2),_=Y[0],q=Y[1],H=o(e.useState(f),2),K=H[0],$=H[1],G=e.useRef(null),J=E?{animation:"pulse 3s infinite"}:{};e.useEffect((function(){if(y){var e=function(){if(G.current&&G.current.parentElement){var e=G.current.parentElement.clientWidth,t=Math.max(h,Math.min(.9*e,b));$(t)}};return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}$(f)}),[y,f,h,b]);var Q=K,Z=.5*K,ee=function(e,t){var a=r(r({},I),{},n({},e,t));L(a),N(a)};return e.useEffect((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 ")}(I),document.head.appendChild(e),function(){document.head.removeChild(e)}}),[I]),e.createElement("div",{className:"flex flex-col items-center",ref:G},e.createElement("div",{onClick:function(){O||window.open(z,P?"_blank":"_self")},onMouseEnter:function(){return X(!0)},onMouseLeave:function(){return X(!1)},style:r({width:"".concat(Q,"px"),height:"".concat(Z,"px"),background:"linear-gradient(135deg, ".concat(I.primary,", ").concat(I.secondary,")"),borderRadius:"6px",position:"relative",overflow:"hidden",border:"1px solid ".concat(I.accent),cursor:O?"default":"pointer",transform:V&&!O?"scale(1.02)":"scale(1)",transition:"transform 0.3s ease, box-shadow 0.3s ease",boxShadow:V&&!O?"0 6px 20px rgba(0,0,0,0.2), 0 0 0 1px ".concat(I.accent,", 0 0 15px ").concat(I.text,"50"):""},J),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(I.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(I.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(I.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:I.text,opacity:.7}}),e.createElement("div",{style:{position:"absolute",top:"20%",left:"3%",width:"1px",height:"30%",background:I.text,opacity:.7}}),e.createElement("div",{style:{position:"absolute",top:"50%",left:"3%",width:"5%",height:"1px",background:I.text,opacity:.7}}),e.createElement("div",{style:{position:"absolute",bottom:"30%",right:"5%",width:"20%",height:"1px",background:I.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:I.text,opacity:.5}}),e.createElement("div",{style:{position:"absolute",top:"65%",right:"12%",width:"5px",height:"12px",background:I.text,animation:"blink 1s infinite"}}),e.createElement("div",{style:r({position:"absolute",top:"40%",left:"50%",transform:"translate(-50%, -50%)",fontFamily:'"'.concat(U,'", "Orbitron", "Courier New", monospace'),fontWeight:"700",fontSize:"".concat(.13*Q,"px"),color:I.text,letterSpacing:"2px",textTransform:"uppercase",textShadow:"0 0 8px ".concat(I.text,"60")},E&&"Major Mono Display"===U?{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*Q,"px"),color:I.text,opacity:.9,whiteSpace:"nowrap",background:"".concat(I.primary,"70"),padding:"2px 8px",borderRadius:"3px",border:"1px solid ".concat(I.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*Q,"px"),color:I.text,opacity:.8,whiteSpace:"nowrap"}},"WEB • AI • FUTURE"),V&&!O&&e.createElement("div",{style:{position:"absolute",top:"10%",right:"10%",fontFamily:'"Space Mono", "Courier New", monospace',fontSize:"".concat(.03*Q,"px"),color:I.text,opacity:.8,whiteSpace:"nowrap",background:"".concat(I.primary,"80"),padding:"2px 6px",borderRadius:"3px",border:"1px solid ".concat(I.text,"50")}},"visit site")),O&&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:I.primary,onChange:function(e){return ee("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:I.secondary,onChange:function(e){return ee("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:I.accent,onChange:function(e){return ee("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:I.text,onChange:function(e){return ee("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:U,onChange:function(e){return W(e.target.value)},style:{fontFamily:U,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:z,readOnly:!0,style:{padding:"4px 8px",border:"1px solid #ccc",borderRadius:"4px",width:"100%",fontSize:"12px"}})),y&&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(K),"px"))))}; //# sourceMappingURL=index.js.map