kit-components-ui
Version:
Conjunto de componentes UI funcionales y personalizables
3 lines (2 loc) • 19.4 kB
JavaScript
import{jsxs as n,jsx as r,Fragment as e}from"react/jsx-runtime";import{useState as t,useEffect as i}from"react";function o(n,r){void 0===r&&(r={});var e=r.insertAt;if(n&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===e&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n))}}o(".carrousel {\r\n position: relative;\r\n}\r\n\r\n.container-btn {\r\n position: absolute;\r\n z-index: 99;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.btn {\r\n background: transparent;\r\n transition: background 0.5s;\r\n cursor: pointer;\r\n padding: 5px;\r\n}\r\n.btn:hover {\r\n background: #f0ffff71;\r\n transition: background 0.5s;\r\n}\r\n");var a=function(e){var o=e.images,a=e.auto,c=void 0===a||a,s=e.time,l=void 0===s?5e3:s,d=e.width,h=e.height,p=e.widthImage,g=void 0===p?"100%":p,x=e.heightImage,f=void 0===x?"100%":x,m=t(0),u=m[0],b=m[1],k=function(){b((function(n){return n===o.length-1?0:n+1}))};return i((function(){if(c){var n=setInterval((function(){return k()}),l);return function(){return clearInterval(n)}}}),[u]),n("div",{className:"carrousel",style:{width:d,height:h},children:[r("img",{src:o[u].src,alt:"image slide",loading:"lazy",width:g,height:f}),n("div",{className:"container-btn",children:[r("img",{src:"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M328 112L184 256l144 144'/%3e%3c/svg%3e",alt:"arrow back",width:"30",height:"30",loading:"lazy",onClick:function(){b((function(n){return 0===n?o.length-1:n-1}))},className:"btn"}),r("img",{src:"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3e%3c/svg%3e",alt:"arrow next",width:"30",height:"30",loading:"lazy",onClick:k,className:"btn"})]})]})};o(".container {\r\n display: inline-block;\r\n padding: 0 10px;\r\n user-select: none;\r\n}\r\n\r\n.sec-title {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.icon {\r\n cursor: pointer;\r\n}\r\n.title {\r\n font-size: 18px;\r\n max-width: 90%;\r\n}\r\n\r\n.content {\r\n opacity: 0;\r\n visibility: hidden;\r\n height: 0;\r\n font-size: 16px;\r\n font-weight: bold;\r\n transition: all 0.3s;\r\n \r\n}\r\n\r\n.visible .content {\r\n opacity: 1;\r\n visibility: visible;\r\n height: auto;\r\n transition: all 0.3s;\r\n}\r\n\r\n.dark {\r\n background-color: #101010;\r\n color: #ddd;\r\n border-bottom: 1px solid #aaa;\r\n}\r\n\r\n.light {\r\n background-color: #ddd;\r\n color: #101010;\r\n border-bottom: 1px solid #202020;\r\n\r\n}\r\n\r\n.icon-dark {\r\n stroke: #fff;\r\n}\r\n\r\n.icon-light {\r\n stroke: #000;\r\n\r\n}\r\n\r\n");var c=function(e){var i=e.children,o=e.title,a=e.bg,c=void 0===a?"dark":a,s=e.width,l=void 0===s?"100%":s,d=t(!1),h=d[0],p=d[1],g=function(){return p(!h)};return n("div",{className:"container ".concat(c," ").concat(h?"visible":""),style:{width:l},"data-testid":"collapse",children:[n("div",{className:"sec-title",children:[r("h3",{className:"title",children:o}),r("svg",h?{width:30,height:30,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"#fff",className:"icon w-6 h-6 ".concat("dark"==c?"icon-dark":"icon-light"),onClick:g,"data-testid":"open-collapse",children:r("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m4.5 15.75 7.5-7.5 7.5 7.5"})}:{width:30,height:30,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"#fff",className:"icon w-6 h-6 ".concat("dark"==c?"icon-dark":"icon-light"),onClick:g,"data-testid":"open-collapse",children:r("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m19.5 8.25-7.5 7.5-7.5-7.5"})})]}),r("div",{className:"content",children:i})]})};o('.loader {\r\n display: block;\r\n width: 130px;\r\n height: 4px;\r\n border-radius: 30px;\r\n background-color: rgba(0,0,0,0.2);\r\n position: relative;\r\n }\r\n \r\n .loader::before {\r\n content: "";\r\n position: absolute;\r\n background: #0071e2;\r\n top: 0;\r\n left: 0;\r\n width: 0%;\r\n height: 100%;\r\n border-radius: 30px;\r\n animation: moving 1s ease-in-out infinite;\r\n ;\r\n }\r\n \r\n @keyframes moving {\r\n 50% {\r\n width: 100%;\r\n }\r\n \r\n 100% {\r\n width: 0;\r\n right: 0;\r\n left: unset;\r\n }\r\n }');var s=function(){return r("div",{className:"loader","data-testid":"loader"})};o('.switch {\r\n --button-width: 3em;\r\n --button-height: 1.5em;\r\n --toggle-diameter: 1em;\r\n --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);\r\n --toggle-shadow-offset: 10px;\r\n --toggle-wider: 3em;\r\n --color-grey: #cccccc;\r\n --color-green: #4296f4;\r\n }\r\n \r\n .slider {\r\n display: inline-block;\r\n width: var(--button-width);\r\n height: var(--button-height);\r\n background-color: var(--color-grey);\r\n border-radius: calc(var(--button-height) / 2);\r\n position: relative;\r\n transition: 0.3s all ease-in-out;\r\n cursor: pointer;\r\n }\r\n \r\n .slider::after {\r\n content: "";\r\n display: inline-block;\r\n width: var(--toggle-diameter);\r\n height: var(--toggle-diameter);\r\n background-color: #fff;\r\n border-radius: calc(var(--toggle-diameter) / 2);\r\n position: absolute;\r\n top: var(--button-toggle-offset);\r\n transform: translateX(var(--button-toggle-offset));\r\n box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);\r\n transition: 0.3s all ease-in-out;\r\n }\r\n \r\n .switch input[type="checkbox"]:checked + .slider {\r\n background-color: var(--color-green);\r\n }\r\n \r\n .switch input[type="checkbox"]:checked + .slider::after {\r\n transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));\r\n box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .switch input[type="checkbox"] {\r\n display: none;\r\n }\r\n \r\n .switch input[type="checkbox"]:active + .slider::after {\r\n width: var(--toggle-wider);\r\n }\r\n \r\n .switch input[type="checkbox"]:checked:active + .slider::after {\r\n transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));\r\n }\r\n ');var l=function(e){var t=e.onClick;return n("label",{className:"switch",children:[r("input",{type:"checkbox",onClick:t,"data-testid":"input"}),r("span",{className:"slider"})]})};o(".btn-modal {\r\n border: none;\r\n padding: 10px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n background-color: #ddd;\r\n}\r\n\r\n.container-modal {\r\n width: 100%;\r\n height: 100vh;\r\n background-color: #000000bc;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: fixed;\r\n z-index: 999;\r\n top: 0;\r\n left: 0;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.3s;\r\n}\r\n.container-modal.active {\r\n opacity: 1;\r\n visibility: visible;\r\n transition: all 0.5s;\r\n}\r\n\r\n.modal {\r\n width: 500px;\r\n height: auto;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n padding: 10px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px #5e5e5e;\r\n}\r\n\r\n.close-modal {\r\n text-align: end;\r\n border: none;\r\n background-color: transparent;\r\n color: #000;\r\n font-size: 24px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n padding: 10px;\r\n}\r\n");var d=function(i){var o=i.children,a=i.titleButton,c=t(!1),s=c[0],l=c[1],d=function(){l(!s)};return n(e,{children:[r("button",{className:"btn-modal",onClick:d,children:a}),r("section",{"data-testid":"modal",className:"container-modal ".concat(s?"active":""),children:n("div",{className:"modal",children:[r("button",{onClick:d,className:"close-modal",children:"X"}),o]})})]})};o(".section-experience {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n position: relative;\r\n padding-bottom: 20px;\r\n}\r\n\r\n.container-line-experience {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n height: 100%;\r\n}\r\n\r\n.circle-experience {\r\n width: 14px;\r\n height: 14px;\r\n background-color: #fff;\r\n border-radius: 50%;\r\n}\r\n\r\n.line-experience {\r\n width: 2px;\r\n height: 100%;\r\n background-color: #aaa;\r\n}\r\n\r\n.container-information-experience {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-left: 20px;\r\n}\r\n\r\n.box-info-experience {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 3px;\r\n}\r\n\r\n.last-experience {\r\n width: 50%;\r\n}\r\n\r\n.job-name-experience {\r\n color: #fff;\r\n}\r\n\r\n.company-experience {\r\n font-weight: 500;\r\n color: #fff;\r\n}\r\n\r\n.dates-experience {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #d1d5db;\r\n}\r\n\r\n.description-experience {\r\n font-size: 16px;\r\n color: #d1d5db;\r\n padding-bottom: 10px;\r\n}\r\n\r\n.link-experience {\r\n text-decoration: none;\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: #d1d5db;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.link-experience:hover {\r\n transition: color 0.5s;\r\n color: #fff;\r\n}\r\n\r\n.icon-link-experience {\r\n stroke: #fff;\r\n}\r\n\r\n/* Theme theme-dark-experience */\r\n\r\n.theme-dark-experience .circle-experience {\r\n background-color: #101010;\r\n}\r\n\r\n.theme-dark-experience .line-experience {\r\n background-color: #303030;\r\n}\r\n.theme-dark-experience .company-experience {\r\n color: #000;\r\n}\r\n.theme-dark-experience .job-name-experience {\r\n color: #000;\r\n}\r\n\r\n.theme-dark-experience .dates-experience {\r\n color: #303030;\r\n}\r\n\r\n.theme-dark-experience .description-experience {\r\n color: #202020;\r\n}\r\n\r\n.theme-dark-experience .link-experience {\r\n color: #202020;\r\n transition: color 0.5s;\r\n}\r\n\r\n.theme-dark-experience .link-experience:hover {\r\n color: #000;\r\n transition: color 0.5s;\r\n}\r\n\r\n.theme-dark-experience .icon-link-experience {\r\n stroke: #202020;\r\n}\r\n\r\n@media (max-width: 425px) {\r\n .container-information-experience {\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n .last-experience {\r\n width: 100%;\r\n }\r\n}\r\n");var h=function(e){var t=e.experience,i=t.company,o=t.description,a=t.first_date,c=t.job_name,s=t.last_date,l=t.link,d=t.theme;return n("section",{className:"section-experience ".concat(d?"theme-dark-experience":""),children:[n("div",{className:"container-line-experience",children:[r("div",{className:"circle-experience"}),r("div",{className:"line-experience"})]}),n("section",{className:"container-information-experience",children:[n("div",{className:"box-info-experience",children:[r("h2",{className:"job-name-experience",children:c}),r("p",{className:"company-experience",children:i}),n("div",{className:"dates-experience",children:[r("p",{children:a}),r("b",{children:"-"}),r("p",{children:s})]})]}),n("div",{className:"box-info-experience last-experience",children:[r("p",{className:"description-experience",children:o}),l&&n("a",{href:l,target:"_blank",rel:"noreferrer",className:"link-experience",children:["Visitar",r("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",className:"icon-link-experience",width:16,height:16,children:r("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m8.25 4.5 7.5 7.5-7.5 7.5"})})]})]})]})]})};o("* {\r\n padding: 0;\r\n margin: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.box-links {\r\n border-radius: 5px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: center;\r\n gap: 10px;\r\n background-color: #101010;\r\n border: 1px solid#202020;\r\n padding: 8px;\r\n height: 60px;\r\n}\r\n\r\n.header-box-links {\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.title-box-links {\r\n color: #fff;\r\n font-size: 18px;\r\n font-weight: 500;\r\n}\r\n.icon-arrow-link {\r\n cursor: pointer;\r\n}\r\n.nav-box-links {\r\n width: 100%;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 10px;\r\n display: none;\r\n}\r\n\r\n.link-box {\r\n font-size: 15px;\r\n color: #ccc;\r\n text-decoration: none;\r\n transition: color 0.5s;\r\n}\r\n.link-box:hover {\r\n color: #fff;\r\n transition: color 0.5s;\r\n}\r\n\r\n.theme-light {\r\n background-color: #ddd;\r\n border-color: #ccc; \r\n}\r\n\r\n.theme-light .title-box-links {\r\n color: #101010;\r\n}\r\n\r\n.theme-light .link-box {\r\n color: #303030;\r\n}\r\n.theme-light .link-box:hover {\r\n color: #000;\r\n}\r\n\r\n.open-box-links {\r\n height: auto;\r\n}\r\n\r\n.open-box-links .nav-box-links {\r\n display: flex;\r\n}\r\n");var p=function(e){var i=e.links,o=e.title,a=e.theme,c=void 0===a?"dark":a,s=e.width,l=void 0===s?"100%":s,d=t(!1),h=d[0],p=d[1];return n("div",{className:"box-links ".concat("light"===c?"theme-light":""," ").concat(h?"open-box-links":""),style:{width:l},children:[n("div",{className:"header-box-links",children:[r("p",{className:"title-box-links",children:o}),r("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"dark"===c?"#fff":"#101010",className:"size-6 icon-arrow-link",width:"20",onClick:function(){return p(!h)},children:r("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m19.5 8.25-7.5 7.5-7.5-7.5"})})]}),r("nav",{className:"nav-box-links",children:i.length>0&&i.map((function(n){var e=n.id,t=n.link,i=n.name;return r("a",{href:t,target:"_blank",title:i,className:"link-box",children:i},e)}))})]})};o("* {\r\n padding: 0;\r\n margin: 0;\r\n box-sizing: border-box;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.section-chat {\r\n display: flex; \r\n flex-direction: column;\r\n gap: 12px;\r\n background-color: #101010;\r\n border-radius: 5px;\r\n padding: 10px;\r\n overflow-y: auto;\r\n}\r\n\r\n.chat-light {\r\n background-color: #ccc;\r\n}\r\n\r\n");var g=function(n){var e=n.children,t=n.theme,i=void 0===t?"dark":t,o=n.width,a=void 0===o?"100%":o,c=n.height,s=void 0===c?"auto":c;return r("section",{className:"section-chat ".concat("light"===i?"chat-light":""),style:{width:a,height:s},children:e})};o(".message {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n background-color: #202020;\r\n border-radius: 5px;\r\n padding: 8px;\r\n}\r\n.max-message {\r\n height: 200px;\r\n overflow-y: auto;\r\n scrollbar-width: thin;\r\n scrollbar-color: #888 #202020;\r\n\r\n}\r\n.max-message::-webkit-scrollbar-track {\r\n background: #101010;\r\n}\r\n.username {\r\n color: #fff;\r\n}\r\n\r\n.content-message {\r\n color: #fff;\r\n font-size: 16px;\r\n}\r\n\r\n.message-light {\r\n background-color: #aaa;\r\n}\r\n\r\n.message-light .username {\r\n color: #101010;\r\n}\r\n\r\n.message-light .content-message {\r\n color: #161616;\r\n}\r\n");var x=function(e){var t=e.content,i=e.username,o=e.theme;return n("div",{className:"message ".concat("light"===(void 0===o?"dark":o)?"message-light":""),children:[i&&r("strong",{className:"username",children:i}),r("p",{className:"content-message ".concat(t.length>200?"max-message":""),children:t})]})};o(".section-chat-assistent {\r\n overflow-y: auto;\r\n padding: 10px;\r\n border-radius: 5px;\r\n display: flex;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n gap: 16px;\r\n background-color: #ccc;\r\n box-shadow: 0 0 5px #303030;\r\n}\r\n\r\n.container-chat-assistent {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n}\r\n\r\n.message-main-chat-assist {\r\n font-size: 20px;\r\n color: #000;\r\n font-weight: 500;\r\n}\r\n\r\n.list-chat-assist {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n}\r\n\r\n.item-chat-assist {\r\n list-style: none;\r\n font-size: 16px;\r\n color: #101010;\r\n cursor: pointer;\r\n font-weight: 500;\r\n}\r\n\r\n.item-chat-assist:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.container-selected-option {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n}\r\n\r\n.option-chat-assist {\r\n color: #000;\r\n}\r\n\r\n.content-chat-assist {\r\n color: #101010;\r\n font-size: 16px;\r\n font-weight: 500;\r\n}\r\n\r\n.path-chat-assist {\r\n text-decoration: underline;\r\n color: #2d6dec;\r\n font-weight: 500;\r\n}\r\n\r\n.box-question-chat {\r\n width: 100%;\r\n display: flex;\r\n justify-content: flex-end;\r\n}\r\n\r\n.button-question {\r\n text-align: center;\r\n background-color: transparent;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 16px;\r\n color: #000000;\r\n font-weight: 500;\r\n}\r\n\r\n.button-question:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.chat-assist-dark {\r\n background-color: #000;\r\n box-shadow: 0 0 5px #909090;\r\n}\r\n\r\n.chat-assist-dark .message-main-chat-assist,\r\n.chat-assist-dark .option-chat-assist,\r\n.chat-assist-dark .button-question {\r\n color: #fff;\r\n}\r\n\r\n.chat-assist-dark .item-chat-assist,\r\n.chat-assist-dark .content-chat-assist {\r\n color: #ddd;\r\n}\r\n");var f=function(i){var o=i.options,a=i.messageMain,c=i.theme,s=i.width,l=i.height,d=t(null),h=d[0],p=d[1];return n("section",{className:"section-chat-assistent ".concat("dark"===c?"chat-assist-dark":""),style:{width:s,height:l},children:[n("div",{className:"container-chat-assistent",children:[a&&r("p",{className:"message-main-chat-assist",children:a}),!h&&r("ul",{className:"list-chat-assist",children:o.map((function(n){return r("li",{className:"item-chat-assist",onClick:function(){return function(n){p(n)}(n)},children:n.option},n.id)}))})]}),h&&n(e,{children:[n("div",{className:"container-selected-option",children:[r("h3",{className:"option-chat-assist",children:h.option}),r("p",{className:"content-chat-assist",children:h.content}),r("a",{href:h.path,className:"path-chat-assist",children:"Más información acá"})]}),r("div",{className:"box-question-chat",children:r("button",{className:"button-question",onClick:function(){p(null)},children:"Volver al inicio"})})]})]})};export{p as BoxLinks,a as CarrouselImages,g as Chat,f as ChatAssistent,c as Collapse,h as Experience,s as Loader,x as Message,d as Modal,l as Toggle};
//# sourceMappingURL=index.mjs.map