@opexa/portal-components 0.0.845 → 0.0.847
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/TournamentsCarousel/TournamentsCarousel.d.ts +4 -0
- package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarousel.js +2 -2
- package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.d.ts +5 -1
- package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.js +15 -15
- package/dist/components/Tournaments/TournamentsList/TournamentsList.d.ts +4 -0
- package/dist/components/Tournaments/TournamentsList/TournamentsList.js +2 -2
- package/dist/components/Tournaments/TournamentsList/TournamentsListItemDesktop.d.ts +5 -1
- package/dist/components/Tournaments/TournamentsList/TournamentsListItemDesktop.js +21 -23
- package/dist/components/Tournaments/TournamentsList/TournamentsListItemMobile.d.ts +5 -1
- package/dist/components/Tournaments/TournamentsList/TournamentsListItemMobile.js +17 -17
- package/dist/icons/StarIcon.js +1 -1
- package/package.json +1 -1
|
@@ -21,6 +21,10 @@ export interface TournamentsCarouselProps {
|
|
|
21
21
|
viewAllUrl?: string;
|
|
22
22
|
className?: string | ClassNameEntries;
|
|
23
23
|
style?: CSSProperties | StyleEntries;
|
|
24
|
+
startStyle?: {
|
|
25
|
+
fillStarColor: string;
|
|
26
|
+
numberColor: string;
|
|
27
|
+
};
|
|
24
28
|
}
|
|
25
29
|
export declare function TournamentsCarousel({ style, className, ...props }: TournamentsCarouselProps): import("react/jsx-runtime").JSX.Element | null;
|
|
26
30
|
export {};
|
|
@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import useEmblaCarousel from 'embla-carousel-react';
|
|
4
4
|
import { isString } from 'lodash-es';
|
|
5
5
|
import Link from 'next/link';
|
|
6
|
-
import { useCallback, useEffect, useState } from 'react';
|
|
6
|
+
import { useCallback, useEffect, useState, } from 'react';
|
|
7
7
|
import { useTournamentsQuery } from '../../../client/hooks/useTournamentsQuery.js';
|
|
8
8
|
import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
|
|
9
9
|
import { ArrowRightIcon } from '../../../icons/ArrowRightIcon.js';
|
|
@@ -73,5 +73,5 @@ export function TournamentsCarousel({ style, className, ...props }) {
|
|
|
73
73
|
badgeRoot: classNames.itemBadgeRoot,
|
|
74
74
|
badgeLabel: classNames.itemBadgeLabel,
|
|
75
75
|
badgeIcon: classNames.itemBadgeIcon,
|
|
76
|
-
} }) }, tournament.id))) }) })] }));
|
|
76
|
+
}, startStyle: props.startStyle }) }, tournament.id))) }) })] }));
|
|
77
77
|
}
|
|
@@ -26,6 +26,10 @@ export interface TournamentsCarouselItemProps {
|
|
|
26
26
|
className?: string | ClassNameEntries;
|
|
27
27
|
/** @default "/tournaments" */
|
|
28
28
|
viewAllUrl?: string;
|
|
29
|
+
startStyle?: {
|
|
30
|
+
fillStarColor: string;
|
|
31
|
+
numberColor: string;
|
|
32
|
+
};
|
|
29
33
|
}
|
|
30
|
-
export declare function TournamentsCarouselItem({ style, className, viewAllUrl, }: TournamentsCarouselItemProps): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
export declare function TournamentsCarouselItem({ style, className, startStyle, viewAllUrl, }: TournamentsCarouselItemProps): import("react/jsx-runtime").JSX.Element;
|
|
31
35
|
export {};
|
|
@@ -21,7 +21,7 @@ import { maskFirstLast } from '../../../utils/mask.js';
|
|
|
21
21
|
import { useTournamentTimer } from '../TournamentsList/useTournamentTimer.js';
|
|
22
22
|
import { useTournamentsCarouselItemContext } from './TournamentsCarouselContext.js';
|
|
23
23
|
import css from './TournamentsCarouselItem.module.css';
|
|
24
|
-
export function TournamentsCarouselItem({ style, className, viewAllUrl, }) {
|
|
24
|
+
export function TournamentsCarouselItem({ style, className, startStyle, viewAllUrl, }) {
|
|
25
25
|
const tournament = useTournamentsCarouselItemContext();
|
|
26
26
|
const localeInfo = useLocaleInfo();
|
|
27
27
|
const { isLaunchStarts, timeParts, now } = useTournamentTimer({
|
|
@@ -44,7 +44,7 @@ export function TournamentsCarouselItem({ style, className, viewAllUrl, }) {
|
|
|
44
44
|
? { root: className }
|
|
45
45
|
: (className ?? {});
|
|
46
46
|
const isEnded = new Date(tournament.activationEndDateTime) < now;
|
|
47
|
-
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 flex-1 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-
|
|
47
|
+
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 flex-1 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-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 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 justify-between", children: _jsxs("div", { children: [_jsx("div", { className: "text-left font-medium text-lg text-text-primary-900 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, {
|
|
48
48
|
currency: localeInfo.currency.code,
|
|
49
49
|
minDecimalPlaces: 2,
|
|
50
50
|
maxDecimalPlaces: 2,
|
|
@@ -59,34 +59,34 @@ export function TournamentsCarouselItem({ style, className, viewAllUrl, }) {
|
|
|
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
|
-
? tournament.currentLeaderboard.edges.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:
|
|
62
|
+
? tournament.currentLeaderboard.edges.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
|
+
? starTierStyles[i]?.fillStarColor
|
|
64
|
+
: startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 3
|
|
65
|
+
? starTierStyles[i]?.numberColor
|
|
66
|
+
: startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: maskFirstLast(tournament.node.username, {
|
|
63
67
|
midLength: 4,
|
|
64
68
|
}) }), _jsxs("td", { className: "h-12 border-border-secondary border-t-2", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "h-12 border-border-secondary border-t-2 text-brand-400", children: formatNumber(prizeAmountsByRank[i], {
|
|
65
69
|
currency: localeInfo.currency.code,
|
|
66
70
|
minDecimalPlaces: 2,
|
|
67
71
|
maxDecimalPlaces: 2,
|
|
68
72
|
}) })) : (_jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }))] }, i)))
|
|
69
|
-
: 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:
|
|
73
|
+
: 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
|
+
? starTierStyles[i]?.fillStarColor
|
|
75
|
+
: startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 3
|
|
76
|
+
? starTierStyles[i]?.numberColor
|
|
77
|
+
: startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" })] }, i))) })] }) }) })] })] }));
|
|
70
78
|
}
|
|
71
79
|
const starTierStyles = [
|
|
72
80
|
{
|
|
73
|
-
|
|
81
|
+
fillStarColor: 'fill-[#fac515]',
|
|
74
82
|
numberColor: 'text-bg-primary',
|
|
75
83
|
},
|
|
76
84
|
{
|
|
77
|
-
|
|
85
|
+
fillStarColor: 'fill-[#cecfd2]',
|
|
78
86
|
numberColor: 'text-bg-primary',
|
|
79
87
|
},
|
|
80
88
|
{
|
|
81
|
-
|
|
89
|
+
fillStarColor: 'fill-[#a15c07]',
|
|
82
90
|
numberColor: 'text-bg-primary',
|
|
83
91
|
},
|
|
84
|
-
{
|
|
85
|
-
starColor: 'text-bg-quaternary',
|
|
86
|
-
numberColor: 'text-text-primary-900',
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
starColor: 'text-bg-quaternary',
|
|
90
|
-
numberColor: 'text-text-primary-900',
|
|
91
|
-
},
|
|
92
92
|
];
|
|
@@ -44,6 +44,10 @@ export interface TournamentsListProps {
|
|
|
44
44
|
* ```
|
|
45
45
|
*/
|
|
46
46
|
viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
|
|
47
|
+
startStyle?: {
|
|
48
|
+
fillStarColor: string;
|
|
49
|
+
numberColor: string;
|
|
50
|
+
};
|
|
47
51
|
}
|
|
48
52
|
export declare function TournamentsList({ style, className, ...props }: TournamentsListProps): import("react/jsx-runtime").JSX.Element;
|
|
49
53
|
export {};
|
|
@@ -44,7 +44,7 @@ export function TournamentsList({ style, className, ...props }) {
|
|
|
44
44
|
badgeRoot: classNames.itemBadgeRoot,
|
|
45
45
|
badgeLabel: classNames.itemBadgeLabel,
|
|
46
46
|
badgeIcon: classNames.itemBadgeIcon,
|
|
47
|
-
} }) }, tournament.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: tournaments.map((tournament) => (_jsx(TournamentsListItemContext, { value: tournament, children: _jsx(TournamentsListItemMobile, { style: {
|
|
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
50
|
badgeIcon: styles.itemBadgeIcon,
|
|
@@ -56,5 +56,5 @@ export function TournamentsList({ style, className, ...props }) {
|
|
|
56
56
|
badgeRoot: classNames.itemBadgeRoot,
|
|
57
57
|
badgeLabel: classNames.itemBadgeLabel,
|
|
58
58
|
badgeIcon: classNames.itemBadgeIcon,
|
|
59
|
-
} }) }, tournament.id))) })] })) : (_jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", className: "size-full h-29.5 w-29.5 mix-blend-luminosity lg:h-25 lg:w-25" }), _jsx("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: "No Tournaments" }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: ["No tournaments are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
|
|
59
|
+
}, startStyle: props.startStyle }) }, tournament.id))) })] })) : (_jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", className: "size-full h-29.5 w-29.5 mix-blend-luminosity lg:h-25 lg:w-25" }), _jsx("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: "No Tournaments" }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: ["No tournaments are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
|
|
60
60
|
}
|
|
@@ -26,6 +26,10 @@ interface StyleEntries {
|
|
|
26
26
|
interface TournamentsListItemDesktopProps {
|
|
27
27
|
style?: CSSProperties | StyleEntries;
|
|
28
28
|
className?: string | ClassNameEntries;
|
|
29
|
+
startStyle?: {
|
|
30
|
+
fillStarColor: string;
|
|
31
|
+
numberColor: string;
|
|
32
|
+
};
|
|
29
33
|
}
|
|
30
|
-
export declare function TournamentsListItemDesktop({ style, className, }: TournamentsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
export declare function TournamentsListItemDesktop({ style, className, startStyle, }: TournamentsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
|
|
31
35
|
export {};
|
|
@@ -20,7 +20,7 @@ import { TournamentsListItemGameProviders } from './TournamentsListItemGameProvi
|
|
|
20
20
|
import { TournamentsListItemRules } from './TournamentsListItemRules.js';
|
|
21
21
|
import { useTournamentsListItemData } from './useTournamentListItemData.js';
|
|
22
22
|
import { useTournamentTimer } from './useTournamentTimer.js';
|
|
23
|
-
export function TournamentsListItemDesktop({ style, className, }) {
|
|
23
|
+
export function TournamentsListItemDesktop({ style, className, startStyle, }) {
|
|
24
24
|
const tournament = useTournamentsListItemContext();
|
|
25
25
|
const { isLaunchStarts, timeParts, now } = useTournamentTimer({
|
|
26
26
|
activationEndDateTime: tournament.activationEndDateTime,
|
|
@@ -39,12 +39,12 @@ export function TournamentsListItemDesktop({ style, className, }) {
|
|
|
39
39
|
? { root: className }
|
|
40
40
|
: (className ?? {});
|
|
41
41
|
const isEnded = new Date(tournament.activationEndDateTime) < now;
|
|
42
|
-
return (_jsxs("div", { style: styles.outerRoot, className: twMerge('overflow-hidden rounded-2xl border border-border-primary bg-
|
|
42
|
+
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 flex-1 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
43
|
currency: localeInfo.currency.code,
|
|
44
44
|
minDecimalPlaces: 2,
|
|
45
45
|
maxDecimalPlaces: 2,
|
|
46
|
-
}) })] }), _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-
|
|
47
|
-
return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "rounded-md bg-
|
|
46
|
+
}) })] }), _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
|
+
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
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", { children: _jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", 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: "1st" })] }), _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?.topPayouts[0]?.member?.name || '', { midLength: 4 }) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.topPayouts[0]?.amount, {
|
|
49
49
|
currency: localeInfo.currency.code,
|
|
50
50
|
minDecimalPlaces: 2,
|
|
@@ -53,44 +53,42 @@ export function TournamentsListItemDesktop({ style, className, }) {
|
|
|
53
53
|
currency: localeInfo.currency.code,
|
|
54
54
|
minDecimalPlaces: 2,
|
|
55
55
|
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 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: tournament.currentLeaderboard.edges.length
|
|
57
|
-
? 'Leaderboard'
|
|
58
|
-
: 'Starting soon!' })] }), _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
|
|
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 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" })] }), _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
|
|
59
57
|
? [
|
|
60
58
|
...tournament.currentLeaderboard.edges,
|
|
61
59
|
...Array(Math.max(0, 10 - tournament.currentLeaderboard.edges.length)).fill(''),
|
|
62
|
-
].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-
|
|
60
|
+
].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-1", children: _jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', i < 3
|
|
61
|
+
? starTierStyles[i]?.fillStarColor
|
|
62
|
+
: startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 3
|
|
63
|
+
? starTierStyles[i]?.numberColor
|
|
64
|
+
: startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: tournament.node?.username
|
|
63
65
|
? maskFirstLast(tournament.node.username, {
|
|
64
66
|
midLength: 4,
|
|
65
67
|
})
|
|
66
|
-
: '-' }), _jsx("td", { className: "h-12 border-border-secondary border-t-
|
|
68
|
+
: '-' }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: tournament.node?.multiplier
|
|
67
69
|
? `${tournament.node.multiplier}x`
|
|
68
|
-
: '-' }), tournament.node?.prize ? (_jsx("td", { className: "h-12 border-border-secondary border-t-
|
|
70
|
+
: '-' }), tournament.node?.prize ? (_jsx("td", { className: "h-12 border-border-secondary border-t-1 text-brand-400", children: formatNumber(tournament.node.prize, {
|
|
69
71
|
currency: localeInfo.currency.code,
|
|
70
72
|
minDecimalPlaces: 2,
|
|
71
73
|
maxDecimalPlaces: 2,
|
|
72
|
-
}) })) : (_jsx("td", { className: "h-12 border-border-secondary border-t-
|
|
73
|
-
: 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-
|
|
74
|
+
}) })) : (_jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" }))] }, i)))
|
|
75
|
+
: 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-1", children: _jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', i < 3
|
|
76
|
+
? starTierStyles[i]?.fillStarColor
|
|
77
|
+
: startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 3
|
|
78
|
+
? starTierStyles[i]?.numberColor
|
|
79
|
+
: startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" })] }, i))) })] }) }) })] })] }), Boolean(filteredGameProviders.length) && (_jsx(TournamentsListItemGameProviders, { gameProviders: filteredGameProviders }))] }));
|
|
74
80
|
}
|
|
75
81
|
const starTierStyles = [
|
|
76
82
|
{
|
|
77
|
-
|
|
83
|
+
fillStarColor: 'fill-[#fac515]',
|
|
78
84
|
numberColor: 'text-bg-primary',
|
|
79
85
|
},
|
|
80
86
|
{
|
|
81
|
-
|
|
87
|
+
fillStarColor: 'fill-[#cecfd2]',
|
|
82
88
|
numberColor: 'text-bg-primary',
|
|
83
89
|
},
|
|
84
90
|
{
|
|
85
|
-
|
|
91
|
+
fillStarColor: 'fill-[#a15c07]',
|
|
86
92
|
numberColor: 'text-bg-primary',
|
|
87
93
|
},
|
|
88
|
-
{
|
|
89
|
-
starColor: 'text-bg-quaternary',
|
|
90
|
-
numberColor: 'text-text-primary-900',
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
starColor: 'text-bg-quaternary',
|
|
94
|
-
numberColor: 'text-text-primary-900',
|
|
95
|
-
},
|
|
96
94
|
];
|
|
@@ -26,6 +26,10 @@ interface StyleEntries {
|
|
|
26
26
|
interface TournamentsListItemMobileProps {
|
|
27
27
|
style?: CSSProperties | StyleEntries;
|
|
28
28
|
className?: string | ClassNameEntries;
|
|
29
|
+
startStyle?: {
|
|
30
|
+
fillStarColor: string;
|
|
31
|
+
numberColor: string;
|
|
32
|
+
};
|
|
29
33
|
}
|
|
30
|
-
export declare function TournamentsListItemMobile({ style, className, }: TournamentsListItemMobileProps): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
export declare function TournamentsListItemMobile({ style, className, startStyle, }: TournamentsListItemMobileProps): import("react/jsx-runtime").JSX.Element;
|
|
31
35
|
export {};
|
|
@@ -21,7 +21,7 @@ import { TournamentsListItemGameProviders } from './TournamentsListItemGameProvi
|
|
|
21
21
|
import { TournamentsListItemRules } from './TournamentsListItemRules.js';
|
|
22
22
|
import { useTournamentsListItemData } from './useTournamentListItemData.js';
|
|
23
23
|
import { useTournamentTimer } from './useTournamentTimer.js';
|
|
24
|
-
export function TournamentsListItemMobile({ style, className, }) {
|
|
24
|
+
export function TournamentsListItemMobile({ style, className, startStyle, }) {
|
|
25
25
|
const tournament = useTournamentsListItemContext();
|
|
26
26
|
const { isLaunchStarts, timeParts, now } = useTournamentTimer({
|
|
27
27
|
activationEndDateTime: tournament.activationEndDateTime,
|
|
@@ -41,7 +41,7 @@ export function TournamentsListItemMobile({ style, className, }) {
|
|
|
41
41
|
? { root: className }
|
|
42
42
|
: (className ?? {});
|
|
43
43
|
const isEnded = new Date(tournament.activationEndDateTime) < now;
|
|
44
|
-
return (_jsxs("div", { style: styles.
|
|
44
|
+
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 flex-1 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
45
|
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
46
|
}) }))] })] }), _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
47
|
currency: localeInfo.currency.code,
|
|
@@ -58,34 +58,34 @@ export function TournamentsListItemMobile({ style, className, }) {
|
|
|
58
58
|
minDecimalPlaces: 2,
|
|
59
59
|
maxDecimalPlaces: 2,
|
|
60
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-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
|
|
61
|
-
? tournament.currentLeaderboard.edges.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-
|
|
61
|
+
? tournament.currentLeaderboard.edges.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 < 4
|
|
62
|
+
? starTierStyles[i]?.fillStarColor
|
|
63
|
+
: startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 4
|
|
64
|
+
? starTierStyles[i]?.numberColor
|
|
65
|
+
: startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: maskFirstLast(tournament.node.username, {
|
|
62
66
|
midLength: 4,
|
|
63
|
-
}) }), _jsxs("td", { className: "h-12 border-border-secondary border-t-
|
|
67
|
+
}) }), _jsxs("td", { className: "h-12 border-border-secondary border-t-1", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "h-12 border-border-secondary border-t-1 text-brand-400", children: formatNumber(prizeAmountsByRank[i], {
|
|
64
68
|
currency: localeInfo.currency.code,
|
|
65
69
|
minDecimalPlaces: 2,
|
|
66
70
|
maxDecimalPlaces: 2,
|
|
67
|
-
}) })) : (_jsx("td", { className: "h-12 border-border-secondary border-t-
|
|
68
|
-
: Array.from({ length: 5 }).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-
|
|
71
|
+
}) })) : (_jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" }))] }, i)))
|
|
72
|
+
: Array.from({ length: 5 }).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
|
+
? starTierStyles[i]?.fillStarColor
|
|
74
|
+
: startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 4
|
|
75
|
+
? starTierStyles[i]?.numberColor
|
|
76
|
+
: startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" })] }, i))) })] }) }) })] }), Boolean(filteredGameProviders.length) && (_jsx(TournamentsListItemGameProviders, { gameProviders: filteredGameProviders })), _jsx("div", { className: "p-3", children: _jsx(Button, { variant: "outline", className: twMerge('px-3.5 py-2.5 text-sm', !isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["Hide", _jsx(ArrowNarrowUpIcon, { className: "size-5" })] }) }) })] }))] }));
|
|
69
77
|
}
|
|
70
78
|
const starTierStyles = [
|
|
71
79
|
{
|
|
72
|
-
|
|
80
|
+
fillStarColor: 'fill-[#fac515]',
|
|
73
81
|
numberColor: 'text-bg-primary',
|
|
74
82
|
},
|
|
75
83
|
{
|
|
76
|
-
|
|
84
|
+
fillStarColor: 'fill-[#cecfd2]',
|
|
77
85
|
numberColor: 'text-bg-primary',
|
|
78
86
|
},
|
|
79
87
|
{
|
|
80
|
-
|
|
88
|
+
fillStarColor: 'fill-[#a15c07]',
|
|
81
89
|
numberColor: 'text-bg-primary',
|
|
82
90
|
},
|
|
83
|
-
{
|
|
84
|
-
starColor: 'text-bg-quaternary',
|
|
85
|
-
numberColor: 'text-text-primary-900',
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
starColor: 'text-bg-quaternary',
|
|
89
|
-
numberColor: 'text-text-primary-900',
|
|
90
|
-
},
|
|
91
91
|
];
|
package/dist/icons/StarIcon.js
CHANGED
|
@@ -3,5 +3,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useId } from 'react';
|
|
4
4
|
export function StarIcon({ className }) {
|
|
5
5
|
const gradientId = useId();
|
|
6
|
-
return (_jsxs("svg", {
|
|
6
|
+
return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "75", height: "72", fill: "#F7D323", viewBox: "0 0 75 72", className: className, children: [_jsx("path", { fill: "inherit", strokeWidth: "3", strokeLinejoin: "round", d: "M34.139 3.597c1.331-2.704 5.1-2.79 6.586-.252l.136.254 8.744 17.753.348.708.781.113 19.55 2.848c3.071.447 4.307 4.237 2.076 6.417L58.214 45.255l-.564.551.133.776 3.34 19.512c.51 2.984-2.498 5.266-5.18 4.091l-.26-.125-17.485-9.212-.699-.369-.7.37-17.484 9.211c-2.743 1.446-5.966-.886-5.439-3.966l3.34-19.512.133-.776-.564-.55L2.64 31.436c-2.231-2.179-.995-5.97 2.077-6.417l19.549-2.848.78-.113.35-.708 8.743-17.753Z" }), _jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "37.5", x2: "37.5", y1: "0.003", y2: "72.003", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#fac515" }), _jsx("stop", { offset: "1", stopColor: "#fac515" })] }) })] }));
|
|
7
7
|
}
|