@learncard/react 2.2.7 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/README.md +25 -1
  2. package/dist/base.css +1 -0
  3. package/dist/base.js +3 -0
  4. package/dist/cjs/{Notification-e4f124f5.js → Notification-cf0cdc81.js} +2 -4
  5. package/dist/cjs/Notification-cf0cdc81.js.map +1 -0
  6. package/dist/cjs/{VCCard-67d87d52.js → VCCard-0e8b348d.js} +91 -1021
  7. package/dist/cjs/VCCard-0e8b348d.js.map +1 -0
  8. package/dist/cjs/index.js +5 -33
  9. package/dist/cjs/index.js.map +1 -1
  10. package/dist/cjs/index11.js +1 -1
  11. package/dist/cjs/index5.js +5 -5
  12. package/dist/cjs/index8.js +1 -1
  13. package/dist/esm/{Notification-98535e6d.js → Notification-4e197485.js} +2 -4
  14. package/dist/esm/Notification-4e197485.js.map +1 -0
  15. package/dist/esm/{VCCard-a0242924.js → VCCard-2b326e89.js} +91 -1021
  16. package/dist/esm/VCCard-2b326e89.js.map +1 -0
  17. package/dist/esm/index.js +4 -34
  18. package/dist/esm/index.js.map +1 -1
  19. package/dist/esm/index11.js +1 -1
  20. package/dist/esm/index5.js +4 -4
  21. package/dist/esm/index8.js +1 -1
  22. package/dist/main.css +1 -0
  23. package/dist/main.js +3 -0
  24. package/package.json +4 -3
  25. package/dist/cjs/Notification-e4f124f5.js.map +0 -1
  26. package/dist/cjs/VCCard-67d87d52.js.map +0 -1
  27. package/dist/esm/Notification-98535e6d.js.map +0 -1
  28. package/dist/esm/VCCard-a0242924.js.map +0 -1
package/README.md CHANGED
@@ -20,8 +20,10 @@ pnpm install @learncard/react
20
20
 
21
21
  ## Usage
22
22
 
23
- ```js
23
+ ```ts
24
24
  import React, { useState, useEffect } from "react";
25
+ import '@learncard/react/dist/base.css'; // if not already using tailwind
26
+ import '@learncard/react/dist/main.css';
25
27
  import { walletFromKey } from "@learncard/core";
26
28
  import { VCCard } from "@learncard/react";
27
29
  import { VC } from "@learncard/types";
@@ -45,7 +47,29 @@ const Test = () => {
45
47
  };
