@ludo.ninja/components 2.4.38 → 2.4.40
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.
|
@@ -22,24 +22,33 @@ const Wrapper = styled_components_1.default.div `
|
|
|
22
22
|
background-clip: padding-box, border-box;
|
|
23
23
|
background-origin: padding-box, border-box;
|
|
24
24
|
|
|
25
|
-
.shootingStar {
|
|
26
|
-
width: 16px;
|
|
27
|
-
height: 16px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
25
|
${ScreenWidth_1.mediaQuery.minWidthFourK} {
|
|
31
26
|
padding: ${(0, _4k_1.adaptiveValueCalc)(3)} ${(0, _4k_1.adaptiveValueCalc)(11)};
|
|
32
27
|
gap: ${(0, _4k_1.adaptiveValueCalc)(4)};
|
|
33
28
|
border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
|
|
34
29
|
border: ${(0, _4k_1.adaptiveValueCalc)(2)} solid transparent;
|
|
30
|
+
}
|
|
31
|
+
`;
|
|
32
|
+
const Container = styled_components_1.default.div `
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
gap: 4px;
|
|
36
|
+
|
|
37
|
+
.shootingStar {
|
|
38
|
+
width: 22px;
|
|
39
|
+
height: 22px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
${ScreenWidth_1.mediaQuery.minWidthFourK} {
|
|
43
|
+
gap: ${(0, _4k_1.adaptiveValueCalc)(4)};
|
|
35
44
|
|
|
36
45
|
.shootingStar {
|
|
37
|
-
width: ${(0, _4k_1.adaptiveValueCalc)(
|
|
38
|
-
height: ${(0, _4k_1.adaptiveValueCalc)(
|
|
46
|
+
width: ${(0, _4k_1.adaptiveValueCalc)(22)};
|
|
47
|
+
height: ${(0, _4k_1.adaptiveValueCalc)(22)};
|
|
39
48
|
}
|
|
40
49
|
}
|
|
41
50
|
`;
|
|
42
51
|
const BoostBadgeBase = ({ title, colorSchema, className, backgroundColor = "#f3f4f9", isShootingStar, }) => {
|
|
43
|
-
return ((0, jsx_runtime_1.jsxs)(Wrapper, { className: className, background: backgroundColor, colorSchema: colorSchema, children:
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsx)(Wrapper, { className: className, background: backgroundColor, colorSchema: colorSchema, children: (0, jsx_runtime_1.jsx)(Text_1.H6, { children: title }) }), isShootingStar && ((0, jsx_runtime_1.jsxs)("svg", { className: "shootingStar", xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", children: [(0, jsx_runtime_1.jsx)("path", { d: "M20.5138 17.5601C20.297 16.358 19.754 15.2413 19.144 14.1911C19.5812 15.0514 19.9612 15.9459 20.1794 16.8856C20.3507 17.6612 20.4497 18.5534 20.0668 19.2784C19.288 20.6693 17.1903 20.0531 16.0029 19.5562C11.1855 17.504 5.2858 11.3506 3.59468 6.43646C3.35703 5.70984 3.07461 4.55525 3.43601 3.87366C3.60004 3.57612 3.91433 3.47795 4.23565 3.45226C4.76544 3.41945 5.25378 3.5321 5.7994 3.70222C7.43009 4.2713 8.98399 5.23324 10.4101 6.35496L8.97961 6.597C8.48885 6.68001 8.29386 7.274 8.6416 7.62651L10.6763 9.69034C10.8106 9.82644 10.8732 10.0169 10.8453 10.2055L10.4251 13.0584C10.3532 13.546 10.8637 13.9131 11.3099 13.6948L13.9219 12.4176C14.0943 12.3331 14.2967 12.3331 14.4691 12.4176L17.0812 13.6948C17.5273 13.9131 18.0378 13.546 17.9659 13.0584L17.5457 10.2055C17.5179 10.0169 17.5804 9.82644 17.7148 9.69034L19.7494 7.62651C20.0972 7.274 19.9022 6.67999 19.4114 6.597L16.5397 6.1111C16.35 6.07889 16.1863 5.96118 16.0969 5.79266L14.7425 3.23979C14.5109 2.80366 13.8801 2.80366 13.6486 3.23979L12.7211 4.98799C10.115 3.05072 6.83497 1.24008 4.22401 1.43354C3.14165 1.52104 2.17942 2.04586 1.71319 3.04622C1.48734 3.53339 1.40477 4.079 1.42137 4.60888C1.63849 10.4641 12.4227 20.6143 18.298 20.5805C19.3335 20.5489 20.2072 20.0958 20.4884 19.0551C20.6174 18.5693 20.5968 18.0502 20.5138 17.5601Z", fill: "url(#paint0_radial_22709_39221)" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("radialGradient", { id: "paint0_radial_22709_39221", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(14 9) rotate(138.366) scale(12.0416 13.0326)", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#FFE600" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#E4491E" })] }) })] }))] }));
|
|
44
53
|
};
|
|
45
54
|
exports.default = BoostBadgeBase;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const CreditsLabel: ({ value, link, loading, className, style, withIcon, }: {
|
|
2
3
|
value: number;
|
|
3
|
-
|
|
4
|
-
|
|
4
|
+
withIcon?: boolean;
|
|
5
|
+
link?: string;
|
|
6
|
+
loading?: boolean;
|
|
7
|
+
className?: string;
|
|
8
|
+
style?: React.CSSProperties;
|
|
5
9
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
6
10
|
export default CreditsLabel;
|
|
@@ -1,4 +1,27 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
2
25
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
27
|
};
|
|
@@ -9,12 +32,12 @@ const ScreenWidth_1 = require("../../../styles/ScreenWidth");
|
|
|
9
32
|
const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
|
|
10
33
|
const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
|
|
11
34
|
const SkeletonLabel_1 = __importDefault(require("../SkeletonLabel"));
|
|
35
|
+
const constants_1 = require("@ludo.ninja/core/build/constants");
|
|
12
36
|
const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
37
|
+
const image_1 = __importDefault(require("next/image"));
|
|
13
38
|
const link_1 = __importDefault(require("next/link"));
|
|
14
|
-
const styled_components_1 =
|
|
15
|
-
|
|
16
|
-
const StyledExpTab = (0, styled_components_1.default)(link_1.default) `
|
|
17
|
-
${boxTransform_1.default};
|
|
39
|
+
const styled_components_1 = __importStar(require("styled-components"));
|
|
40
|
+
const CreditsLabelStyles = () => (0, styled_components_1.css) `
|
|
18
41
|
${boxShadow_1.default};
|
|
19
42
|
display: flex;
|
|
20
43
|
gap: 8px;
|
|
@@ -48,10 +71,19 @@ const StyledExpTab = (0, styled_components_1.default)(link_1.default) `
|
|
|
48
71
|
}
|
|
49
72
|
}
|
|
50
73
|
`;
|
|
51
|
-
|
|
52
|
-
|
|
74
|
+
const StyledCreditsLink = (0, styled_components_1.default)(link_1.default) `
|
|
75
|
+
${boxTransform_1.default};
|
|
76
|
+
${CreditsLabelStyles};
|
|
77
|
+
`;
|
|
78
|
+
const StyledCreditsTab = styled_components_1.default.div `
|
|
79
|
+
${CreditsLabelStyles};
|
|
80
|
+
`;
|
|
81
|
+
const CreditsLabel = ({ value = 0, link, loading, className, style, withIcon = false, }) => {
|
|
53
82
|
if (loading)
|
|
54
83
|
return (0, jsx_runtime_1.jsx)(SkeletonLabel_1.default, {});
|
|
55
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
84
|
+
return link ? ((0, jsx_runtime_1.jsx)(StyledCreditsLink, { href: link, className: className, style: style, children: (0, jsx_runtime_1.jsx)(LabelContent, { value: value, withIcon: withIcon }) })) : ((0, jsx_runtime_1.jsx)(StyledCreditsTab, { className: className, style: style, children: (0, jsx_runtime_1.jsx)(LabelContent, { value: value, withIcon: withIcon }) }));
|
|
85
|
+
};
|
|
86
|
+
const LabelContent = ({ value, withIcon }) => {
|
|
87
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [withIcon && (0, jsx_runtime_1.jsx)(image_1.default, { src: `${constants_1.staticLink}/public/credits_icon.svg`, alt: "Credits icon", width: 20, height: 20 }), (0, jsx_runtime_1.jsx)("p", { className: `value `, children: `${value} credit${value !== 1 ? 's' : ''}` })] }));
|
|
56
88
|
};
|
|
57
89
|
exports.default = CreditsLabel;
|