@eclass/ui-kit 1.43.0 → 1.45.0

package/dist/eclass-ui-kit.es.js

@@ -31983,11 +31983,247 @@ function ModalAlert({
   });
 }
 ModalAlert.displayName = "ModalAlert";
-const Events = () => {
-  return /* @__PURE__ */ jsx("div", {
-    children: "Hola soy un Evento"
+const Calendar = ({
+  color: color2 = "white"
+}) => {
+  return /* @__PURE__ */ jsxs(Icon, {
+    width: "16px",
+    height: "17px",
+    viewBox: "0 0 16 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/* @__PURE__ */ jsx("path", {
+      d: "M15 2.5H13V0.5H11V2.5H9V0.5H7V2.5H5V0.5H3V2.5H1C0.447 2.5 0 2.947 0 3.5V15.5C0 16.053 0.447 16.5 1 16.5H15C15.553 16.5 16 16.053 16 15.5V3.5C16 2.947 15.553 2.5 15 2.5ZM14 14.5H2V5.5H14V14.5Z",
+      fill: color2
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M6 7.5H4V9.5H6V7.5Z",
+      fill: color2
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M9 7.5H7V9.5H9V7.5Z",
+      fill: color2
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M6 10.5H4V12.5H6V10.5Z",
+      fill: color2
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M9 10.5H7V12.5H9V10.5Z",
+      fill: color2
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M12 7.5H10V9.5H12V7.5Z",
+      fill: color2
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M12 10.5H10V12.5H12V10.5Z",
+      fill: color2
+    })]
   });
 };
