@learncard/react 2.3.24 → 2.3.27

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 (150) hide show
  1. package/dist/cjs/CircleIcon-45ef66fd.js.map +1 -1
  2. package/dist/cjs/CourseCard-c3c13b2c.js +91 -0
  3. package/dist/cjs/CourseCard-c3c13b2c.js.map +1 -0
  4. package/dist/cjs/FlippyCard-33e03a9e.js.map +1 -1
  5. package/dist/cjs/{QRCodeCard-9f777402.js → QRCodeCard-efaa58e1.js} +12 -5
  6. package/dist/cjs/QRCodeCard-efaa58e1.js.map +1 -0
  7. package/dist/cjs/SchoolIDCard-32a47ae5.js +4716 -0
  8. package/dist/cjs/SchoolIDCard-32a47ae5.js.map +1 -0
  9. package/dist/cjs/SkillVerticalCard-3eb3a8e9.js +35 -0
  10. package/dist/cjs/SkillVerticalCard-3eb3a8e9.js.map +1 -0
  11. package/dist/cjs/SkillsCard-4b6dbb4f.js +66 -0
  12. package/dist/cjs/SkillsCard-4b6dbb4f.js.map +1 -0
  13. package/dist/cjs/SkillsStatsCard-97a35a88.js +77 -0
  14. package/dist/cjs/SkillsStatsCard-97a35a88.js.map +1 -0
  15. package/dist/cjs/{VCCard-6110f981.js → VCCard-1f3baae6.js} +4815 -1696
  16. package/dist/{esm/VCCard-ddbb8820.js.map → cjs/VCCard-1f3baae6.js.map} +1 -1
  17. package/dist/cjs/{VCDisplayCard-ab6c04d6.js → VCDisplayCard-8504d499.js} +5 -5
  18. package/dist/cjs/{VCDisplayCard-ab6c04d6.js.map → VCDisplayCard-8504d499.js.map} +1 -1
  19. package/dist/cjs/index.js +20 -3
  20. package/dist/cjs/index.js.map +1 -1
  21. package/dist/cjs/index10.js +3 -5
  22. package/dist/cjs/index10.js.map +1 -1
  23. package/dist/cjs/index11.js +5 -3
  24. package/dist/cjs/index11.js.map +1 -1
  25. package/dist/cjs/index12.js +3 -18
  26. package/dist/cjs/index12.js.map +1 -1
  27. package/dist/cjs/index13.js +18 -3
  28. package/dist/cjs/index13.js.map +1 -1
  29. package/dist/cjs/index14.js +2 -9
  30. package/dist/cjs/index14.js.map +1 -1
  31. package/dist/cjs/index15.js +3 -23
  32. package/dist/cjs/index15.js.map +1 -1
  33. package/dist/cjs/index16.js +3 -10
  34. package/dist/cjs/index16.js.map +1 -1
  35. package/dist/cjs/index17.js +3 -14
  36. package/dist/cjs/index17.js.map +1 -1
  37. package/dist/cjs/index18.js +7 -4
  38. package/dist/cjs/index18.js.map +1 -1
  39. package/dist/cjs/index19.js +9 -4
  40. package/dist/cjs/index19.js.map +1 -1
  41. package/dist/cjs/index20.js +21 -3
  42. package/dist/cjs/index20.js.map +1 -1
  43. package/dist/cjs/index21.js +7 -2
  44. package/dist/cjs/index21.js.map +1 -1
  45. package/dist/cjs/index22.js +23 -0
  46. package/dist/cjs/index22.js.map +1 -0
  47. package/dist/cjs/index23.js +9 -0
  48. package/dist/cjs/index23.js.map +1 -0
  49. package/dist/cjs/index24.js +13 -0
  50. package/dist/cjs/index24.js.map +1 -0
  51. package/dist/cjs/index25.js +14 -0
  52. package/dist/cjs/index25.js.map +1 -0
  53. package/dist/cjs/index26.js +14 -0
  54. package/dist/cjs/index26.js.map +1 -0
  55. package/dist/cjs/index4.js +6 -2
  56. package/dist/cjs/index4.js.map +1 -1
  57. package/dist/cjs/index5.js +0 -79
  58. package/dist/cjs/index5.js.map +1 -1
  59. package/dist/cjs/index6.js +95 -0
  60. package/dist/cjs/index6.js.map +1 -1
  61. package/dist/cjs/index7.js +3 -5
  62. package/dist/cjs/index7.js.map +1 -1
  63. package/dist/cjs/index8.js +5 -2
  64. package/dist/cjs/index8.js.map +1 -1
  65. package/dist/cjs/index9.js +2 -3
  66. package/dist/cjs/index9.js.map +1 -1
  67. package/dist/cjs/lhplaceholder.png +0 -0
  68. package/dist/cjs/minijob.svg +5 -0
  69. package/dist/cjs/minipuzzle.svg +3 -0
  70. package/dist/cjs/minitrophy.svg +3 -0
  71. package/dist/cjs/skillgraph.svg +29 -0
  72. package/dist/cjs/skillplaceholder.png +0 -0
  73. package/dist/esm/CircleIcon-7c21af00.js.map +1 -1
  74. package/dist/esm/CourseCard-b9e42233.js +81 -0
  75. package/dist/esm/CourseCard-b9e42233.js.map +1 -0
  76. package/dist/esm/FlippyCard-682649d7.js.map +1 -1
  77. package/dist/esm/{QRCodeCard-11e192b2.js → QRCodeCard-c57e2067.js} +12 -5
  78. package/dist/esm/QRCodeCard-c57e2067.js.map +1 -0
  79. package/dist/esm/SchoolIDCard-4f56262c.js +4710 -0
  80. package/dist/esm/SchoolIDCard-4f56262c.js.map +1 -0
  81. package/dist/esm/SkillVerticalCard-108f49bb.js +28 -0
  82. package/dist/esm/SkillVerticalCard-108f49bb.js.map +1 -0
  83. package/dist/esm/SkillsCard-92a51db2.js +59 -0
  84. package/dist/esm/SkillsCard-92a51db2.js.map +1 -0
  85. package/dist/esm/SkillsStatsCard-1628fe9c.js +70 -0
  86. package/dist/esm/SkillsStatsCard-1628fe9c.js.map +1 -0
  87. package/dist/esm/{VCCard-ddbb8820.js → VCCard-f4b7a89b.js} +4815 -1696
  88. package/dist/{cjs/VCCard-6110f981.js.map → esm/VCCard-f4b7a89b.js.map} +1 -1
  89. package/dist/esm/{VCDisplayCard-5d0628ee.js → VCDisplayCard-b45533e8.js} +5 -5
  90. package/dist/esm/{VCDisplayCard-5d0628ee.js.map → VCDisplayCard-b45533e8.js.map} +1 -1
  91. package/dist/esm/index.js +14 -3
  92. package/dist/esm/index.js.map +1 -1
  93. package/dist/esm/index10.js +2 -3
  94. package/dist/esm/index10.js.map +1 -1
  95. package/dist/esm/index11.js +3 -2
  96. package/dist/esm/index11.js.map +1 -1
  97. package/dist/esm/index12.js +2 -14
  98. package/dist/esm/index12.js.map +1 -1
  99. package/dist/esm/index13.js +14 -2
  100. package/dist/esm/index13.js.map +1 -1
  101. package/dist/esm/index14.js +1 -2
  102. package/dist/esm/index14.js.map +1 -1
  103. package/dist/esm/index15.js +1 -22
  104. package/dist/esm/index15.js.map +1 -1
  105. package/dist/esm/index16.js +2 -9
  106. package/dist/esm/index16.js.map +1 -1
  107. package/dist/esm/index17.js +2 -13
  108. package/dist/esm/index17.js.map +1 -1
  109. package/dist/esm/index18.js +2 -4
  110. package/dist/esm/index18.js.map +1 -1
  111. package/dist/esm/index19.js +2 -3
  112. package/dist/esm/index19.js.map +1 -1
  113. package/dist/esm/index20.js +20 -1
  114. package/dist/esm/index20.js.map +1 -1
  115. package/dist/esm/index21.js +6 -1
  116. package/dist/esm/index21.js.map +1 -1
  117. package/dist/esm/index22.js +15 -0
  118. package/dist/esm/index22.js.map +1 -0
  119. package/dist/esm/index23.js +6 -0
  120. package/dist/esm/index23.js.map +1 -0
  121. package/dist/esm/index24.js +5 -0
  122. package/dist/esm/index24.js.map +1 -0
  123. package/dist/esm/index25.js +5 -0
  124. package/dist/esm/index25.js.map +1 -0
  125. package/dist/esm/index26.js +6 -0
  126. package/dist/esm/index26.js.map +1 -0
  127. package/dist/esm/index4.js +5 -1
  128. package/dist/esm/index4.js.map +1 -1
  129. package/dist/esm/index5.js +0 -50
  130. package/dist/esm/index5.js.map +1 -1
  131. package/dist/esm/index6.js +60 -0
  132. package/dist/esm/index6.js.map +1 -1
  133. package/dist/esm/index7.js +2 -4
  134. package/dist/esm/index7.js.map +1 -1
  135. package/dist/esm/index8.js +4 -1
  136. package/dist/esm/index8.js.map +1 -1
  137. package/dist/esm/index9.js +1 -2
  138. package/dist/esm/index9.js.map +1 -1
  139. package/dist/esm/lhplaceholder.png +0 -0
  140. package/dist/esm/minijob.svg +5 -0
  141. package/dist/esm/minipuzzle.svg +3 -0
  142. package/dist/esm/minitrophy.svg +3 -0
  143. package/dist/esm/skillgraph.svg +29 -0
  144. package/dist/esm/skillplaceholder.png +0 -0
  145. package/dist/index.d.ts +115 -16
  146. package/dist/main.css +1 -1
  147. package/dist/main.js +1 -1
  148. package/package.json +3 -2
  149. package/dist/cjs/QRCodeCard-9f777402.js.map +0 -1
  150. package/dist/esm/QRCodeCard-11e192b2.js.map +0 -1
