kit-components-ui
Version:
Conjunto de componentes UI funcionales y personalizables
3 lines (2 loc) • 19.7 kB
JavaScript
"use strict";var n=require("react/jsx-runtime"),r=require("react");function e(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))}}e(".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");e(".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");e('.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 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 }');e('.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 ');e(".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");e(".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");e("* {\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");e("* {\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");e(".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");e(".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");exports.BoxLinks=function(e){var t=e.links,i=e.title,o=e.theme,s=void 0===o?"dark":o,a=e.width,c=void 0===a?"100%":a,l=r.useState(!1),d=l[0],h=l[1];return n.jsxs("div",{className:"box-links ".concat("light"===s?"theme-light":""," ").concat(d?"open-box-links":""),style:{width:c},children:[n.jsxs("div",{className:"header-box-links",children:[n.jsx("p",{className:"title-box-links",children:i}),n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"dark"===s?"#fff":"#101010",className:"size-6 icon-arrow-link",width:"20",onClick:function(){return h(!d)},children:n.jsx("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m19.5 8.25-7.5 7.5-7.5-7.5"})})]}),n.jsx("nav",{className:"nav-box-links",children:t.length>0&&t.map((function(r){var e=r.id,t=r.link,i=r.name;return n.jsx("a",{href:t,target:"_blank",title:i,className:"link-box",children:i},e)}))})]})},exports.CarrouselImages=function(e){var t=e.images,i=e.auto,o=void 0===i||i,s=e.time,a=void 0===s?5e3:s,c=e.width,l=e.height,d=e.widthImage,h=void 0===d?"100%":d,x=e.heightImage,p=void 0===x?"100%":x,g=r.useState(0),f=g[0],m=g[1],u=function(){m((function(n){return n===t.length-1?0:n+1}))};return r.useEffect((function(){if(o){var n=setInterval((function(){return u()}),a);return function(){return clearInterval(n)}}}),[f]),n.jsxs("div",{className:"carrousel",style:{width:c,height:l},children:[n.jsx("img",{src:t[f].src,alt:"image slide",loading:"lazy",width:h,height:p}),n.jsxs("div",{className:"container-btn",children:[n.jsx("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(){m((function(n){return 0===n?t.length-1:n-1}))},className:"btn"}),n.jsx("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:u,className:"btn"})]})]})},exports.Chat=function(r){var e=r.children,t=r.theme,i=void 0===t?"dark":t,o=r.width,s=void 0===o?"100%":o,a=r.height,c=void 0===a?"auto":a;return n.jsx("section",{className:"section-chat ".concat("light"===i?"chat-light":""),style:{width:s,height:c},children:e})},exports.ChatAssistent=function(e){var t=e.options,i=e.messageMain,o=e.theme,s=e.width,a=e.height,c=r.useState(null),l=c[0],d=c[1];return n.jsxs("section",{className:"section-chat-assistent ".concat("dark"===o?"chat-assist-dark":""),style:{width:s,height:a},children:[n.jsxs("div",{className:"container-chat-assistent",children:[i&&n.jsx("p",{className:"message-main-chat-assist",children:i}),!l&&n.jsx("ul",{className:"list-chat-assist",children:t.map((function(r){return n.jsx("li",{className:"item-chat-assist",onClick:function(){return function(n){d(n)}(r)},children:r.option},r.id)}))})]}),l&&n.jsxs(n.Fragment,{children:[n.jsxs("div",{className:"container-selected-option",children:[n.jsx("h3",{className:"option-chat-assist",children:l.option}),n.jsx("p",{className:"content-chat-assist",children:l.content}),n.jsx("a",{href:l.path,className:"path-chat-assist",children:"Más información acá"})]}),n.jsx("div",{className:"box-question-chat",children:n.jsx("button",{className:"button-question",onClick:function(){d(null)},children:"Volver al inicio"})})]})]})},exports.Collapse=function(e){var t=e.children,i=e.title,o=e.bg,s=void 0===o?"dark":o,a=e.width,c=void 0===a?"100%":a,l=r.useState(!1),d=l[0],h=l[1],x=function(){return h(!d)};return n.jsxs("div",{className:"container ".concat(s," ").concat(d?"visible":""),style:{width:c},"data-testid":"collapse",children:[n.jsxs("div",{className:"sec-title",children:[n.jsx("h3",{className:"title",children:i}),d?n.jsx("svg",{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"==s?"icon-dark":"icon-light"),onClick:x,"data-testid":"open-collapse",children:n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m4.5 15.75 7.5-7.5 7.5 7.5"})}):n.jsx("svg",{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"==s?"icon-dark":"icon-light"),onClick:x,"data-testid":"open-collapse",children:n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m19.5 8.25-7.5 7.5-7.5-7.5"})})]}),n.jsx("div",{className:"content",children:t})]})},exports.Experience=function(r){var e=r.experience,t=e.company,i=e.description,o=e.first_date,s=e.job_name,a=e.last_date,c=e.link,l=e.theme;return n.jsxs("section",{className:"section-experience ".concat(l?"theme-dark-experience":""),children:[n.jsxs("div",{className:"container-line-experience",children:[n.jsx("div",{className:"circle-experience"}),n.jsx("div",{className:"line-experience"})]}),n.jsxs("section",{className:"container-information-experience",children:[n.jsxs("div",{className:"box-info-experience",children:[n.jsx("h2",{className:"job-name-experience",children:s}),n.jsx("p",{className:"company-experience",children:t}),n.jsxs("div",{className:"dates-experience",children:[n.jsx("p",{children:o}),n.jsx("b",{children:"-"}),n.jsx("p",{children:a})]})]}),n.jsxs("div",{className:"box-info-experience last-experience",children:[n.jsx("p",{className:"description-experience",children:i}),c&&n.jsxs("a",{href:c,target:"_blank",rel:"noreferrer",className:"link-experience",children:["Visitar",n.jsx("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:n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m8.25 4.5 7.5 7.5-7.5 7.5"})})]})]})]})]})},exports.Loader=function(){return n.jsx("div",{className:"loader","data-testid":"loader"})},exports.Message=function(r){var e=r.content,t=r.username,i=r.theme,o=void 0===i?"dark":i;return n.jsxs("div",{className:"message ".concat("light"===o?"message-light":""),children:[t&&n.jsx("strong",{className:"username",children:t}),n.jsx("p",{className:"content-message ".concat(e.length>200?"max-message":""),children:e})]})},exports.Modal=function(e){var t=e.children,i=e.titleButton,o=r.useState(!1),s=o[0],a=o[1],c=function(){a(!s)};return n.jsxs(n.Fragment,{children:[n.jsx("button",{className:"btn-modal",onClick:c,children:i}),n.jsx("section",{"data-testid":"modal",className:"container-modal ".concat(s?"active":""),children:n.jsxs("div",{className:"modal",children:[n.jsx("button",{onClick:c,className:"close-modal",children:"X"}),t]})})]})},exports.Toggle=function(r){var e=r.onClick;return n.jsxs("label",{className:"switch",children:[n.jsx("input",{type:"checkbox",onClick:e,"data-testid":"input"}),n.jsx("span",{className:"slider"})]})};
//# sourceMappingURL=index.js.map