@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.
- package/dist/cjs/CircleIcon-45ef66fd.js.map +1 -1
- package/dist/cjs/CourseCard-c3c13b2c.js +91 -0
- package/dist/cjs/CourseCard-c3c13b2c.js.map +1 -0
- package/dist/cjs/FlippyCard-33e03a9e.js.map +1 -1
- package/dist/cjs/{QRCodeCard-9f777402.js → QRCodeCard-efaa58e1.js} +12 -5
- package/dist/cjs/QRCodeCard-efaa58e1.js.map +1 -0
- package/dist/cjs/SchoolIDCard-32a47ae5.js +4716 -0
- package/dist/cjs/SchoolIDCard-32a47ae5.js.map +1 -0
- package/dist/cjs/SkillVerticalCard-3eb3a8e9.js +35 -0
- package/dist/cjs/SkillVerticalCard-3eb3a8e9.js.map +1 -0
- package/dist/cjs/SkillsCard-4b6dbb4f.js +66 -0
- package/dist/cjs/SkillsCard-4b6dbb4f.js.map +1 -0
- package/dist/cjs/SkillsStatsCard-97a35a88.js +77 -0
- package/dist/cjs/SkillsStatsCard-97a35a88.js.map +1 -0
- package/dist/cjs/{VCCard-6110f981.js → VCCard-1f3baae6.js} +4815 -1696
- package/dist/{esm/VCCard-ddbb8820.js.map → cjs/VCCard-1f3baae6.js.map} +1 -1
- package/dist/cjs/{VCDisplayCard-ab6c04d6.js → VCDisplayCard-8504d499.js} +5 -5
- package/dist/cjs/{VCDisplayCard-ab6c04d6.js.map → VCDisplayCard-8504d499.js.map} +1 -1
- package/dist/cjs/index.js +20 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/index10.js +3 -5
- package/dist/cjs/index10.js.map +1 -1
- package/dist/cjs/index11.js +5 -3
- package/dist/cjs/index11.js.map +1 -1
- package/dist/cjs/index12.js +3 -18
- package/dist/cjs/index12.js.map +1 -1
- package/dist/cjs/index13.js +18 -3
- package/dist/cjs/index13.js.map +1 -1
- package/dist/cjs/index14.js +2 -9
- package/dist/cjs/index14.js.map +1 -1
- package/dist/cjs/index15.js +3 -23
- package/dist/cjs/index15.js.map +1 -1
- package/dist/cjs/index16.js +3 -10
- package/dist/cjs/index16.js.map +1 -1
- package/dist/cjs/index17.js +3 -14
- package/dist/cjs/index17.js.map +1 -1
- package/dist/cjs/index18.js +7 -4
- package/dist/cjs/index18.js.map +1 -1
- package/dist/cjs/index19.js +9 -4
- package/dist/cjs/index19.js.map +1 -1
- package/dist/cjs/index20.js +21 -3
- package/dist/cjs/index20.js.map +1 -1
- package/dist/cjs/index21.js +7 -2
- package/dist/cjs/index21.js.map +1 -1
- package/dist/cjs/index22.js +23 -0
- package/dist/cjs/index22.js.map +1 -0
- package/dist/cjs/index23.js +9 -0
- package/dist/cjs/index23.js.map +1 -0
- package/dist/cjs/index24.js +13 -0
- package/dist/cjs/index24.js.map +1 -0
- package/dist/cjs/index25.js +14 -0
- package/dist/cjs/index25.js.map +1 -0
- package/dist/cjs/index26.js +14 -0
- package/dist/cjs/index26.js.map +1 -0
- package/dist/cjs/index4.js +6 -2
- package/dist/cjs/index4.js.map +1 -1
- package/dist/cjs/index5.js +0 -79
- package/dist/cjs/index5.js.map +1 -1
- package/dist/cjs/index6.js +95 -0
- package/dist/cjs/index6.js.map +1 -1
- package/dist/cjs/index7.js +3 -5
- package/dist/cjs/index7.js.map +1 -1
- package/dist/cjs/index8.js +5 -2
- package/dist/cjs/index8.js.map +1 -1
- package/dist/cjs/index9.js +2 -3
- package/dist/cjs/index9.js.map +1 -1
- package/dist/cjs/lhplaceholder.png +0 -0
- package/dist/cjs/minijob.svg +5 -0
- package/dist/cjs/minipuzzle.svg +3 -0
- package/dist/cjs/minitrophy.svg +3 -0
- package/dist/cjs/skillgraph.svg +29 -0
- package/dist/cjs/skillplaceholder.png +0 -0
- package/dist/esm/CircleIcon-7c21af00.js.map +1 -1
- package/dist/esm/CourseCard-b9e42233.js +81 -0
- package/dist/esm/CourseCard-b9e42233.js.map +1 -0
- package/dist/esm/FlippyCard-682649d7.js.map +1 -1
- package/dist/esm/{QRCodeCard-11e192b2.js → QRCodeCard-c57e2067.js} +12 -5
- package/dist/esm/QRCodeCard-c57e2067.js.map +1 -0
- package/dist/esm/SchoolIDCard-4f56262c.js +4710 -0
- package/dist/esm/SchoolIDCard-4f56262c.js.map +1 -0
- package/dist/esm/SkillVerticalCard-108f49bb.js +28 -0
- package/dist/esm/SkillVerticalCard-108f49bb.js.map +1 -0
- package/dist/esm/SkillsCard-92a51db2.js +59 -0
- package/dist/esm/SkillsCard-92a51db2.js.map +1 -0
- package/dist/esm/SkillsStatsCard-1628fe9c.js +70 -0
- package/dist/esm/SkillsStatsCard-1628fe9c.js.map +1 -0
- package/dist/esm/{VCCard-ddbb8820.js → VCCard-f4b7a89b.js} +4815 -1696
- package/dist/{cjs/VCCard-6110f981.js.map → esm/VCCard-f4b7a89b.js.map} +1 -1
- package/dist/esm/{VCDisplayCard-5d0628ee.js → VCDisplayCard-b45533e8.js} +5 -5
- package/dist/esm/{VCDisplayCard-5d0628ee.js.map → VCDisplayCard-b45533e8.js.map} +1 -1
- package/dist/esm/index.js +14 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index10.js +2 -3
- package/dist/esm/index10.js.map +1 -1
- package/dist/esm/index11.js +3 -2
- package/dist/esm/index11.js.map +1 -1
- package/dist/esm/index12.js +2 -14
- package/dist/esm/index12.js.map +1 -1
- package/dist/esm/index13.js +14 -2
- package/dist/esm/index13.js.map +1 -1
- package/dist/esm/index14.js +1 -2
- package/dist/esm/index14.js.map +1 -1
- package/dist/esm/index15.js +1 -22
- package/dist/esm/index15.js.map +1 -1
- package/dist/esm/index16.js +2 -9
- package/dist/esm/index16.js.map +1 -1
- package/dist/esm/index17.js +2 -13
- package/dist/esm/index17.js.map +1 -1
- package/dist/esm/index18.js +2 -4
- package/dist/esm/index18.js.map +1 -1
- package/dist/esm/index19.js +2 -3
- package/dist/esm/index19.js.map +1 -1
- package/dist/esm/index20.js +20 -1
- package/dist/esm/index20.js.map +1 -1
- package/dist/esm/index21.js +6 -1
- package/dist/esm/index21.js.map +1 -1
- package/dist/esm/index22.js +15 -0
- package/dist/esm/index22.js.map +1 -0
- package/dist/esm/index23.js +6 -0
- package/dist/esm/index23.js.map +1 -0
- package/dist/esm/index24.js +5 -0
- package/dist/esm/index24.js.map +1 -0
- package/dist/esm/index25.js +5 -0
- package/dist/esm/index25.js.map +1 -0
- package/dist/esm/index26.js +6 -0
- package/dist/esm/index26.js.map +1 -0
- package/dist/esm/index4.js +5 -1
- package/dist/esm/index4.js.map +1 -1
- package/dist/esm/index5.js +0 -50
- package/dist/esm/index5.js.map +1 -1
- package/dist/esm/index6.js +60 -0
- package/dist/esm/index6.js.map +1 -1
- package/dist/esm/index7.js +2 -4
- package/dist/esm/index7.js.map +1 -1
- package/dist/esm/index8.js +4 -1
- package/dist/esm/index8.js.map +1 -1
- package/dist/esm/index9.js +1 -2
- package/dist/esm/index9.js.map +1 -1
- package/dist/esm/lhplaceholder.png +0 -0
- package/dist/esm/minijob.svg +5 -0
- package/dist/esm/minipuzzle.svg +3 -0
- package/dist/esm/minitrophy.svg +3 -0
- package/dist/esm/skillgraph.svg +29 -0
- package/dist/esm/skillplaceholder.png +0 -0
- package/dist/index.d.ts +115 -16
- package/dist/main.css +1 -1
- package/dist/main.js +1 -1
- package/package.json +3 -2
- package/dist/cjs/QRCodeCard-9f777402.js.map +0 -1
- package/dist/esm/QRCodeCard-11e192b2.js.map +0 -1
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import SkillPlaceholder from './skillplaceholder.png';
|
|
3
|
+
|
|
4
|
+
const SkillVerticalCard = ({
|
|
5
|
+
title = "Creative Thinking",
|
|
6
|
+
thumbImg,
|
|
7
|
+
className,
|
|
8
|
+
onClick = () => {
|
|
9
|
+
}
|
|
10
|
+
}) => {
|
|
11
|
+
const thumbSrc = thumbImg || SkillPlaceholder;
|
|
12
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
13
|
+
onClick,
|
|
14
|
+
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}`
|
|
15
|
+
}, /* @__PURE__ */ React.createElement("section", {
|
|
16
|
+
className: "flex skill-vert-card-title-container items-center bg-indigo-600 h-[76px] justify-center items-center"
|
|
17
|
+
}, /* @__PURE__ */ React.createElement("h3", {
|
|
18
|
+
className: "text-[14px] font-semibold text-white"
|
|
19
|
+
}, title)), /* @__PURE__ */ React.createElement("section", {
|
|
20
|
+
className: "skill-vert-card-details my-[5px] flex items-center justify-center overflow-hidden pt-[5px]"
|
|
21
|
+
}, /* @__PURE__ */ React.createElement("img", {
|
|
22
|
+
src: thumbSrc,
|
|
23
|
+
className: "skill-vert-thumb object-cover overflow-hidden w-[140px] h-[119px] rounded-[20px]"
|
|
24
|
+
})));
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { SkillVerticalCard as S };
|
|
28
|
+
//# sourceMappingURL=SkillVerticalCard-108f49bb.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkillVerticalCard-108f49bb.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":[],"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,IAAI,gBAAgB,CAAC;AAChD,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,OAAO;AACX,IAAI,SAAS,EAAE,CAAC,8HAA8H,EAAE,SAAS,CAAC,CAAC;AAC3J,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,SAAS,EAAE,sGAAsG;AACrH,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE;AAC/C,IAAI,SAAS,EAAE,sCAAsC;AACrD,GAAG,EAAE,KAAK,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7D,IAAI,SAAS,EAAE,4FAA4F;AAC3G,GAAG,kBAAkB,KAAK,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,59 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const SkillsMeterSegment = ({
|
|
4
|
+
filled = false,
|
|
5
|
+
className,
|
|
6
|
+
skillColor = "bg-cyan-700"
|
|
7
|
+
}) => {
|
|
8
|
+
const bgColor = filled ? skillColor : "bg-gray-200";
|
|
9
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
10
|
+
className: `skills-meter-segment h-[20px] w-full max-w-[27px] ${bgColor} mr-[5px] rounded-[5px]`
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
const SkillsCard = ({
|
|
14
|
+
count = 14,
|
|
15
|
+
title = "Creative Thinking",
|
|
16
|
+
level = "Expert",
|
|
17
|
+
category = "Creativity",
|
|
18
|
+
levelCount = 9,
|
|
19
|
+
skillColor = "bg-cyan-700",
|
|
20
|
+
className,
|
|
21
|
+
onClick = () => {
|
|
22
|
+
}
|
|
23
|
+
}) => {
|
|
24
|
+
const renderSkillsMeter = () => {
|
|
25
|
+
const num = levelCount;
|
|
26
|
+
const skillMeter = [...Array(10).keys()].map((counter) => {
|
|
27
|
+
console.log("///counter", counter, "num", num);
|
|
28
|
+
const filled = counter < num;
|
|
29
|
+
return /* @__PURE__ */ React.createElement(SkillsMeterSegment, {
|
|
30
|
+
filled,
|
|
31
|
+
key: counter,
|
|
32
|
+
skillColor
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
return skillMeter;
|
|
36
|
+
};
|
|
37
|
+
const skillsMeter = renderSkillsMeter();
|
|
38
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
39
|
+
onClick,
|
|
40
|
+
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}`
|
|
41
|
+
}, /* @__PURE__ */ React.createElement("section", {
|
|
42
|
+
className: "flex skill-card-title-container items-center"
|
|
43
|
+
}, /* @__PURE__ */ React.createElement("div", {
|
|
44
|
+
className: "flex items-center justify-center skill-count-display text-[20px] min-w-[30px] bg-grayscale-100 rounded-full px-[5px] mr-[8px]"
|
|
45
|
+
}, count), /* @__PURE__ */ React.createElement("h3", {
|
|
46
|
+
className: "text-[17px] font-semibold"
|
|
47
|
+
}, title)), /* @__PURE__ */ React.createElement("section", {
|
|
48
|
+
className: "skill-card-details my-[5px]"
|
|
49
|
+
}, /* @__PURE__ */ React.createElement("p", {
|
|
50
|
+
className: "text-sm text-gray-900 font-semibold"
|
|
51
|
+
}, "Skill Level: ", level), /* @__PURE__ */ React.createElement("p", {
|
|
52
|
+
className: "text-sm text-gray-900 font-semibold"
|
|
53
|
+
}, "Categories: ", category)), /* @__PURE__ */ React.createElement("section", {
|
|
54
|
+
className: "flex w-full skill-meter-full mt-[8px]"
|
|
55
|
+
}, skillsMeter));
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export { SkillsMeterSegment as S, SkillsCard as a };
|
|
59
|
+
//# sourceMappingURL=SkillsCard-92a51db2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkillsCard-92a51db2.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":[],"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,uBAAuB,KAAK,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,uBAAuB,KAAK,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,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,OAAO;AACX,IAAI,SAAS,EAAE,CAAC,oHAAoH,EAAE,SAAS,CAAC,CAAC;AACjJ,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,SAAS,EAAE,8CAA8C;AAC7D,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,+HAA+H;AAC9I,GAAG,EAAE,KAAK,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE;AACvD,IAAI,SAAS,EAAE,2BAA2B;AAC1C,GAAG,EAAE,KAAK,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7D,IAAI,SAAS,EAAE,6BAA6B;AAC5C,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AAC9C,IAAI,SAAS,EAAE,qCAAqC;AACpD,GAAG,EAAE,eAAe,EAAE,KAAK,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AACvE,IAAI,SAAS,EAAE,qCAAqC;AACpD,GAAG,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAChF,IAAI,SAAS,EAAE,uCAAuC;AACtD,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;AACnB;;;;"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import SkillGraphPlaceholder from './skillgraph.svg';
|
|
3
|
+
|
|
4
|
+
const SkillStatListItemIndicator = ({
|
|
5
|
+
className = "bg-emerald-700"
|
|
6
|
+
}) => {
|
|
7
|
+
return /* @__PURE__ */ React.createElement("span", {
|
|
8
|
+
className: `${className} skill-item-stat-indicator w-[10px] h-[10px] rounded-[3px] mr-[10px]`
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
const SkillStatListItem = ({ name, percent, className }) => {
|
|
12
|
+
const colorIndicator = /* @__PURE__ */ React.createElement(SkillStatListItemIndicator, null);
|
|
13
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
14
|
+
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"
|
|
15
|
+
}, /* @__PURE__ */ React.createElement("span", {
|
|
16
|
+
className: "flex justify-center items-center"
|
|
17
|
+
}, colorIndicator, name), /* @__PURE__ */ React.createElement("span", null, percent, "%"));
|
|
18
|
+
};
|
|
19
|
+
const MoreSkillsListItem = ({ count, percent, className }) => {
|
|
20
|
+
const colorIndicator = /* @__PURE__ */ React.createElement(SkillStatListItemIndicator, {
|
|
21
|
+
className: "bg-grayscale-200"
|
|
22
|
+
});
|
|
23
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
24
|
+
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"
|
|
25
|
+
}, /* @__PURE__ */ React.createElement("span", {
|
|
26
|
+
className: "flex justify-center items-center"
|
|
27
|
+
}, colorIndicator, "+", count, " more"), /* @__PURE__ */ React.createElement("span", null, percent, "%"));
|
|
28
|
+
};
|
|
29
|
+
const SkillsStatsCard = ({
|
|
30
|
+
totalCount = 0,
|
|
31
|
+
skills = [],
|
|
32
|
+
className,
|
|
33
|
+
onClick = () => {
|
|
34
|
+
}
|
|
35
|
+
}) => {
|
|
36
|
+
const title = `${totalCount} Skill Categories`;
|
|
37
|
+
const showMore = (skills == null ? void 0 : skills.length) > 3;
|
|
38
|
+
const renderSkillsList = skills == null ? void 0 : skills.slice(0, 3).map((skill) => {
|
|
39
|
+
return /* @__PURE__ */ React.createElement(SkillStatListItem, {
|
|
40
|
+
name: skill == null ? void 0 : skill.name,
|
|
41
|
+
percent: skill == null ? void 0 : skill.percent,
|
|
42
|
+
key: skill == null ? void 0 : skill.name
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
if (showMore) {
|
|
46
|
+
const otherLength = (skills == null ? void 0 : skills.length) - 3;
|
|
47
|
+
renderSkillsList == null ? void 0 : renderSkillsList.push(/* @__PURE__ */ React.createElement(MoreSkillsListItem, {
|
|
48
|
+
count: otherLength,
|
|
49
|
+
percent: "27"
|
|
50
|
+
}));
|
|
51
|
+
}
|
|
52
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
53
|
+
onClick,
|
|
54
|
+
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}`
|
|
55
|
+
}, /* @__PURE__ */ React.createElement("section", {
|
|
56
|
+
className: "flex skill-stats-card-title-container items-center"
|
|
57
|
+
}, /* @__PURE__ */ React.createElement("h3", {
|
|
58
|
+
className: "text-[17px] text-gray-900 font-bold"
|
|
59
|
+
}, title)), /* @__PURE__ */ React.createElement("section", {
|
|
60
|
+
className: "skill-stats-card-body my-[5px] flex items-center justify-between"
|
|
61
|
+
}, /* @__PURE__ */ React.createElement("img", {
|
|
62
|
+
src: SkillGraphPlaceholder,
|
|
63
|
+
className: "skill-graph-container"
|
|
64
|
+
}), /* @__PURE__ */ React.createElement("div", {
|
|
65
|
+
className: "skill-stat-list w-full ml-[15px]"
|
|
66
|
+
}, renderSkillsList)));
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
export { SkillsStatsCard as S };
|
|
70
|
+
//# sourceMappingURL=SkillsStatsCard-1628fe9c.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkillsStatsCard-1628fe9c.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":[],"mappings":";;;AAEA,MAAM,0BAA0B,GAAG,CAAC;AACpC,EAAE,SAAS,GAAG,gBAAgB;AAC9B,CAAC,KAAK;AACN,EAAE,uBAAuB,KAAK,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,mBAAmB,KAAK,CAAC,aAAa,CAAC,0BAA0B,EAAE,IAAI,CAAC,CAAC;AAC/F,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,8LAA8L;AAC7M,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACjD,IAAI,SAAS,EAAE,kCAAkC;AACjD,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,kBAAkB,KAAK,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,mBAAmB,KAAK,CAAC,aAAa,CAAC,0BAA0B,EAAE;AACzF,IAAI,SAAS,EAAE,kBAAkB;AACjC,GAAG,CAAC,CAAC;AACL,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,8LAA8L;AAC7M,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACjD,IAAI,SAAS,EAAE,kCAAkC;AACjD,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,kBAAkB,KAAK,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,uBAAuB,KAAK,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,iBAAiB,KAAK,CAAC,aAAa,CAAC,kBAAkB,EAAE;AACtH,MAAM,KAAK,EAAE,WAAW;AACxB,MAAM,OAAO,EAAE,IAAI;AACnB,KAAK,CAAC,CAAC,CAAC;AACR,GAAG;AACH,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,OAAO;AACX,IAAI,SAAS,EAAE,CAAC,oHAAoH,EAAE,SAAS,CAAC,CAAC;AACjJ,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,SAAS,EAAE,oDAAoD;AACnE,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE;AAC/C,IAAI,SAAS,EAAE,qCAAqC;AACpD,GAAG,EAAE,KAAK,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7D,IAAI,SAAS,EAAE,kEAAkE;AACjF,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,GAAG,EAAE,qBAAqB;AAC9B,IAAI,SAAS,EAAE,uBAAuB;AACtC,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,SAAS,EAAE,mCAAmC;AAClD,GAAG,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;AACzB;;;;"}
|