@learncard/react 2.6.67 → 2.6.68

package/dist/cjs/index6.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('./CaretRightFilled.svg');
-var CertificateDisplayCard = require('./CertificateDisplayCard-054609a1.js');
+var CertificateDisplayCard = require('./CertificateDisplayCard-9ecac9b3.js');
 require('./VCVerificationPill-0b0f6894.js');
 require('./icons-9878f84c.js');
 require('./index-503d0d98.js');

package/dist/esm/{CertificateDisplayCard-2d4eb309.js → CertificateDisplayCard-d1488463.js}

@@ -136,6 +136,20 @@ const IssuerSeal = ({ className = "" }) => {
   }));
 };
 
+const LeftArrow = ({ className = "", size = "20" }) => {
+  return /* @__PURE__ */ React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className
+  }, /* @__PURE__ */ React.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.createElement("svg", {
     width,
@@ -2715,7 +2729,9 @@ const CertificateBackFace = ({
   getFileMetadata,
   getVideoMetadata,
   onMediaAttachmentClick,
-  enableLightbox
+  enableLightbox,
+  showBackButton,
+  handleViewFrontFace
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const { createdAt, credentialSubject } = getInfoFromCredential(credential, "MMM dd, yyyy", {
@@ -2733,7 +2749,15 @@ const CertificateBackFace = ({
   }
   return /* @__PURE__ */ React.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.createElement("h1", {
+  }, showBackButton ? /* @__PURE__ */ React.createElement("div", {
+    className: "w-full"
+  }, /* @__PURE__ */ React.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.createElement(LeftArrow, {
+    className: "text-white",
+    size: "25"
+  }), "Details")) : /* @__PURE__ */ React.createElement("h1", {
     className: "text-white text-center text-[22px] font-jacques"
   }, "Details"), /* @__PURE__ */ React.createElement(TruncateTextBox, {
     headerText: "About",
@@ -2887,6 +2911,7 @@ const VERIFIER_STATES = {
   untrustedVerifier: "Untrusted Verifier"
 };
 const CertificateFrontFace = ({
+  isFront,
   credential,
   categoryType,
   issuerOverride,
@@ -2896,7 +2921,8 @@ const CertificateFrontFace = ({
   issuerImageComponent,
   customBodyCardComponent,
   hideIssueDate,
-  handleViewBackFace
+  handleViewBackFace,
+  showDetailsBtn = false
 }) => {
   var _a, _b;
   const {
@@ -2988,7 +3014,11 @@ const CertificateFrontFace = ({
   }, description), /* @__PURE__ */ React.createElement(VCDisplayCardSkillsCount, {
     skills: (_b = credential == null ? void 0 : credential.skills) != null ? _b : [],
     onClick: handleViewBackFace
-  })), /* @__PURE__ */ React.createElement("div", {
+  }), isFront && showDetailsBtn && /* @__PURE__ */ React.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.createElement("div", {
     className: "flex flex-col gap-[5px] items-center w-full"
   }, /* @__PURE__ */ React.createElement("span", {
     className: "font-jacques text-[12px] text-grayscale-800"
@@ -3044,7 +3074,9 @@ const CertificateDisplayCard = ({
   onDotsClick,
   isFrontOverride,
   setIsFrontOverride,
-  hideNavButtons
+  hideNavButtons,
+  showBackButton = false,
+  showDetailsBtn = false
 }) => {
   const [_isFront, _setIsFront] = useState(isFrontOverride != null ? isFrontOverride : true);
   const isFront = isFrontOverride != null ? isFrontOverride : _isFront;
@@ -3076,7 +3108,9 @@ const CertificateDisplayCard = ({
     issuerImageComponent,
     customBodyCardComponent,
     hideIssueDate,
-    handleViewBackFace: () => setIsFront(!isFront)
+    handleViewBackFace: () => setIsFront(!isFront),
+    isFront,
+    showDetailsBtn
   }), !isFront && /* @__PURE__ */ React.createElement(CertificateBackFace, {
     credential,
     categoryType,
@@ -3084,7 +3118,9 @@ const CertificateDisplayCard = ({
     getFileMetadata,
     getVideoMetadata,
     onMediaAttachmentClick,
-    enableLightbox
+    enableLightbox,
+    showBackButton: showBackButton && !hideNavButtons || showDetailsBtn,
+    handleViewFrontFace: () => setIsFront(!isFront)
   }), onDotsClick && /* @__PURE__ */ React.createElement("button", {
     className: "absolute right-[-20px] top-[-52px] bg-white rounded-full p-[10px] shadow-bottom",
     onClick: onDotsClick
@@ -3095,5 +3131,5 @@ const CertificateDisplayCard = ({
   })));
 };
 
-export { AcuteCheckmark as A, CertificateBackFace as C, ExclamationPoint as E, GenericDocumentIcon as G, InfoIcon as I, LinkIcon as L, PersonBadge as P, RedFlag as R, SelectedSkills as S, UnknownVerifierBadge as U, VCDisplayCardSkillsCount as V, X, CertificateDisplayCard as a, CertificateFrontFace as b, VideoIcon as c, Camera as d, capitalize as e, SkillsBox as f, getBaseUrl as g, AlignmentsBox as h, VerifiedBadge as i, prettyBytes as p, truncateWithEllipsis as t };
-//# sourceMappingURL=CertificateDisplayCard-2d4eb309.js.map
+export { AcuteCheckmark as A, CertificateBackFace as C, ExclamationPoint as E, GenericDocumentIcon as G, InfoIcon as I, LinkIcon as L, PersonBadge as P, RedFlag as R, SelectedSkills as S, UnknownVerifierBadge as U, VCDisplayCardSkillsCount as V, X, CertificateDisplayCard as a, CertificateFrontFace as b, VideoIcon as c, Camera as d, capitalize as e, LeftArrow as f, getBaseUrl as g, SkillsBox as h, AlignmentsBox as i, VerifiedBadge as j, prettyBytes as p, truncateWithEllipsis as t };
+//# sourceMappingURL=CertificateDisplayCard-d1488463.js.map