@opexa/portal-components 0.0.849 → 0.0.851
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.
|
@@ -59,17 +59,24 @@ export function TournamentsCarouselItem({ style, className, startStyle, viewAllU
|
|
|
59
59
|
minDecimalPlaces: 2,
|
|
60
60
|
maxDecimalPlaces: 2,
|
|
61
61
|
})] }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] }) })) : (_jsxs("div", { className: "relative mt-4 flex w-full gap-4 rounded-lg bg-bg-primary p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] }))] })] }) }) }) }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Image, { width: 24, height: 24, src: trophyTwo, alt: "leaderboardIcon", className: "size-full w-6" }), _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: "Leaderboard" })] }), _jsxs(Link, { className: "flex font-semibold text-button-tertiary-fg text-sm", href: viewAllUrl ?? '/tournaments', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _jsx("div", { className: twMerge('max-h-[17rem] overflow-y-scroll', css.scrollArea), children: _jsx("div", { className: "overflow-hidden rounded-xl border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "h-8 bg-bg-secondary font-medium text-text-tertiary-600 text-xs", children: [_jsx("th", { className: "w-[3.25rem]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length
|
|
62
|
-
?
|
|
62
|
+
? [
|
|
63
|
+
...tournament.currentLeaderboard.edges,
|
|
64
|
+
...Array(Math.max(0, 10 - tournament.currentLeaderboard.edges.length)).fill(''),
|
|
65
|
+
].map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary border-t-2", children: _jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', i < 3
|
|
63
66
|
? starTierStyles[i]?.fillStarColor
|
|
64
67
|
: startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 3
|
|
65
68
|
? starTierStyles[i]?.numberColor
|
|
66
|
-
: startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children:
|
|
67
|
-
|
|
68
|
-
|
|
69
|
+
: startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: tournament.node?.username
|
|
70
|
+
? maskFirstLast(tournament.node.username, {
|
|
71
|
+
midLength: 4,
|
|
72
|
+
})
|
|
73
|
+
: '-' }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: tournament.node?.multiplier
|
|
74
|
+
? `${tournament.node.multiplier}x`
|
|
75
|
+
: '-' }), tournament.node?.prize ? (_jsx("td", { className: "h-12 border-border-secondary border-t-1 text-brand-400", children: formatNumber(tournament.node.prize, {
|
|
69
76
|
currency: localeInfo.currency.code,
|
|
70
77
|
minDecimalPlaces: 2,
|
|
71
78
|
maxDecimalPlaces: 2,
|
|
72
|
-
}) })) : (_jsx("td", { className: "h-12 border-border-secondary border-t-
|
|
79
|
+
}) })) : (_jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" }))] }, i)))
|
|
73
80
|
: Array.from({ length: 10 }).map((_, i) => (_jsxs("tr", { className: "bg-bg-primary text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary border-t-2", children: _jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', i < 3
|
|
74
81
|
? starTierStyles[i]?.fillStarColor
|
|
75
82
|
: startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 3
|
|
@@ -49,7 +49,7 @@ export function TournamentsListItemMobile({ style, className, startStyle, }) {
|
|
|
49
49
|
loop: true,
|
|
50
50
|
duration: 0,
|
|
51
51
|
}, [Autoplay()]);
|
|
52
|
-
return (_jsxs("div", { style: styles.
|
|
52
|
+
return (_jsxs("div", { style: styles.outerRoot, className: twMerge('overflow-hidden rounded-2xl border border-border-primary bg-bg-primary', classNames.outerRoot), children: [_jsx("div", { style: styles.root, className: twMerge('relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5', classNames.root), children: _jsxs("div", { className: "relative flex w-full flex-col", children: [_jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "w-full", children: [_jsxs("div", { className: "flex justify-between", children: [_jsxs("div", { style: styles.badgeRoot, className: twMerge('flex h-fit w-fit items-center gap-1 rounded-full border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', classNames.badgeRoot), children: [_jsx(Award01Icon, { style: styles.badgeIcon, className: twMerge('size-3.5 text-utility-brand-500', classNames.badgeIcon) }), _jsx("span", { style: styles.badgeLabel, className: classNames.badgeLabel, children: "Multiplier" })] }), _jsxs("div", { className: "flex h-fit flex-col", children: [isEnded && (_jsxs("div", { className: twMerge('mb-2 flex flex-col items-center justify-center whitespace-nowrap rounded-md bg-bg-primary px-2 py-1.5 font-semibold text-[#EAAA08] text-sm', classNames.countdownHeading), children: [_jsx("span", { className: "font-semibold", children: "Ended" }), _jsx("span", { className: twMerge('text-[#CECFD2] text-[9px]', classNames.countdownSubheading), children: format(tournament.activationEndDateTime, 'MMMM dd, yyyy') })] })), !isLaunchStarts && !isEnded && (_jsx("div", { className: twMerge('mb-2 flex items-center justify-center rounded-md bg-bg-primary py-1 font-semibold text-[#EAAA08] text-sm', classNames.countdownHeading), children: "Launching Soon" })), !isEnded && (_jsx("div", { className: "flex justify-between text-center text-yellow-900", children: timeParts.map((part, idx) => {
|
|
53
53
|
return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "flex h-fit w-8 flex-col items-center rounded-[0.25rem] bg-bg-primary pb-1.5 text-text-primary-900", children: [_jsx("p", { className: twMerge('font-medium text-base', classNames.countdownTime), children: part.value }), _jsx("p", { className: "text-3xs", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col justify-center gap-1.5 px-1.5", children: [_jsx("span", { className: twMerge('h-1 w-1 rounded-full bg-bg-primary', classNames.countdownSeparator) }), _jsx("span", { className: twMerge('h-1 w-1 rounded-full bg-bg-primary', classNames.countdownSeparator) })] }))] }, part.label));
|
|
54
54
|
}) }))] })] }), _jsx("div", { className: "text-left font-medium text-lg text-text-primary-900 lg:mt-4.5 lg:text-2xl", children: tournament.name }), _jsx("div", { className: "mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:mb-5xl lg:text-4xl", children: formatNumber(tournamentReward, {
|
|
55
55
|
currency: localeInfo.currency.code,
|
|
@@ -68,13 +68,20 @@ export function TournamentsListItemMobile({ style, className, startStyle, }) {
|
|
|
68
68
|
minDecimalPlaces: 2,
|
|
69
69
|
maxDecimalPlaces: 2,
|
|
70
70
|
})] }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] }) })) : (_jsxs("div", { className: "relative mt-4 flex w-fit gap-4 rounded-lg bg-bg-primary p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })), _jsx("div", { className: "-right-0 absolute bottom-[30px] z-1 block lg:absolute", children: _jsx("div", { className: "h-[9.688rem] w-auto shrink-0", children: _jsx(Image, { width: 72.941, height: 93, src: trophy, alt: "trophy" }) }) })] }), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }) }), isDetailsVisible && (_jsxs("div", { className: "bg-bg-primary", children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: "Leaderboard" }) }), _jsx(TournamentsListItemRules, {})] }), _jsx("div", { children: _jsx("div", { className: "overflow-hidden border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "h-8 bg-bg-secondary text-center font-medium text-text-tertiary-600 text-xs", children: [_jsx("th", { className: "w-[3.25rem]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length
|
|
71
|
-
?
|
|
71
|
+
? [
|
|
72
|
+
...tournament.currentLeaderboard.edges,
|
|
73
|
+
...Array(Math.max(0, 10 - tournament.currentLeaderboard.edges.length)).fill(''),
|
|
74
|
+
].map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-center text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary border-t-1", children: _jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', i < 3
|
|
72
75
|
? starTierStyles[i]?.fillStarColor
|
|
73
76
|
: startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 3
|
|
74
77
|
? starTierStyles[i]?.numberColor
|
|
75
|
-
: startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children:
|
|
76
|
-
|
|
77
|
-
|
|
78
|
+
: startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: tournament.node?.username
|
|
79
|
+
? maskFirstLast(tournament.node.username, {
|
|
80
|
+
midLength: 4,
|
|
81
|
+
})
|
|
82
|
+
: '-' }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: tournament.node?.multiplier
|
|
83
|
+
? `${tournament.node.multiplier}x`
|
|
84
|
+
: '-' }), tournament.node?.prize ? (_jsx("td", { className: "h-12 border-border-secondary border-t-1 text-brand-400", children: formatNumber(tournament.node.prize, {
|
|
78
85
|
currency: localeInfo.currency.code,
|
|
79
86
|
minDecimalPlaces: 2,
|
|
80
87
|
maxDecimalPlaces: 2,
|