+const Clock = ({
+  color: color2 = "white"
+}) => {
+  return /* @__PURE__ */ jsx(Icon, {
+    width: "16px",
+    height: "17px",
+    viewBox: "0 0 16 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M0 8.5C0 4.1 3.6 0.5 8 0.5C12.4 0.5 16 4.1 16 8.5C16 12.9 12.4 16.5 8 16.5C3.6 16.5 0 12.9 0 8.5ZM7 9.5H12V7.5H9V4.5H7V9.5Z",
+      fill: color2
+    })
+  });
+};
+const LargeBox = ({
+  id: id2,
+  eventTitle,
+  startDate,
+  startTime,
+  buttonInfo,
+  redirect,
+  eventImage,
+  targetBlank,
+  isMobile
+}) => {
+  return /* @__PURE__ */ jsx(Link, {
+    href: redirect,
+    _hover: {
+      textDecoration: "none"
+    },
+    target: targetBlank ? "_blank" : "_self",
+    rel: targetBlank ? "noopener noreferrer" : void 0,
+    display: "contents",
+    children: /* @__PURE__ */ jsxs(Flex, {
+      cursor: "pointer",
+      transition: "box-shadow 0.3s ease-in-out",
+      _hover: {
+        shadow: "sm"
+      },
+      w: "fit-content",
+      borderRadius: vars("radii-big"),
+      display: isMobile ? "block" : "flex",
+      children: [/* @__PURE__ */ jsx(Box, {
+        width: "285px",
+        height: isMobile ? "140px" : "168px",
+        bgImage: `linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 100%), url(${eventImage})`,
+        backgroundSize: "cover",
+        borderRadius: isMobile ? "8px 8px 0px 0px" : "8px 0 0 8px"
+      }), /* @__PURE__ */ jsxs(Box, {
+        width: isMobile ? "285px" : "305px",
+        minHeight: isMobile ? "160px" : "168px",
+        borderRadius: isMobile ? "0 0 8px 8px" : "0 8px 8px 0",
+        border: vars("borders-light"),
+        display: "flex",
+        flexDirection: "column",
+        cursor: "pointer",
+        children: [/* @__PURE__ */ jsxs(Box, {
+          width: "inherit",
+          height: "100%",
+          padding: "4",
+          color: "#555555",
+          gap: "16px",
+          display: "grid",
+          children: [/* @__PURE__ */ jsx(Text, {
+            fontWeight: "700",
+            children: eventTitle
+          }), /* @__PURE__ */ jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
+            children: [/* @__PURE__ */ jsx(Calendar, {
+              color: vars("colors-main-ziggurat")
+            }), /* @__PURE__ */ jsx(Text, {
+              fontWeight: "400",
+              children: startDate
+            }), /* @__PURE__ */ jsx(Text, {
+              color: vars("borders-light"),
+              children: "|"
+            }), /* @__PURE__ */ jsx(Clock, {
+              color: vars("colors-main-ziggurat")
+            }), /* @__PURE__ */ jsx(Text, {
+              children: startTime
+            })]
+          })]
+        }), /* @__PURE__ */ jsx(Box, {
+          borderTop: `${vars("borders-light")}`,
+          width: "100%",
+          height: "50px",
+          padding: "12px",
+          backgroundColor: "white",
+          alignItems: "center",
+          display: "flex",
+          justifyContent: "center",
+          borderRadius: " 0 0 8px 8px",
+          fontSize: "16px",
+          fontFamily: "Roboto",
+          color: vars("colors-main-deepSkyBlue"),
+          fontWeight: "500",
+          children: buttonInfo
+        })]
+      })]
+    })
+  }, id2);
+};
+const SmallBox = ({
+  id: id2,
+  eventTitle,
+  startDate,
+  startTime,
+  buttonInfo,
+  redirect,
+  eventImage,
+  targetBlank
+}) => {
+  return /* @__PURE__ */ jsx(Link, {
+    href: redirect,
+    _hover: {
+      textDecoration: "none"
+    },
+    target: targetBlank ? "_blank" : "_self",
+    rel: targetBlank ? "noopener noreferrer" : void 0,
+    display: "contents",
+    children: /* @__PURE__ */ jsxs(Box, {
+      width: "286px",
+      height: "247px",
+      borderRadius: vars("radii-big"),
+      border: vars("borders-light"),
+      justifyContent: "center",
+      textAlign: "center",
+      display: "flex",
+      flexDirection: "column",
+      cursor: "pointer",
+      transition: "box-shadow 0.3s ease-in-out",
+      _hover: {
+        shadow: "sm"
+      },
+      children: [/* @__PURE__ */ jsx(Box, {
+        flex: "1",
+        bgImage: `linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 100%), url(${eventImage})`,
+        backgroundSize: "cover",
+        borderRadius: "8px 8px 0 0",
+        margin: "0",
+        display: "grid",
+        alignItems: "flex-end",
+        children: /* @__PURE__ */ jsxs(Box, {
+          color: vars("colors-neutral-white"),
+          padding: "16px",
+          textAlign: "initial",
+          fontFamily: "Roboto",
+          fontSize: "16px",
+          lineHeight: "21px",
+          display: "grid",
+          gap: "8px",
+          children: [/* @__PURE__ */ jsx(Text, {
+            fontWeight: "700",
+            m: "0px",
+            children: eventTitle
+          }), /* @__PURE__ */ jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
+            children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx(Text, {
+              fontWeight: "400",
+              m: "0px",
+              children: startDate
+            }), /* @__PURE__ */ jsx(Text, {
+              m: "0px",
+              children: "|"
+            }), /* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx(Text, {
+              m: "0px",
+              children: startTime
+            })]
+          })]
+        })
+      }), /* @__PURE__ */ jsx(Box, {
+        width: "100%",
+        height: "50px",
+        backgroundColor: "white",
+        alignItems: "center",
+        display: "flex",
+        justifyContent: "center",
+        borderRadius: " 0 0 8px 8px",
+        fontSize: "16px",
+        fontFamily: "Roboto",
+        color: vars("colors-main-deepSkyBlue"),
+        fontWeight: "500",
+        children: buttonInfo
+      })]
+    })
+  }, id2);
+};
+const Eventos = ({
+  typeEvent,
+  itemsEvent
+}) => {
+  if (typeEvent === "LARGE_EVENTS") {
+    return /* @__PURE__ */ jsx(LargeBox, {
+      ...itemsEvent
+    });
+  } else {
+    return /* @__PURE__ */ jsx(SmallBox, {
+      ...itemsEvent
+    });
+  }
+};
 const Avi = () => {
   return /* @__PURE__ */ jsxs(Icon, {
     width: "32px",
@@ -32955,62 +33191,76 @@ const Resources = ({
   resourceDetail,
   resourceTextDownload,
   resourceLink,
-  resourceNameFile
+  targetBlank
 }) => {
-  return /* @__PURE__ */ jsxs(Box, {
-    width: "285px",
-    height: "147px",
-    borderRadius: "8px",
-    border: "1px",
-    borderColor: vars("colors-neutral-platinum"),
-    justifyContent: "center",
-    textAlign: "center",
-    display: "grid",
-    gap: "8px",
-    padding: 4,
-    children: [/* @__PURE__ */ jsx(Box, {
-      children: /* @__PURE__ */ jsx(Icons, {
-        type: resourceType
-      })
-    }), /* @__PURE__ */ jsx(Box, {
-      children: /* @__PURE__ */ jsx(Text, {
-        fontFamily: "Roboto",
-        fontWeight: "700",
-        lineHeight: "21px",
-        fontSize: "16px",
-        color: "#555555",
-        children: resourceTitle
-      })
-    }), /* @__PURE__ */ jsx(Box, {
-      children: /* @__PURE__ */ jsx(Text, {
-        fontFamily: "Roboto",
-        fontWeight: "400",
-        lineHeight: "14px",
-        fontSize: "12px",
-        color: "#555555",
-        children: resourceDetail
-      })
-    }), /* @__PURE__ */ jsx(Box, {
-      display: "flex",
-      alignItems: "center",
+  return /* @__PURE__ */ jsx(Link, {
+    href: resourceLink,
+    target: targetBlank ? "_blank" : "_self",
+    rel: targetBlank ? "noopener noreferrer" : void 0,
+    _hover: {
+      textDecoration: "none"
+    },
+    display: "contents",
+    children: /* @__PURE__ */ jsxs(Box, {
+      width: "285px",
+      height: "147px",
+      borderRadius: vars("radii-big"),
+      border: vars("borders-light"),
       justifyContent: "center",
-      children: /* @__PURE__ */ jsxs(Link, {
-        href: resourceLink,
-        fontFamily: "Roboto",
-        fontWeight: "500",
-        fontSize: "14px",
-        lineHeight: "16px",
-        color: vars("colors-neutral-gray"),
-        download: resourceNameFile,
-        textDecoration: "underline",
-        gap: "8px",
+      textAlign: "center",
+      display: "grid",
+      gap: "8px",
+      padding: "1rem",
+      transition: "box-shadow 0.3s ease-in-out",
+      _hover: {
+        shadow: "sm"
+      },
+      cursor: "pointer",
+      children: [/* @__PURE__ */ jsx(Box, {
+        children: /* @__PURE__ */ jsx(Icons, {
+          type: resourceType
+        })
+      }), /* @__PURE__ */ jsx(Box, {
+        children: /* @__PURE__ */ jsx(Text, {
+          fontFamily: "Roboto",
+          fontWeight: "700",
+          lineHeight: "21px",
+          fontSize: "16px",
+          color: "#555555",
+          m: "0px",
+          children: resourceTitle
+        })
+      }), /* @__PURE__ */ jsx(Box, {
+        children: /* @__PURE__ */ jsx(Text, {
+          fontFamily: "Roboto",
+          fontWeight: "400",
+          lineHeight: "14px",
+          fontSize: "12px",
+          color: "#555555",
+          m: "0px",
+          children: resourceDetail
+        })
+      }), /* @__PURE__ */ jsx(Box, {
         display: "flex",
-        children: [/* @__PURE__ */ jsx(Download, {
-          color: vars("colors-main-deepSkyBlue")
-        }), resourceTextDownload]
-      })
-    })]
+        alignItems: "center",
+        justifyContent: "center",
+        children: /* @__PURE__ */ jsxs(Text, {
+          fontFamily: "Roboto",
+          fontWeight: "500",
+          fontSize: "14px",
+          lineHeight: "16px",
+          color: vars("colors-neutral-gray"),
+          textDecoration: "underline",
+          gap: "8px",
+          display: "flex",
+          m: "0px",
+          children: [/* @__PURE__ */ jsx(Download, {
+            color: vars("colors-main-deepSkyBlue")
+          }), resourceTextDownload]
+        })
+      })]
+    })
   });
 };
-export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, CourseStatus, Events, FlashNotification, index as Icons, Label, ModalAlert, NewTooltip, Progress, Resources, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, CourseStatus, Eventos, FlashNotification, index as Icons, Label, ModalAlert, NewTooltip, Progress, Resources, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map