@opexa/portal-components 0.0.847 → 0.0.848
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/components/Tournaments/TournamentsList/TournamentsList.js +2 -0
- package/dist/components/Tournaments/TournamentsList/TournamentsListItemDesktop.js +19 -7
- package/dist/components/Tournaments/TournamentsList/TournamentsListItemMobile.js +19 -9
- package/dist/utils/getOrdinal.d.ts +1 -0
- package/dist/utils/getOrdinal.js +6 -0
- package/package.json +1 -1
|
@@ -47,12 +47,14 @@ export function TournamentsList({ style, className, ...props }) {
|
|
|
47
47
|
}, startStyle: props.startStyle }) }, tournament.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: tournaments.map((tournament) => (_jsx(TournamentsListItemContext, { value: tournament, children: _jsx(TournamentsListItemMobile, { style: {
|
|
48
48
|
...styles,
|
|
49
49
|
root: styles.itemRoot,
|
|
50
|
+
outerRoot: styles.itemOuterRoot,
|
|
50
51
|
badgeIcon: styles.itemBadgeIcon,
|
|
51
52
|
badgeRoot: styles.itemBadgeRoot,
|
|
52
53
|
badgeLabel: styles.itemBadgeLabel,
|
|
53
54
|
}, className: {
|
|
54
55
|
...classNames,
|
|
55
56
|
root: classNames.itemRoot,
|
|
57
|
+
outerRoot: classNames.itemOuterRoot,
|
|
56
58
|
badgeRoot: classNames.itemBadgeRoot,
|
|
57
59
|
badgeLabel: classNames.itemBadgeLabel,
|
|
58
60
|
badgeIcon: classNames.itemBadgeIcon,
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { format } from 'date-fns';
|
|
3
|
+
import Autoplay from 'embla-carousel-autoplay';
|
|
4
|
+
import useEmblaCarousel from 'embla-carousel-react';
|
|
3
5
|
import { isString } from 'lodash-es';
|
|
4
6
|
import Image from 'next/image';
|
|
5
7
|
import React from 'react';
|
|
@@ -12,6 +14,7 @@ import firstPlace from '../../../images/first-place.png';
|
|
|
12
14
|
import trophyTwo from '../../../images/trophy-two.png';
|
|
13
15
|
import trophy from '../../../images/trophy.png';
|
|
14
16
|
import { formatNumber } from '../../../utils/formatNumber.js';
|
|
17
|
+
import { getOrdinal } from '../../../utils/getOrdinal.js';
|
|
15
18
|
import { isStyleEntries } from '../../../utils/isStyleEntries.js';
|
|
16
19
|
import { maskFirstLast } from '../../../utils/mask.js';
|
|
17
20
|
import css from './TournamentItem.module.css';
|
|
@@ -39,21 +42,30 @@ export function TournamentsListItemDesktop({ style, className, startStyle, }) {
|
|
|
39
42
|
? { root: className }
|
|
40
43
|
: (className ?? {});
|
|
41
44
|
const isEnded = new Date(tournament.activationEndDateTime) < now;
|
|
42
|
-
|
|
45
|
+
const [emblaRef] = useEmblaCarousel({
|
|
46
|
+
slidesToScroll: 'auto',
|
|
47
|
+
loop: true,
|
|
48
|
+
duration: 0,
|
|
49
|
+
}, [Autoplay()]);
|
|
50
|
+
return (_jsxs("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 rounded-2xl p-3 text-center lg:gap-6 lg:p-5', classNames.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", { 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" })] }), _jsx("div", { className: "mt-1 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, {
|
|
43
51
|
currency: localeInfo.currency.code,
|
|
44
52
|
minDecimalPlaces: 2,
|
|
45
53
|
maxDecimalPlaces: 2,
|
|
46
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-white', 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-end space-x-2 text-center text-yellow-900", children: timeParts.map((part, idx) => {
|
|
47
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));
|
|
48
|
-
}) }))] }), _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", {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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-600" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: maskFirstLast(tournament.member?.name || '', {
|
|
58
|
+
midLength: 4,
|
|
59
|
+
}) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.amount, {
|
|
60
|
+
currency: localeInfo.currency.code,
|
|
61
|
+
minDecimalPlaces: 2,
|
|
62
|
+
maxDecimalPlaces: 2,
|
|
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-600" }), "Launching Soon"] }), _jsxs("div", { className: "font-semibold", children: ["Win up to", ' ', formatNumber(tournamentReward, {
|
|
53
65
|
currency: localeInfo.currency.code,
|
|
54
66
|
minDecimalPlaces: 2,
|
|
55
67
|
maxDecimalPlaces: 2,
|
|
56
|
-
})] }), _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-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
|
|
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-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 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
|
|
57
69
|
? [
|
|
58
70
|
...tournament.currentLeaderboard.edges,
|
|
59
71
|
...Array(Math.max(0, 10 - tournament.currentLeaderboard.edges.length)).fill(''),
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { format } from 'date-fns';
|
|
3
|
+
import Autoplay from 'embla-carousel-autoplay';
|
|
4
|
+
import useEmblaCarousel from 'embla-carousel-react';
|
|
3
5
|
import { isString } from 'lodash-es';
|
|
4
6
|
import Image from 'next/image';
|
|
5
7
|
import React, { useState } from 'react';
|
|
@@ -14,6 +16,7 @@ import firstPlace from '../../../images/first-place.png';
|
|
|
14
16
|
import trophy from '../../../images/trophy.png';
|
|
15
17
|
import { Button } from '../../../ui/Button/index.js';
|
|
16
18
|
import { formatNumber } from '../../../utils/formatNumber.js';
|
|
19
|
+
import { getOrdinal } from '../../../utils/getOrdinal.js';
|
|
17
20
|
import { isStyleEntries } from '../../../utils/isStyleEntries.js';
|
|
18
21
|
import { maskFirstLast } from '../../../utils/mask.js';
|
|
19
22
|
import { useTournamentsListItemContext } from './TournamentsListContext.js';
|
|
@@ -41,19 +44,26 @@ export function TournamentsListItemMobile({ style, className, startStyle, }) {
|
|
|
41
44
|
? { root: className }
|
|
42
45
|
: (className ?? {});
|
|
43
46
|
const isEnded = new Date(tournament.activationEndDateTime) < now;
|
|
44
|
-
|
|
47
|
+
const [emblaRef] = useEmblaCarousel({
|
|
48
|
+
slidesToScroll: 'auto',
|
|
49
|
+
loop: true,
|
|
50
|
+
duration: 0,
|
|
51
|
+
}, [Autoplay()]);
|
|
52
|
+
return (_jsxs("div", { style: styles.root, className: twMerge('overflow-hidden rounded-2xl border border-border-primary bg-bg-primary', classNames.root), children: [_jsx("div", { className: twMerge('relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5'), 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) => {
|
|
45
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));
|
|
46
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, {
|
|
47
55
|
currency: localeInfo.currency.code,
|
|
48
56
|
minDecimalPlaces: 2,
|
|
49
57
|
maxDecimalPlaces: 2,
|
|
50
|
-
}) })] }) }), _jsxs("div", { className: "relative", children: [tournament.topPayouts.length ? (_jsx("div", {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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-600" }), "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-600" }), "Launching Soon"] }), _jsxs("div", { className: "font-semibold", children: ["Win up to", ' ', formatNumber(tournamentReward, {
|
|
57
67
|
currency: localeInfo.currency.code,
|
|
58
68
|
minDecimalPlaces: 2,
|
|
59
69
|
maxDecimalPlaces: 2,
|
|
@@ -69,7 +79,7 @@ export function TournamentsListItemMobile({ style, className, startStyle, }) {
|
|
|
69
79
|
minDecimalPlaces: 2,
|
|
70
80
|
maxDecimalPlaces: 2,
|
|
71
81
|
}) })) : (_jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" }))] }, i)))
|
|
72
|
-
: Array.from({ length:
|
|
82
|
+
: Array.from({ length: 10 }).map((_, 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 < 4
|
|
73
83
|
? starTierStyles[i]?.fillStarColor
|
|
74
84
|
: startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 4
|
|
75
85
|
? starTierStyles[i]?.numberColor
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getOrdinal(n: number): string;
|