@@ -0,0 +1,35 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var SkillPlaceholder = require('./skillplaceholder.png');
5
+
6
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
7
+
8
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
9
+ var SkillPlaceholder__default = /*#__PURE__*/_interopDefaultLegacy(SkillPlaceholder);
10
+
11
+ const SkillVerticalCard = ({
12
+ title = "Creative Thinking",
13
+ thumbImg,
14
+ className,
15
+ onClick = () => {
16
+ }
17
+ }) => {
18
+ const thumbSrc = thumbImg || SkillPlaceholder__default["default"];
19
+ return /* @__PURE__ */ React__default["default"].createElement("div", {
20
+ onClick,
21
+ className: `flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`
22
+ }, /* @__PURE__ */ React__default["default"].createElement("section", {
23
+ className: "flex skill-vert-card-title-container items-center bg-indigo-600 h-[76px] justify-center items-center"
24
+ }, /* @__PURE__ */ React__default["default"].createElement("h3", {
25
+ className: "text-[14px] font-semibold text-white"
26
+ }, title)), /* @__PURE__ */ React__default["default"].createElement("section", {
27
+ className: "skill-vert-card-details my-[5px] flex items-center justify-center overflow-hidden pt-[5px]"
28
+ }, /* @__PURE__ */ React__default["default"].createElement("img", {
29
+ src: thumbSrc,
30
+ className: "skill-vert-thumb object-cover overflow-hidden w-[140px] h-[119px] rounded-[20px]"
31
+ })));
32
+ };
33
+
34
+ exports.SkillVerticalCard = SkillVerticalCard;
35
+ //# sourceMappingURL=SkillVerticalCard-3eb3a8e9.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SkillVerticalCard-3eb3a8e9.js","sources":["../../src/components/SkillVerticalCard/SkillVerticalCard.tsx"],"sourcesContent":["import React from 'react';\nimport { SkillVerticalCardProps } from '../../types';\nimport SkillPlaceholder from '../../assets/images/skillplaceholder.png';\n\nexport const SkillVerticalCard: React.FC<SkillVerticalCardProps> = ({\n title = 'Creative Thinking',\n thumbImg,\n className,\n onClick = () => {},\n}) => {\n const thumbSrc = thumbImg || SkillPlaceholder;\n\n return (\n <div\n onClick={onClick}\n className={`flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`}\n >\n <section className=\"flex skill-vert-card-title-container items-center bg-indigo-600 h-[76px] justify-center items-center\">\n <h3 className=\"text-[14px] font-semibold text-white\">{title}</h3>\n </section>\n\n <section className=\"skill-vert-card-details my-[5px] flex items-center justify-center overflow-hidden pt-[5px]\">\n <img\n src={thumbSrc}\n className=\"skill-vert-thumb object-cover overflow-hidden w-[140px] h-[119px] rounded-[20px]\"\n />\n </section>\n </div>\n );\n};\n\nexport default SkillVerticalCard;\n"],"names":["SkillPlaceholder","React"],"mappings":";;;;;;;;;;AAEY,MAAC,iBAAiB,GAAG,CAAC;AAClC,EAAE,KAAK,GAAG,mBAAmB;AAC7B,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,EAAE,OAAO,GAAG,MAAM;AAClB,GAAG;AACH,CAAC,KAAK;AACN,EAAE,MAAM,QAAQ,GAAG,QAAQ,IAAIA,oCAAgB,CAAC;AAChD,EAAE,uBAAuBC,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,OAAO;AACX,IAAI,SAAS,EAAE,CAAC,8HAA8H,EAAE,SAAS,CAAC,CAAC;AAC3J,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,SAAS,EAAE,sGAAsG;AACrH,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,IAAI,EAAE;AAC/C,IAAI,SAAS,EAAE,sCAAsC;AACrD,GAAG,EAAE,KAAK,CAAC,CAAC,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7D,IAAI,SAAS,EAAE,4FAA4F;AAC3G,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,GAAG,EAAE,QAAQ;AACjB,IAAI,SAAS,EAAE,kFAAkF;AACjG,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;;;;"}
@@ -0,0 +1,66 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+
5
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
6
+
7
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
8
+
9
+ const SkillsMeterSegment = ({
10
+ filled = false,
11
+ className,
12
+ skillColor = "bg-cyan-700"
13
+ }) => {
14
+ const bgColor = filled ? skillColor : "bg-gray-200";
15
+ return /* @__PURE__ */ React__default["default"].createElement("div", {
16
+ className: `skills-meter-segment h-[20px] w-full max-w-[27px] ${bgColor} mr-[5px] rounded-[5px]`
17
+ });
18
+ };
19
+ const SkillsCard = ({
20
+ count = 14,
21
+ title = "Creative Thinking",
22
+ level = "Expert",
23
+ category = "Creativity",
24
+ levelCount = 9,
25
+ skillColor = "bg-cyan-700",
26
+ className,
27
+ onClick = () => {
28
+ }
29
+ }) => {
30
+ const renderSkillsMeter = () => {
31
+ const num = levelCount;
32
+ const skillMeter = [...Array(10).keys()].map((counter) => {
33
+ console.log("///counter", counter, "num", num);
34
+ const filled = counter < num;
35
+ return /* @__PURE__ */ React__default["default"].createElement(SkillsMeterSegment, {
36
+ filled,
37
+ key: counter,
38
+ skillColor
39
+ });
40
+ });
41
+ return skillMeter;
42
+ };
43
+ const skillsMeter = renderSkillsMeter();
44
+ return /* @__PURE__ */ React__default["default"].createElement("div", {
45
+ onClick,
46
+ className: `flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] h-[129px] rounded-[20px] ${className}`
47
+ }, /* @__PURE__ */ React__default["default"].createElement("section", {
48
+ className: "flex skill-card-title-container items-center"
49
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
50
+ className: "flex items-center justify-center skill-count-display text-[20px] min-w-[30px] bg-grayscale-100 rounded-full px-[5px] mr-[8px]"
51
+ }, count), /* @__PURE__ */ React__default["default"].createElement("h3", {
52
+ className: "text-[17px] font-semibold"
53
+ }, title)), /* @__PURE__ */ React__default["default"].createElement("section", {
54
+ className: "skill-card-details my-[5px]"
55
+ }, /* @__PURE__ */ React__default["default"].createElement("p", {
56
+ className: "text-sm text-gray-900 font-semibold"
57
+ }, "Skill Level: ", level), /* @__PURE__ */ React__default["default"].createElement("p", {
58
+ className: "text-sm text-gray-900 font-semibold"
59
+ }, "Categories: ", category)), /* @__PURE__ */ React__default["default"].createElement("section", {
60
+ className: "flex w-full skill-meter-full mt-[8px]"
61
+ }, skillsMeter));
62
+ };
63
+
64
+ exports.SkillsCard = SkillsCard;
65
+ exports.SkillsMeterSegment = SkillsMeterSegment;
66
+ //# sourceMappingURL=SkillsCard-4b6dbb4f.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SkillsCard-4b6dbb4f.js","sources":["../../src/components/SkillsCard/SkillsCard.tsx"],"sourcesContent":["import React from 'react';\nimport { SkillsCardProps } from '../../types';\n\ntype SkillsMeterSegmentProps = {\n filled?: boolean;\n className?: string;\n skillColor?: string;\n};\n\nexport const SkillsMeterSegment: React.FC<SkillsMeterSegmentProps> = ({\n filled = false,\n className,\n skillColor = 'bg-cyan-700',\n}) => {\n const bgColor = filled ? skillColor : 'bg-gray-200';\n return (\n <div\n className={`skills-meter-segment h-[20px] w-full max-w-[27px] ${bgColor} mr-[5px] rounded-[5px]`}\n ></div>\n );\n};\n\nexport const SkillsCard: React.FC<SkillsCardProps> = ({\n count = 14,\n title = 'Creative Thinking',\n level = 'Expert',\n category = 'Creativity',\n levelCount = 9,\n skillColor = 'bg-cyan-700',\n className,\n onClick = () => {},\n}) => {\n const renderSkillsMeter = () => {\n const num = levelCount;\n const skillMeter = [...Array(10).keys()].map(counter => {\n console.log('///counter', counter, 'num', num);\n const filled = counter < num;\n return <SkillsMeterSegment filled={filled} key={counter} skillColor={skillColor} />;\n });\n\n return skillMeter;\n };\n\n const skillsMeter = renderSkillsMeter();\n\n return (\n <div\n onClick={onClick}\n className={`flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] h-[129px] rounded-[20px] ${className}`}\n >\n <section className=\"flex skill-card-title-container items-center\">\n <div className=\"flex items-center justify-center skill-count-display text-[20px] min-w-[30px] bg-grayscale-100 rounded-full px-[5px] mr-[8px]\">\n {count}\n </div>\n <h3 className=\"text-[17px] font-semibold\">{title}</h3>\n </section>\n\n <section className=\"skill-card-details my-[5px]\">\n <p className=\"text-sm text-gray-900 font-semibold\">Skill Level: {level}</p>\n <p className=\"text-sm text-gray-900 font-semibold\">Categories: {category}</p>\n </section>\n\n <section className=\"flex w-full skill-meter-full mt-[8px]\">{skillsMeter}</section>\n </div>\n );\n};\n\nexport default SkillsCard;\n"],"names":["React"],"mappings":";;;;;;;;AACY,MAAC,kBAAkB,GAAG,CAAC;AACnC,EAAE,MAAM,GAAG,KAAK;AAChB,EAAE,SAAS;AACX,EAAE,UAAU,GAAG,aAAa;AAC5B,CAAC,KAAK;AACN,EAAE,MAAM,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC;AACtD,EAAE,uBAAuBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,CAAC,kDAAkD,EAAE,OAAO,CAAC,uBAAuB,CAAC;AACpG,GAAG,CAAC,CAAC;AACL,EAAE;AACU,MAAC,UAAU,GAAG,CAAC;AAC3B,EAAE,KAAK,GAAG,EAAE;AACZ,EAAE,KAAK,GAAG,mBAAmB;AAC7B,EAAE,KAAK,GAAG,QAAQ;AAClB,EAAE,QAAQ,GAAG,YAAY;AACzB,EAAE,UAAU,GAAG,CAAC;AAChB,EAAE,UAAU,GAAG,aAAa;AAC5B,EAAE,SAAS;AACX,EAAE,OAAO,GAAG,MAAM;AAClB,GAAG;AACH,CAAC,KAAK;AACN,EAAE,MAAM,iBAAiB,GAAG,MAAM;AAClC,IAAI,MAAM,GAAG,GAAG,UAAU,CAAC;AAC3B,IAAI,MAAM,UAAU,GAAG,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,KAAK;AAC9D,MAAM,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;AACrD,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,GAAG,CAAC;AACnC,MAAM,uBAAuBA,yBAAK,CAAC,aAAa,CAAC,kBAAkB,EAAE;AACrE,QAAQ,MAAM;AACd,QAAQ,GAAG,EAAE,OAAO;AACpB,QAAQ,UAAU;AAClB,OAAO,CAAC,CAAC;AACT,KAAK,CAAC,CAAC;AACP,IAAI,OAAO,UAAU,CAAC;AACtB,GAAG,CAAC;AACJ,EAAE,MAAM,WAAW,GAAG,iBAAiB,EAAE,CAAC;AAC1C,EAAE,uBAAuBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,OAAO;AACX,IAAI,SAAS,EAAE,CAAC,oHAAoH,EAAE,SAAS,CAAC,CAAC;AACjJ,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,SAAS,EAAE,8CAA8C;AAC7D,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,+HAA+H;AAC9I,GAAG,EAAE,KAAK,CAAC,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,IAAI,EAAE;AACvD,IAAI,SAAS,EAAE,2BAA2B;AAC1C,GAAG,EAAE,KAAK,CAAC,CAAC,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7D,IAAI,SAAS,EAAE,6BAA6B;AAC5C,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AAC9C,IAAI,SAAS,EAAE,qCAAqC;AACpD,GAAG,EAAE,eAAe,EAAE,KAAK,CAAC,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AACvE,IAAI,SAAS,EAAE,qCAAqC;AACpD,GAAG,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAChF,IAAI,SAAS,EAAE,uCAAuC;AACtD,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;AACnB;;;;;"}
@@ -0,0 +1,77 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var SkillGraphPlaceholder = require('./skillgraph.svg');
5
+
6
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
7
+
8
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
9
+ var SkillGraphPlaceholder__default = /*#__PURE__*/_interopDefaultLegacy(SkillGraphPlaceholder);
10
+
11
+ const SkillStatListItemIndicator = ({
12
+ className = "bg-emerald-700"
13
+ }) => {
14
+ return /* @__PURE__ */ React__default["default"].createElement("span", {
15
+ className: `${className} skill-item-stat-indicator w-[10px] h-[10px] rounded-[3px] mr-[10px]`
16
+ });
17
+ };
18
+ const SkillStatListItem = ({ name, percent, className }) => {
19
+ const colorIndicator = /* @__PURE__ */ React__default["default"].createElement(SkillStatListItemIndicator, null);
20
+ return /* @__PURE__ */ React__default["default"].createElement("div", {
21
+ className: "flex items-center justify-between px-[10px] skill-stat-list-item flex text-xs h-[20px] py-[5px] shadow-[0_1px_3px_rgba(0,0,0,0.3)] mt-[10px] rounded-[10px] text-grayscale-900 font-semibold"
22
+ }, /* @__PURE__ */ React__default["default"].createElement("span", {
23
+ className: "flex justify-center items-center"
24
+ }, colorIndicator, name), /* @__PURE__ */ React__default["default"].createElement("span", null, percent, "%"));
25
+ };
26
+ const MoreSkillsListItem = ({ count, percent, className }) => {
27
+ const colorIndicator = /* @__PURE__ */ React__default["default"].createElement(SkillStatListItemIndicator, {
28
+ className: "bg-grayscale-200"
29
+ });
30
+ return /* @__PURE__ */ React__default["default"].createElement("div", {
31
+ className: "flex items-center justify-between px-[10px] skill-stat-list-item flex text-xs h-[20px] py-[5px] shadow-[0_1px_3px_rgba(0,0,0,0.3)] mt-[10px] rounded-[10px] text-grayscale-900 font-semibold"
32
+ }, /* @__PURE__ */ React__default["default"].createElement("span", {
33
+ className: "flex justify-center items-center"
34
+ }, colorIndicator, "+", count, " more"), /* @__PURE__ */ React__default["default"].createElement("span", null, percent, "%"));
35
+ };
36
+ const SkillsStatsCard = ({
37
+ totalCount = 0,
38
+ skills = [],
39
+ className,
40
+ onClick = () => {
41
+ }
42
+ }) => {
43
+ const title = `${totalCount} Skill Categories`;
44
+ const showMore = (skills == null ? void 0 : skills.length) > 3;
45
+ const renderSkillsList = skills == null ? void 0 : skills.slice(0, 3).map((skill) => {
46
+ return /* @__PURE__ */ React__default["default"].createElement(SkillStatListItem, {
47
+ name: skill == null ? void 0 : skill.name,
48
+ percent: skill == null ? void 0 : skill.percent,
49
+ key: skill == null ? void 0 : skill.name
50
+ });
51
+ });
52
+ if (showMore) {
53
+ const otherLength = (skills == null ? void 0 : skills.length) - 3;
54
+ renderSkillsList == null ? void 0 : renderSkillsList.push(/* @__PURE__ */ React__default["default"].createElement(MoreSkillsListItem, {
55
+ count: otherLength,
56
+ percent: "27"
57
+ }));
58
+ }
59
+ return /* @__PURE__ */ React__default["default"].createElement("div", {
60
+ onClick,
61
+ className: `flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] h-[199px] rounded-[20px] ${className}`
62
+ }, /* @__PURE__ */ React__default["default"].createElement("section", {
63
+ className: "flex skill-stats-card-title-container items-center"
64
+ }, /* @__PURE__ */ React__default["default"].createElement("h3", {
65
+ className: "text-[17px] text-gray-900 font-bold"
66
+ }, title)), /* @__PURE__ */ React__default["default"].createElement("section", {
67
+ className: "skill-stats-card-body my-[5px] flex items-center justify-between"
68
+ }, /* @__PURE__ */ React__default["default"].createElement("img", {
69
+ src: SkillGraphPlaceholder__default["default"],
70
+ className: "skill-graph-container"
71
+ }), /* @__PURE__ */ React__default["default"].createElement("div", {
72
+ className: "skill-stat-list w-full ml-[15px]"
73
+ }, renderSkillsList)));
74
+ };
75
+
76
+ exports.SkillsStatsCard = SkillsStatsCard;
77
+ //# sourceMappingURL=SkillsStatsCard-97a35a88.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SkillsStatsCard-97a35a88.js","sources":["../../src/components/SkillsStatsCard/SkillsStatsCard.tsx"],"sourcesContent":["import React from 'react';\nimport { SkillsStatsCardProps } from '../../types';\nimport SkillGraphPlaceholder from '../../assets/images/skillgraph.svg';\n\ntype SkillStatListItemProps = {\n name?: string;\n percent: string | number;\n className?: string;\n};\n\ntype SkillStatListItemIndicatorProps = {\n className?: string;\n};\n\ntype MoreSkillsListItemProps = {\n count?: number | string;\n percent?: string;\n className?: string;\n};\n\nconst SkillStatListItemIndicator: React.FC<SkillStatListItemIndicatorProps> = ({\n className = 'bg-emerald-700',\n}) => {\n return (\n <span\n className={`${className} skill-item-stat-indicator w-[10px] h-[10px] rounded-[3px] mr-[10px]`}\n ></span>\n );\n};\n\nconst SkillStatListItem: React.FC<SkillStatListItemProps> = ({ name, percent, className }) => {\n const colorIndicator = <SkillStatListItemIndicator />;\n return (\n <div className=\"flex items-center justify-between px-[10px] skill-stat-list-item flex text-xs h-[20px] py-[5px] shadow-[0_1px_3px_rgba(0,0,0,0.3)] mt-[10px] rounded-[10px] text-grayscale-900 font-semibold\">\n <span className=\"flex justify-center items-center\">\n {colorIndicator}\n {name}\n </span>\n <span>{percent}%</span>\n </div>\n );\n};\n\nconst MoreSkillsListItem: React.FC<MoreSkillsListItemProps> = ({ count, percent, className }) => {\n const colorIndicator = <SkillStatListItemIndicator className=\"bg-grayscale-200\" />;\n return (\n <div className=\"flex items-center justify-between px-[10px] skill-stat-list-item flex text-xs h-[20px] py-[5px] shadow-[0_1px_3px_rgba(0,0,0,0.3)] mt-[10px] rounded-[10px] text-grayscale-900 font-semibold\">\n <span className=\"flex justify-center items-center\">\n {colorIndicator}+{count} more\n </span>\n <span>{percent}%</span>\n </div>\n );\n};\n\nexport const SkillsStatsCard: React.FC<SkillsStatsCardProps> = ({\n totalCount = 0,\n skills = [],\n className,\n onClick = () => {},\n}) => {\n const title = `${totalCount} Skill Categories`;\n\n const showMore = skills?.length > 3;\n\n const renderSkillsList = skills?.slice(0, 3).map(skill => {\n return <SkillStatListItem name={skill?.name} percent={skill?.percent} key={skill?.name} />;\n });\n\n if (showMore) {\n const otherLength = skills?.length - 3;\n renderSkillsList?.push(<MoreSkillsListItem count={otherLength} percent={'27'} />);\n }\n\n return (\n <div\n onClick={onClick}\n className={`flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] h-[199px] rounded-[20px] ${className}`}\n >\n <section className=\"flex skill-stats-card-title-container items-center\">\n <h3 className=\"text-[17px] text-gray-900 font-bold\">{title}</h3>\n </section>\n\n <section className=\"skill-stats-card-body my-[5px] flex items-center justify-between\">\n <img src={SkillGraphPlaceholder} className=\"skill-graph-container\" />\n <div className=\"skill-stat-list w-full ml-[15px]\">{renderSkillsList}</div>\n </section>\n </div>\n );\n};\n\nexport default SkillsStatsCard;\n"],"names":["React","SkillGraphPlaceholder"],"mappings":";;;;;;;;;;AAEA,MAAM,0BAA0B,GAAG,CAAC;AACpC,EAAE,SAAS,GAAG,gBAAgB;AAC9B,CAAC,KAAK;AACN,EAAE,uBAAuBA,yBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACrD,IAAI,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,oEAAoE,CAAC;AACjG,GAAG,CAAC,CAAC;AACL,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK;AAC5D,EAAE,MAAM,cAAc,mBAAmBA,yBAAK,CAAC,aAAa,CAAC,0BAA0B,EAAE,IAAI,CAAC,CAAC;AAC/F,EAAE,uBAAuBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,8LAA8L;AAC7M,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACjD,IAAI,SAAS,EAAE,kCAAkC;AACjD,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;AAC7F,CAAC,CAAC;AACF,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK;AAC9D,EAAE,MAAM,cAAc,mBAAmBA,yBAAK,CAAC,aAAa,CAAC,0BAA0B,EAAE;AACzF,IAAI,SAAS,EAAE,kBAAkB;AACjC,GAAG,CAAC,CAAC;AACL,EAAE,uBAAuBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,8LAA8L;AAC7M,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACjD,IAAI,SAAS,EAAE,kCAAkC;AACjD,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;AAC5G,CAAC,CAAC;AACU,MAAC,eAAe,GAAG,CAAC;AAChC,EAAE,UAAU,GAAG,CAAC;AAChB,EAAE,MAAM,GAAG,EAAE;AACb,EAAE,SAAS;AACX,EAAE,OAAO,GAAG,MAAM;AAClB,GAAG;AACH,CAAC,KAAK;AACN,EAAE,MAAM,KAAK,GAAG,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC;AACjD,EAAE,MAAM,QAAQ,GAAG,CAAC,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC;AACjE,EAAE,MAAM,gBAAgB,GAAG,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK;AACvF,IAAI,uBAAuBA,yBAAK,CAAC,aAAa,CAAC,iBAAiB,EAAE;AAClE,MAAM,IAAI,EAAE,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI;AAC/C,MAAM,OAAO,EAAE,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,OAAO;AACrD,MAAM,GAAG,EAAE,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI;AAC9C,KAAK,CAAC,CAAC;AACP,GAAG,CAAC,CAAC;AACL,EAAE,IAAI,QAAQ,EAAE;AAChB,IAAI,MAAM,WAAW,GAAG,CAAC,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC;AACtE,IAAI,gBAAgB,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,gBAAgB,CAAC,IAAI,iBAAiBA,yBAAK,CAAC,aAAa,CAAC,kBAAkB,EAAE;AACtH,MAAM,KAAK,EAAE,WAAW;AACxB,MAAM,OAAO,EAAE,IAAI;AACnB,KAAK,CAAC,CAAC,CAAC;AACR,GAAG;AACH,EAAE,uBAAuBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,OAAO;AACX,IAAI,SAAS,EAAE,CAAC,oHAAoH,EAAE,SAAS,CAAC,CAAC;AACjJ,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,SAAS,EAAE,oDAAoD;AACnE,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,IAAI,EAAE;AAC/C,IAAI,SAAS,EAAE,qCAAqC;AACpD,GAAG,EAAE,KAAK,CAAC,CAAC,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7D,IAAI,SAAS,EAAE,kEAAkE;AACjF,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,GAAG,EAAEC,yCAAqB;AAC9B,IAAI,SAAS,EAAE,uBAAuB;AACtC,GAAG,CAAC,kBAAkBD,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,SAAS,EAAE,mCAAmC;AAClD,GAAG,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;AACzB;;;;"}