@opexa/portal-components 0.0.854 → 0.0.855
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.
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { format } from 'date-fns';
|
|
4
|
+
import Autoplay from 'embla-carousel-autoplay';
|
|
5
|
+
import useEmblaCarousel from 'embla-carousel-react';
|
|
4
6
|
import { isString } from 'lodash-es';
|
|
5
7
|
import Image from 'next/image';
|
|
6
8
|
import Link from 'next/link';
|
|
@@ -16,6 +18,7 @@ import firstPlace from '../../../images/first-place.png';
|
|
|
16
18
|
import trophyTwo from '../../../images/trophy-two.png';
|
|
17
19
|
import trophy from '../../../images/trophy.png';
|
|
18
20
|
import { formatNumber } from '../../../utils/formatNumber.js';
|
|
21
|
+
import { getOrdinal } from '../../../utils/getOrdinal.js';
|
|
19
22
|
import { isStyleEntries } from '../../../utils/isStyleEntries.js';
|
|
20
23
|
import { maskFirstLast } from '../../../utils/mask.js';
|
|
21
24
|
import { useTournamentTimer } from '../TournamentsList/useTournamentTimer.js';
|
|
@@ -43,21 +46,28 @@ export function TournamentsCarouselItem({ style, className, startStyle, viewAllU
|
|
|
43
46
|
? { root: className }
|
|
44
47
|
: (className ?? {});
|
|
45
48
|
const isEnded = new Date(tournament.activationEndDateTime) < now;
|
|
46
|
-
|
|
49
|
+
const [emblaRef] = useEmblaCarousel({
|
|
50
|
+
slidesToScroll: 'auto',
|
|
51
|
+
loop: true,
|
|
52
|
+
duration: 0,
|
|
53
|
+
}, [Autoplay()]);
|
|
54
|
+
return (_jsxs("div", { className: twMerge('relative flex w-full shrink-0 rounded-2xl border border-border-primary bg-bg-tertiary p-3 text-center lg:gap-6 lg:p-5', classNames.root), style: styles.root, children: [_jsx("div", { className: "relative z-1 flex w-1/2 flex-col", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { className: "w-full", children: [_jsxs("div", { className: "flex w-full 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 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-[9px] text-text-secondary-700', 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-brand-500 text-sm', classNames.countdownHeading), children: "Launching Soon" })), !isEnded && (_jsx("div", { className: "flex h-fit", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge('flex h-fit w-8 flex-col items-center rounded-[0.25rem] bg-bg-primary pb-1.5 text-text-primary-900'), children: [_jsx("span", { className: "font-medium text-base", children: String(part.value).padStart(2, '0') }), _jsx("span", { 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("div", { className: "h-1 w-1 rounded-full bg-bg-primary" }), _jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" })] }))] }, part.label))) }))] })] }), _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "w-full", children: [_jsx("div", { className: "w-1/2 text-left font-medium text-lg text-text-primary-900 lg:w-[68%] 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:text-4xl", children: formatNumber(tournamentReward, {
|
|
47
55
|
currency: localeInfo.currency.code,
|
|
48
56
|
minDecimalPlaces: 2,
|
|
49
57
|
maxDecimalPlaces: 2,
|
|
50
|
-
}) })] }) })] }), _jsx("div", { className: "-bottom-16 -right-6 absolute z-1 hidden lg:block", children: _jsx(Image, { width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) })] }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "-top-10 absolute right-0 z-1 block lg:hidden", children: _jsx(Image, { src: trophy, alt: "trophy", width: 155, height: 155, className: "h-23 w-auto" }) }), tournament.topPayouts.length ? (_jsx("div", {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
58
|
+
}) })] }) })] }), _jsx("div", { className: "-bottom-16 -right-6 absolute z-1 hidden lg:block", children: _jsx(Image, { width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) })] }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "-top-10 absolute right-0 z-1 block lg:hidden", children: _jsx(Image, { src: trophy, alt: "trophy", width: 155, height: 155, className: "h-23 w-auto" }) }), tournament.topPayouts.length ? (_jsx("div", { ref: emblaRef, className: "mt-4 overflow-hidden rounded-lg bg-bg-primary", children: _jsx("div", { className: "relative hidden lg:flex", children: tournament.topPayouts.map((tournament, idx) => {
|
|
59
|
+
return (_jsx("div", { className: "min-w-0 flex-[0_0_100%] p-4", children: _jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: getOrdinal(idx + 1) })] }), _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-700" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: maskFirstLast(tournament.member?.name || '', {
|
|
60
|
+
midLength: 4,
|
|
61
|
+
}) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.amount, {
|
|
62
|
+
currency: localeInfo.currency.code,
|
|
63
|
+
minDecimalPlaces: 2,
|
|
64
|
+
maxDecimalPlaces: 2,
|
|
65
|
+
}) })] })] }) }, tournament.id));
|
|
66
|
+
}) }) })) : !isLaunchStarts ? (_jsx("div", { className: "relative mt-4 w-full gap-4 rounded-lg bg-bg-primary p-4", children: _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-700" }), "Launching Soon"] }), _jsxs("div", { className: "font-semibold text-text-primary-900", children: ["Win up to", ' ', formatNumber(tournamentReward, {
|
|
57
67
|
currency: localeInfo.currency.code,
|
|
58
68
|
minDecimalPlaces: 2,
|
|
59
69
|
maxDecimalPlaces: 2,
|
|
60
|
-
})] }), _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-
|
|
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-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-700" }), "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 w-1/2 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
|
|
61
71
|
? [
|
|
62
72
|
...tournament.currentLeaderboard.edges,
|
|
63
73
|
...Array(Math.max(0, 10 - tournament.currentLeaderboard.edges.length)).fill(''),
|
|
@@ -51,21 +51,21 @@ export function TournamentsListItemDesktop({ style, className, startStyle, }) {
|
|
|
51
51
|
currency: localeInfo.currency.code,
|
|
52
52
|
minDecimalPlaces: 2,
|
|
53
53
|
maxDecimalPlaces: 2,
|
|
54
|
-
}) })] }), _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-[9px] text-
|
|
54
|
+
}) })] }), _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-[9px] text-text-secondary-700', 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-brand-500 text-sm', classNames.countdownHeading), children: "Launching Soon" })), !isEnded && (_jsx("div", { className: "flex justify-end space-x-2 text-center text-yellow-900", children: timeParts.map((part, idx) => {
|
|
55
55
|
return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "rounded-md bg-bg-primary p-1", children: [_jsx("p", { className: twMerge('w-[32px] font-medium text-[#FFFFFF] text-xl', classNames.countdownTime), children: part.value }), _jsx("p", { className: "text-[#FFFFFF] text-[8px]", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5", children: [_jsx("span", { className: twMerge('inline-flex h-1 w-1 rounded-full bg-bg-primary', classNames.countdownSeparator) }), _jsx("span", { className: twMerge('inline-flex h-1 w-1 rounded-full bg-bg-primary', classNames.countdownSeparator) })] }))] }, part.label));
|
|
56
56
|
}) }))] }), _jsx("div", { className: "-right-7 bottom-[-70px] z-1 block lg:absolute", children: _jsx("div", { className: "h-[9.688rem] w-auto shrink-0", children: _jsx(Image, { width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) }) })] }), tournament.topPayouts.length ? (_jsx("div", { ref: emblaRef, className: "mt-4 overflow-hidden rounded-lg bg-bg-primary", children: _jsx("div", { className: "relative hidden lg:flex", children: tournament.topPayouts.map((tournament, idx) => {
|
|
57
|
-
return (_jsx("div", { className: "min-w-0 flex-[0_0_100%] p-4", children: _jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: getOrdinal(idx + 1) })] }), _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-
|
|
57
|
+
return (_jsx("div", { className: "min-w-0 flex-[0_0_100%] p-4", children: _jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: getOrdinal(idx + 1) })] }), _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-700" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: maskFirstLast(tournament.member?.name || '', {
|
|
58
58
|
midLength: 4,
|
|
59
59
|
}) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.amount, {
|
|
60
60
|
currency: localeInfo.currency.code,
|
|
61
61
|
minDecimalPlaces: 2,
|
|
62
62
|
maxDecimalPlaces: 2,
|
|
63
63
|
}) })] })] }) }, tournament.id));
|
|
64
|
-
}) }) })) : !isLaunchStarts ? (_jsx("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: _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-
|
|
64
|
+
}) }) })) : !isLaunchStarts ? (_jsx("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: _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-700" }), "Launching Soon"] }), _jsxs("div", { className: "font-semibold text-text-primary-900", children: ["Win up to", ' ', formatNumber(tournamentReward, {
|
|
65
65
|
currency: localeInfo.currency.code,
|
|
66
66
|
minDecimalPlaces: 2,
|
|
67
67
|
maxDecimalPlaces: 2,
|
|
68
|
-
})] }), _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 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", 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-
|
|
68
|
+
})] }), _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 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", 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-700" }), "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 w-1/2 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" })] }), _jsx(TournamentsListItemRules, {})] }), _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
|
|
69
69
|
? [
|
|
70
70
|
...tournament.currentLeaderboard.edges,
|
|
71
71
|
...Array(Math.max(0, 10 - tournament.currentLeaderboard.edges.length)).fill(''),
|
|
@@ -49,25 +49,25 @@ export function TournamentsListItemMobile({ style, className, startStyle, }) {
|
|
|
49
49
|
loop: true,
|
|
50
50
|
duration: 0,
|
|
51
51
|
}, [Autoplay()]);
|
|
52
|
-
return (_jsx("div", { style: styles.outerRoot, className: twMerge('overflow-hidden rounded-2xl border border-border-primary bg-bg-primary', classNames.outerRoot), children: _jsxs("div", { style: styles.root, className: twMerge('relative flex shrink-0 flex-col rounded-2xl text-center lg:gap-4 lg:p-5', classNames.root), children: [_jsxs("div", { className: "relative flex w-full flex-col p-3", 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-[
|
|
52
|
+
return (_jsx("div", { style: styles.outerRoot, className: twMerge('overflow-hidden rounded-2xl border border-border-primary bg-bg-primary', classNames.outerRoot), children: _jsxs("div", { style: styles.root, className: twMerge('relative flex shrink-0 flex-col rounded-2xl text-center lg:gap-4 lg:p-5', classNames.root), children: [_jsxs("div", { className: "relative flex w-full flex-col p-3", 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-[9px] text-text-secondary-700', 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-brand-500 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: "w-1/2 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,
|
|
56
56
|
minDecimalPlaces: 2,
|
|
57
57
|
maxDecimalPlaces: 2,
|
|
58
58
|
}) })] }) }), _jsxs("div", { className: "relative", children: [tournament.topPayouts.length ? (_jsx("div", { ref: emblaRef, className: "relative mt-4 overflow-hidden rounded-lg bg-bg-primary", children: _jsx("div", { className: "flex lg:hidden", children: tournament.topPayouts.map((tournament, idx) => {
|
|
59
|
-
return (_jsx("div", { className: "min-w-0 flex-[0_0_100%] p-4", children: _jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: getOrdinal(idx + 1) })] }), _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-
|
|
59
|
+
return (_jsx("div", { className: "min-w-0 flex-[0_0_100%] p-4", children: _jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: getOrdinal(idx + 1) })] }), _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-700" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: maskFirstLast(tournament.member?.name || '', {
|
|
60
60
|
midLength: 4,
|
|
61
61
|
}) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.amount, {
|
|
62
62
|
currency: localeInfo.currency.code,
|
|
63
63
|
minDecimalPlaces: 2,
|
|
64
64
|
maxDecimalPlaces: 2,
|
|
65
65
|
}) })] })] }) }, tournament.id));
|
|
66
|
-
}) }) })) : !isLaunchStarts ? (_jsx("div", { className: "relative mt-4 w-full gap-4 rounded-lg bg-bg-primary p-4", children: _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-
|
|
66
|
+
}) }) })) : !isLaunchStarts ? (_jsx("div", { className: "relative mt-4 w-full gap-4 rounded-lg bg-bg-primary p-4", children: _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-700" }), "Launching Soon"] }), _jsxs("div", { className: "font-semibold text-text-primary-900", children: ["Win up to", ' ', formatNumber(tournamentReward, {
|
|
67
67
|
currency: localeInfo.currency.code,
|
|
68
68
|
minDecimalPlaces: 2,
|
|
69
69
|
maxDecimalPlaces: 2,
|
|
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-
|
|
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-700" }), "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: twMerge('bg-bg-primary', classNames.leaderboardSection), 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
72
|
...tournament.currentLeaderboard.edges,
|
|
73
73
|
...Array(Math.max(0, 10 - tournament.currentLeaderboard.edges.length)).fill(''),
|