@learncard/react 2.6.67 → 2.6.68

package/dist/cjs/{CertificateDisplayCard-054609a1.js → CertificateDisplayCard-9ecac9b3.js}

@@ -153,6 +153,20 @@ const IssuerSeal = ({ className = "" }) => {
   }));
 };
 
+const LeftArrow = ({ className = "", size = "20" }) => {
+  return /* @__PURE__ */ React__default["default"].createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className
+  }, /* @__PURE__ */ React__default["default"].createElement("path", {
+    d: "M8.93299 17.942L1.43299 10.442C1.31582 10.3247 1.25 10.1657 1.25 9.99999C1.25 9.83423 1.31582 9.67526 1.43299 9.55802L8.93299 2.05802C9.02041 1.97062 9.13178 1.91111 9.25301 1.887C9.37425 1.8629 9.49991 1.87528 9.61412 1.92258C9.72832 1.96989 9.82593 2.04999 9.89461 2.15277C9.96329 2.25554 9.99995 2.37638 9.99996 2.49999V5.62499H16.25C16.5814 5.62537 16.8991 5.75718 17.1334 5.99152C17.3678 6.22586 17.4996 6.54358 17.5 6.87499V13.125C17.4996 13.4564 17.3678 13.7741 17.1334 14.0085C16.8991 14.2428 16.5814 14.3746 16.25 14.375H9.99996V17.5C9.99995 17.6236 9.96329 17.7444 9.89461 17.8472C9.82593 17.95 9.72832 18.0301 9.61412 18.0774C9.49991 18.1247 9.37425 18.1371 9.25301 18.113C9.13178 18.0889 9.02041 18.0294 8.93299 17.942Z",
+    fill: "currentColor"
+  }));
+};
+
 const Line = ({ className = "", width = "109" }) => {
   return /* @__PURE__ */ React__default["default"].createElement("svg", {
     width,
@@ -2732,7 +2746,9 @@ const CertificateBackFace = ({
   getFileMetadata,
   getVideoMetadata,
   onMediaAttachmentClick,
-  enableLightbox
+  enableLightbox,
+  showBackButton,
+  handleViewFrontFace
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const { createdAt, credentialSubject } = credential_helpers.getInfoFromCredential(credential, "MMM dd, yyyy", {
@@ -2750,7 +2766,15 @@ const CertificateBackFace = ({
   }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: `flex flex-col gap-[15px] items-center border-[5px] border-solid border-grayscale-200 py-[30px] px-[20px] rounded-[25px] ${bgColor}`
-  }, /* @__PURE__ */ React__default["default"].createElement("h1", {
+  }, showBackButton ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("button", {
+    className: "vc-card-back-button rounded-full h-[50px] px-[15px] flex items-center justify-center gap-[5px] z-50 text-[30px] text-white select-none",
+    onClick: () => handleViewFrontFace == null ? void 0 : handleViewFrontFace()
+  }, /* @__PURE__ */ React__default["default"].createElement(LeftArrow, {
+    className: "text-white",
+    size: "25"
+  }), "Details")) : /* @__PURE__ */ React__default["default"].createElement("h1", {
     className: "text-white text-center text-[22px] font-jacques"
   }, "Details"), /* @__PURE__ */ React__default["default"].createElement(TruncateTextBox, {
     headerText: "About",
@@ -2904,6 +2928,7 @@ const VERIFIER_STATES = {
   untrustedVerifier: "Untrusted Verifier"
 };
 const CertificateFrontFace = ({
+  isFront,
   credential,
   categoryType,
   issuerOverride,
@@ -2913,7 +2938,8 @@ const CertificateFrontFace = ({
   issuerImageComponent,
   customBodyCardComponent,
   hideIssueDate,
-  handleViewBackFace
+  handleViewBackFace,
+  showDetailsBtn = false
 }) => {
   var _a, _b;
   const {
@@ -3005,7 +3031,11 @@ const CertificateFrontFace = ({
   }, description), /* @__PURE__ */ React__default["default"].createElement(VCDisplayCardSkillsCount, {
     skills: (_b = credential == null ? void 0 : credential.skills) != null ? _b : [],
     onClick: handleViewBackFace
-  })), /* @__PURE__ */ React__default["default"].createElement("div", {
+  }), isFront && showDetailsBtn && /* @__PURE__ */ React__default["default"].createElement("button", {
+    type: "button",
+    className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[25px] w-fit select-none",
+    onClick: () => handleViewBackFace == null ? void 0 : handleViewBackFace()
+  }, "Details")), /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "flex flex-col gap-[5px] items-center w-full"
   }, /* @__PURE__ */ React__default["default"].createElement("span", {
     className: "font-jacques text-[12px] text-grayscale-800"
@@ -3061,7 +3091,9 @@ const CertificateDisplayCard = ({
   onDotsClick,
   isFrontOverride,
   setIsFrontOverride,
-  hideNavButtons
+  hideNavButtons,
+  showBackButton = false,
+  showDetailsBtn = false
 }) => {
   const [_isFront, _setIsFront] = React.useState(isFrontOverride != null ? isFrontOverride : true);
   const isFront = isFrontOverride != null ? isFrontOverride : _isFront;
@@ -3093,7 +3125,9 @@ const CertificateDisplayCard = ({
     issuerImageComponent,
     customBodyCardComponent,
     hideIssueDate,
-    handleViewBackFace: () => setIsFront(!isFront)
+    handleViewBackFace: () => setIsFront(!isFront),
+    isFront,
+    showDetailsBtn
   }), !isFront && /* @__PURE__ */ React__default["default"].createElement(CertificateBackFace, {
     credential,
     categoryType,
@@ -3101,7 +3135,9 @@ const CertificateDisplayCard = ({
     getFileMetadata,
     getVideoMetadata,
     onMediaAttachmentClick,
-    enableLightbox
+    enableLightbox,
+    showBackButton: showBackButton && !hideNavButtons || showDetailsBtn,
+    handleViewFrontFace: () => setIsFront(!isFront)
   }), onDotsClick && /* @__PURE__ */ React__default["default"].createElement("button", {
     className: "absolute right-[-20px] top-[-52px] bg-white rounded-full p-[10px] shadow-bottom",
     onClick: onDotsClick
@@ -3121,6 +3157,7 @@ exports.CertificateFrontFace = CertificateFrontFace;
 exports.ExclamationPoint = ExclamationPoint;
 exports.GenericDocumentIcon = GenericDocumentIcon;
 exports.InfoIcon = InfoIcon;
+exports.LeftArrow = LeftArrow;
 exports.LinkIcon = LinkIcon;
 exports.PersonBadge = PersonBadge;
 exports.RedFlag = RedFlag;
@@ -3135,4 +3172,4 @@ exports.capitalize = capitalize;
 exports.getBaseUrl = getBaseUrl;
 exports.prettyBytes = prettyBytes;
 exports.truncateWithEllipsis = truncateWithEllipsis;
-//# sourceMappingURL=CertificateDisplayCard-054609a1.js.map
+//# sourceMappingURL=CertificateDisplayCard-9ecac9b3.js.map