46
48
  ```
47
49
 
50
+ ### Styles
51
+
52
+ `@learncard/react` uses [tailwind](https://tailwindcss.com/) for styles, and exports two css files
53
+ for consumers: `base.css` and `main.css`. If you are already using Tailwind, you do not need to import
54
+ `base.css`, as it is simply re-exposing `@tailwind base` and `@tailwindcss/components`. However, you
55
+ _will_ need to import `main.css`, because it imports the tailwind classes used by our components, as
56
+ well as our bespoke CSS classes.
57
+
58
+ #### If using Tailwind already
59
+
60
+ ```ts
61
+ import '@learncard/react/dist/main.css';
62
+ ```
63
+
64
+ #### If not using Tailwind already
65
+
66
+ ```ts
67
+ import '@learncard/react/dist/base.css';
68
+ import '@learncard/react/dist/main.css';
69
+ ```
70
+
48
71
  ## Contributing
72
+
49
73
  Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
50
74
 
51
75
  Please make sure to update tests as appropriate.
package/dist/base.css ADDED
@@ -0,0 +1 @@
1
+ /*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}
package/dist/base.js ADDED
@@ -0,0 +1,3 @@
1
+ var css = "/*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}";
2
+
3
+ export { css, css as default };
package/dist/cjs/{Notification-e4f124f5.js → Notification-cf0cdc81.js} RENAMED
@@ -108,7 +108,7 @@ const Notification = ({
108
108
  })), /* @__PURE__ */ React__default["default"].createElement("div", {
109
109
  className: "text-left ml-3"
110
110
  }, /* @__PURE__ */ React__default["default"].createElement("h4", {
111
- className: "font-bold tracking-wide line-clamp-1",
111
+ className: "font-bold tracking-wide line-clamp-1 text-black",
112
112
  "data-testid": "notification-title"
113
113
  }, title), /* @__PURE__ */ React__default["default"].createElement("p", {
114
114
  className: `font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`,
@@ -124,12 +124,10 @@ const Notification = ({
124
124
  className: "flex items-center justify-between w-full mt-3"
125
125
  }, /* @__PURE__ */ React__default["default"].createElement("button", {
126
126
  onClick,
127
- type: "button",
128
127
  className: `flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`,
129
128
  role: "button",
130
129
  name: "notification-view-button"
131
130
  }, "View"), /* @__PURE__ */ React__default["default"].createElement("button", {
132
- type: "button",
133
131
  className: `flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`,
134
132
  onClick: handleClaim,
135
133
  role: "button",
@@ -141,4 +139,4 @@ const Notification = ({
141
139
 
142
140
  exports.Notification = Notification;
143
141
  exports.NotificationTypeStyles = NotificationTypeStyles;
144
- //# sourceMappingURL=Notification-e4f124f5.js.map
142
+ //# sourceMappingURL=Notification-cf0cdc81.js.map
package/dist/cjs/Notification-cf0cdc81.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Notification-cf0cdc81.js","sources":["../../src/constants/notifications.ts","../../src/components/Notification/types.ts","../../src/components/Notification/Notification.tsx"],"sourcesContent":["export enum NotificationTypeEnum {\n Currency = 'currency',\n ID = 'id',\n Achievement = 'achievement',\n Skill = 'skill',\n Job = 'job',\n Learning = 'learning',\n}\n","import { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Trophy from '../svgs/Trophy';\nimport Coins from '../svgs/Coins';\nimport User from '../svgs/User';\nimport Briefcase from '../svgs/Briefcase';\nimport Lightbulb from '../svgs/Lightbulb';\nimport Graduation from '../svgs/Graduation';\n\nexport type NotificationProps = {\n notificationType: NotificationTypeEnum;\n title: string;\n issuerImage?: string;\n issuerName: string;\n issueDate: string;\n className?: string;\n onClick: () => void;\n};\n\nexport const NotificationTypeStyles = {\n [NotificationTypeEnum.Currency]: {\n viewButtonStyles: 'border-cyan-400 text-cyan-400',\n unclaimedButtonStyles: 'text-white bg-cyan-400 border-cyan-400',\n claimedButtonStyles: 'text-cyan-400 bg-cyan-50 border-cyan-50',\n textStyles: 'text-cyan-400 capitalize',\n iconCircleStyles: 'bg-cyan-400',\n IconComponent: Coins,\n },\n [NotificationTypeEnum.ID]: {\n viewButtonStyles: 'border-yellow-400 text-yellow-400',\n unclaimedButtonStyles: 'text-white bg-yellow-400 border-yellow-400',\n claimedButtonStyles: 'text-yellow-400 bg-yellow-50 border-yellow-50',\n textStyles: 'text-yellow-400 uppercase',\n iconCircleStyles: 'bg-yellow-400',\n IconComponent: User,\n },\n [NotificationTypeEnum.Achievement]: {\n viewButtonStyles: 'border-spice-400 text-spice-400',\n unclaimedButtonStyles: 'text-white bg-spice-400 border-spice-400',\n claimedButtonStyles: 'text-spice-400 bg-spice-50 border-spice-50',\n textStyles: 'text-spice-400 capitalize',\n iconCircleStyles: 'bg-spice-400',\n IconComponent: Trophy,\n },\n [NotificationTypeEnum.Skill]: {\n viewButtonStyles: 'border-indigo-400 text-indigo-400',\n unclaimedButtonStyles: 'text-white bg-indigo-400 border-indigo-400',\n claimedButtonStyles: 'text-indigo-400 bg-indigo-50 border-indigo-50',\n textStyles: 'text-indigo-400 capitalize',\n iconCircleStyles: 'bg-indigo-400',\n IconComponent: Lightbulb,\n },\n [NotificationTypeEnum.Job]: {\n viewButtonStyles: 'border-emerald-400 text-emerald-400',\n unclaimedButtonStyles: 'text-white bg-emerald-400 border-emerald-400',\n claimedButtonStyles: 'text-emerald-400 bg-emerald-50 border-emerald-50',\n textStyles: 'text-emerald-400 capitalize',\n iconCircleStyles: 'bg-emerald-400',\n IconComponent: Briefcase,\n },\n [NotificationTypeEnum.Learning]: {\n viewButtonStyles: 'border-rose-400 text-rose-400',\n unclaimedButtonStyles: 'text-white bg-rose-400 border-rose-400',\n claimedButtonStyles: 'text-rose-400 bg-rose-50 border-rose-50',\n textStyles: 'text-rose-400 capitalize',\n iconCircleStyles: 'bg-rose-400',\n IconComponent: Graduation,\n },\n};\n","import React, { useState } from 'react';\n\nimport { NotificationProps, NotificationTypeStyles } from './types';\nimport { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Checkmark from '../svgs/Checkmark';\n\nexport const Notification: React.FC<NotificationProps> = ({\n title,\n issuerImage,\n issuerName,\n issueDate,\n className,\n notificationType = NotificationTypeEnum.Achievement,\n onClick = () => {},\n}) => {\n const [isClaimed, setIsClaimed] = useState<boolean>(false);\n\n const handleClaim = () => setIsClaimed(!isClaimed);\n\n const {\n IconComponent,\n iconCircleStyles,\n textStyles,\n viewButtonStyles,\n claimedButtonStyles,\n unclaimedButtonStyles,\n } = NotificationTypeStyles[notificationType];\n\n const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;\n\n return (\n <div\n className={`flex justify-center items-center relative w-full rounded-3xl shadow-2xl py-3 bg-white ${className}`}\n >\n <div\n className={`absolute flex items-center justify-center top-2 right-2 h-8 w-8 overflow-hidden rounded-full z-10 ${iconCircleStyles}`}\n >\n <IconComponent className=\"h-4/5 text-white\" />\n </div>\n <div className=\"flex flex-col justify-center items-center relative w-11/12\">\n <div className=\"flex flex-row items-center justify-start w-full\">\n <div className=\"h-12 w-12 max-h-12 max-w-[48px] min-h-[48px] min-w-[48px] overflow-hidden rounded-full\">\n <img\n src={issuerImage}\n alt=\"issuer image\"\n className=\"w-full h-full object-cover\"\n />\n </div>\n <div className=\"text-left ml-3\">\n <h4\n className=\"font-bold tracking-wide line-clamp-1 text-black\"\n data-testid=\"notification-title\"\n >\n {title}\n </h4>\n <p\n className={`font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`}\n data-testid=\"notification-type\"\n >\n {notificationType} / <span className=\"normal-case\">lorem ipsum</span>\n </p>\n <p\n className=\"text-grayscale-600 p-0 m-0 leading-none tracking-wide mt-[1px] line-clamp-1\"\n data-testid=\"notification-issuer-name\"\n >\n Issued by {issuerName} •{' '}\n <span data-testid=\"notification-cred-issue-date\">{issueDate}</span>\n </p>\n </div>\n </div>\n <div className=\"flex items-center justify-between w-full mt-3\">\n <button\n onClick={onClick}\n className={`flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`}\n role=\"button\"\n name=\"notification-view-button\"\n >\n View\n </button>\n <button\n className={`flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}\n onClick={handleClaim}\n role=\"button\"\n name=\"notification-claim-button\"\n >\n {isClaimed && <Checkmark className=\"h-[24px] p-0 m-0\" />}{' '}\n {isClaimed ? 'Claimed' : 'Claim'}\n </button>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Notification;\n"],"names":["Coins","User","Trophy","Lightbulb","Briefcase","Graduation","useState","React","Checkmark"],"mappings":"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"}