@opexa/portal-components 0.0.957 → 0.0.958

package/dist/lib/components/Tournaments/TournamentsList/TournamentsListItem.CrazyWin.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns';
+import Image from 'next/image';
+import React, { useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Award01Icon } from '../../../icons/Award01Icon.js';
+import { ChevronDownIcon } from '../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../icons/ChevronUpIcon.js';
+import coins from '../../../images/coins.webp';
+import starTrophy from '../../../images/star-trophy.webp';
+import { Tabs } from '../../../ui/Tabs/index.js';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { CRAZYWIN_TOURNAMENT_VARIATIONS } from '../utils.js';
+import TournamentTable from './TournamentListItemTable.CrazyWin.js';
+import { useTournamentsListItemContext } from './TournamentsListContext.js';
+import { TournamentsListItemGameProviders } from './TournamentsListItemGameProviders.js';
+import { useTournamentsListItemData } from './useTournamentListItemData.js';
+import { useTournamentTimer } from './useTournamentTimer.js';
+export function TournamentsListItemCrazyWin({ index }) {
+    const variation = CRAZYWIN_TOURNAMENT_VARIATIONS[index % CRAZYWIN_TOURNAMENT_VARIATIONS.length];
+    const tournament = useTournamentsListItemContext();
+    const { isLaunchStarts, timeParts, now } = useTournamentTimer({
+        activationEndDateTime: tournament.activationEndDateTime,
+        activationStartDateTime: tournament.activationStartDateTime,
+    });
+    const { tournamentReward, filteredGameProviders, localeInfo } = useTournamentsListItemData();
+    const isEnded = new Date(tournament.activationEndDateTime) < now;
+    const [seeDetails, setSeeDetails] = useState(false);
+    const numberOfWinnersText = useMemo(() => `${tournament.winnersCount} winner${Number(tournament.winnersCount) > 1 ? 's' : ''}`, [tournament.winnersCount]);
+    return (_jsxs("div", { className: "w-full shrink-0 overflow-hidden rounded-2xl", children: [_jsxs("div", { className: twMerge('relative w-full flex-1 gap-4 rounded-t-[10px] p-4 lg:gap-10 lg:p-6', variation.background), children: [_jsx(Image, { src: variation.bgImage, alt: "treasure chest background", className: "absolute top-0 right-0 hidden h-full w-[720px] rounded-t-[10px] object-cover opacity-20 mix-blend-luminosity [mask-image:linear-gradient(to_right,transparent,black)] lg:block", priority: true, loading: "eager", fetchPriority: "high", unoptimized: true }), _jsx("div", { className: "relative z-1 flex w-full flex-col", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsx("div", { className: "relative flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col lg:flex-row", children: [_jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "flex w-fit items-center justify-center gap-1 rounded-[10px] border-[#82F0D0] border-[1px] px-[10px] py-1 text-[#82F0D0] text-xs lg:text-sm", children: [_jsx(Award01Icon, { className: "h-4 w-4 text-[#82F0D0]" }), "Multiplier"] }), _jsx("div", { className: "w-1/2 text-left font-bold text-lg lg:w-[68%] lg:text-[32px]", children: tournament.name }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: twMerge(variation.poolBg, variation.textColor, 'flex w-fit rounded-lg px-2 font-semibold text-[26px] lg:text-[36px]'), children: formatNumber(tournamentReward, {
+                                                                        currency: localeInfo.currency.code,
+                                                                        minDecimalPlaces: 2,
+                                                                        maxDecimalPlaces: 2,
+                                                                    }) }), _jsx("div", { className: twMerge(variation.poolBg, variation.textColor, 'mt-[6px] flex w-fit rounded-lg px-2 py-1 font-bold text-base lg:text-2xl'), children: numberOfWinnersText })] })] }), _jsxs("div", { className: "flex flex-col items-center justify-between", children: [_jsx("div", { className: twMerge('relative my-4 h-[129px] w-full overflow-hidden rounded-lg lg:hidden', variation.background), children: _jsx(Image, { src: variation.bgImage, alt: "image", className: "h-full w-full object-cover mix-blend-luminosity", priority: false, loading: "lazy", unoptimized: true }) }), _jsxs("div", { className: "flex w-full 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'), children: [_jsx("span", { className: "font-semibold", children: "Ended" }), _jsx("span", { className: twMerge('text-[9px] text-text-secondary-700'), 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'), children: "Launching Soon" })), !isEnded && (_jsx("div", { className: "flex h-fit w-full gap-2", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge(variation.poolBg, variation.textColor, variation.timeBorderColor, 'flex h-fit flex-1 flex-col items-center rounded-lg border-[1px] py-3 lg:w-[59px] lg:py-[6px]'), children: [_jsx("span", { className: "font-semibold text-lg lg:text-2xl", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-2xs lg:text-xs", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex shrink-0 flex-col justify-center gap-1.5 px-1", 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: "mt-2xl w-fit", children: _jsx("div", { className: "flex w-full", children: _jsxs("div", { className: "flex h-full flex-row-reverse items-center justify-start lg:flex-col", children: [_jsx(Image, { src: coins, alt: "coins", className: "w-[179.2px] lg:w-[132.26px]", unoptimized: true }), _jsxs("div", { className: "text-start lg:text-center", children: [_jsx("p", { className: "mt-1 font-semibold text-[16px] leading-6", children: "No one has won big yet" }), _jsx("p", { className: "mt-1 text-start text-xs leading-[1.125rem] lg:text-center", children: "You could be the first to win the tournament!" })] })] }) }) })] })] }) }) }) }) }) })] }), _jsxs("div", { className: "relative flex w-full flex-col items-center rounded-b-2xl bg-[#171b26] px-4 text-[#94969C]", children: [_jsxs("div", { className: "flex w-full justify-between py-4", children: [_jsxs("button", { onClick: () => setSeeDetails((v) => !v), type: "button", className: "flex items-center gap-1 font-medium text-sm", children: ["See details", ' ', seeDetails ? (_jsx(ChevronUpIcon, { className: "h-5" })) : (_jsx(ChevronDownIcon, { className: "h-5" }))] }), _jsx("button", { type: "button", className: "inline-flex h-9 items-center justify-center rounded-lg border border-[#333741] px-4 py-2.5 font-semibold text-[#CECFD2]", children: "Tournament Rules" })] }), seeDetails && (_jsxs("div", { className: "mt-2 w-full", children: [_jsx("div", { children: _jsx("div", { className: "mt-[6px] flex justify-between text-[#CECFD2] text-lg", children: _jsxs("div", { className: "flex items-center gap-3 font-semibold", children: [_jsx(Image, { src: starTrophy, alt: "star trophy", unoptimized: true }), "Ranking"] }) }) }), _jsx("div", { children: _jsxs(Tabs.Root, { defaultValue: "current", className: "mt-4", children: [_jsxs(Tabs.List, { className: "flex gap-1 rounded-xl border border-[#1F242F] bg-[#1A1620] p-1 font-semibold text-[#757278] text-sm leading-[0.01em] lg:w-fit", children: [_jsx(Tabs.Trigger, { value: "current", className: "ui-selected:text-white", children: "Current" }), _jsx(Tabs.Trigger, { value: "previous", className: "ui-selected:text-white", children: "Previous" }), _jsx(Tabs.Indicator, { className: "bg-[linear-gradient(241.67deg,#1A534C_1.19%,#051B29_100%)]" })] }), _jsx(Tabs.Content, { value: "current", children: _jsx(TournamentTable, { winnersCount: Number(tournament.winnersCount), rewardSettings: tournament.rewardSettings, leaderboard: tournament.currentLeaderboard
+                                                    .edges }) }), _jsx(Tabs.Content, { value: "previous", children: _jsx(TournamentTable, { winnersCount: Number(tournament.winnersCount), rewardSettings: tournament.rewardSettings, leaderboard: tournament.currentLeaderboard
+                                                    .edges }) })] }) }), _jsx("div", { className: "w-full", children: Boolean(filteredGameProviders.length) && (_jsx(TournamentsListItemGameProviders, { gameProviders: filteredGameProviders })) })] }))] })] }));
+}

package/dist/lib/components/Tournaments/TournamentsList/TournamentsListItem.HappyBingo.d.ts

@@ -0,0 +1,3 @@
+export declare function TournamentsListItemHappyBingo({ index }: {
+    index: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Tournaments/TournamentsList/TournamentsListItem.HappyBingo.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns';
+import Image from 'next/image';
+import React, { useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Award01Icon } from '../../../icons/Award01Icon.js';
+import { ChevronDownIcon } from '../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../icons/ChevronUpIcon.js';
+import star from '../../../images/3d-star.webp';
+import coins from '../../../images/happy-bingo-coins.webp';
+import { Tabs } from '../../../ui/Tabs/index.js';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { HAPPY_BINGO_TOURNAMENT_VARIATIONS } from '../utils.js';
+import TournamentTable from './TournamentListItemTable.HappyBingo.js';
+import { useTournamentsListItemContext } from './TournamentsListContext.js';
+import { TournamentsListItemGameProviders } from './TournamentsListItemGameProviders.js';
+import { useTournamentsListItemData } from './useTournamentListItemData.js';
+import { useTournamentTimer } from './useTournamentTimer.js';
+export function TournamentsListItemHappyBingo({ index }) {
+    const variation = HAPPY_BINGO_TOURNAMENT_VARIATIONS[index % HAPPY_BINGO_TOURNAMENT_VARIATIONS.length];
+    const tournament = useTournamentsListItemContext();
+    const { isLaunchStarts, timeParts, now } = useTournamentTimer({
+        activationEndDateTime: tournament.activationEndDateTime,
+        activationStartDateTime: tournament.activationStartDateTime,
+    });
+    const { tournamentReward, filteredGameProviders, localeInfo } = useTournamentsListItemData();
+    const isEnded = new Date(tournament.activationEndDateTime) < now;
+    const [seeDetails, setSeeDetails] = useState(false);
+    const numberOfWinnersText = useMemo(() => `${tournament.winnersCount} winner${Number(tournament.winnersCount) > 1 ? 's' : ''}`, [tournament.winnersCount]);
+    return (_jsxs("div", { className: "w-full shrink-0 overflow-hidden rounded-2xl", children: [_jsxs("div", { className: twMerge('relative w-full flex-1 gap-4 rounded-t-[10px] p-4 lg:gap-10 lg:p-6', variation.background), children: [_jsx(Image, { src: variation.bgImage, alt: "treasure chest background", className: "absolute top-0 right-0 hidden h-full w-[720px] rounded-t-[10px] object-cover opacity-20 mix-blend-luminosity [mask-image:linear-gradient(to_right,transparent,black)] lg:block", priority: true, loading: "eager", fetchPriority: "high", unoptimized: true }), _jsx("div", { className: "relative z-1 flex w-full flex-col", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsx("div", { className: "relative flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col lg:flex-row", children: [_jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: twMerge('flex h-fit w-fit items-center justify-center gap-1 rounded-[8px] border-[1px] bg-[#EFF8FF] px-[10px] py-1 text-xs lg:text-sm', variation.multiplierBadgeColor, variation.multiplierBadgeBorderColor, variation.darkMultiplierBadgeColor, variation.darkMultiplierBadgeBorderColor, variation.darkMultiplierBg), children: [_jsx(Award01Icon, { className: "size-4" }), _jsx("span", { children: "Multiplier" })] }), _jsx("div", { className: "w-1/2 text-left font-bold text-lg lg:w-[68%] lg:text-[32px]", children: tournament.name }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: twMerge(variation.poolBg, variation.textColor, 'flex w-fit rounded-lg px-2 font-semibold text-[26px] lg:text-[36px]'), children: formatNumber(tournamentReward, {
+                                                                        currency: localeInfo.currency.code,
+                                                                        minDecimalPlaces: 2,
+                                                                        maxDecimalPlaces: 2,
+                                                                    }) }), _jsx("div", { className: twMerge(variation.poolBg, variation.textColor, 'mt-[6px] flex w-fit rounded-lg px-2 py-1 font-bold text-base lg:text-2xl'), children: numberOfWinnersText })] })] }), _jsxs("div", { className: "flex flex-col items-center justify-between", children: [_jsx("div", { className: twMerge('relative my-4 h-[129px] w-full overflow-hidden rounded-lg lg:hidden', variation.background), children: _jsx(Image, { src: variation.bgImage, alt: "image", className: "h-full w-full object-cover mix-blend-luminosity", priority: false, loading: "lazy", unoptimized: true }) }), _jsxs("div", { className: "flex w-full 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'), children: [_jsx("span", { className: "font-semibold", children: "Ended" }), _jsx("span", { className: twMerge('text-[9px] text-text-secondary-700'), 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'), children: "Launching Soon" })), !isEnded && (_jsx("div", { className: "flex h-fit w-full gap-2", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge(variation.poolBg, variation.textColor, variation.timeBorderColor, 'flex h-fit flex-1 flex-col items-center rounded-lg border-[1px] py-3 lg:w-[59px] lg:py-[6px]'), children: [_jsx("span", { className: "font-semibold text-lg lg:text-2xl", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-2xs lg:text-xs", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex shrink-0 flex-col justify-center gap-1.5 px-1", 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: "mt-2xl w-fit", children: _jsx("div", { className: "flex w-full", children: _jsxs("div", { className: "flex h-full flex-row-reverse items-center justify-start lg:flex-col", children: [_jsx(Image, { src: coins, alt: "coins", className: "w-[179.2px] lg:w-[132.26px]", unoptimized: true }), _jsxs("div", { className: "text-start lg:text-center", children: [_jsx("p", { className: "mt-1 font-semibold text-[16px] leading-6", children: "No one has won big yet" }), _jsx("p", { className: "mt-1 text-start text-xs leading-[1.125rem] lg:text-center", children: "You could be the first to win the tournament!" })] })] }) }) })] })] }) }) }) }) }) })] }), _jsxs("div", { className: "relative flex w-full flex-1 flex-col items-center justify-between bg-white px-4 py-3.5 text-[#475467] dark:bg-[#161B26] dark:text-[#94969C]", children: [_jsxs("div", { className: "flex w-full justify-between", children: [_jsxs("button", { onClick: () => setSeeDetails((v) => !v), type: "button", className: "flex items-center gap-1 font-medium text-sm", children: ["See details", ' ', seeDetails ? (_jsx(ChevronUpIcon, { className: "h-5" })) : (_jsx(ChevronDownIcon, { className: "h-5" }))] }), _jsx("button", { type: "button", className: "inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-[#EAAA08] bg-white px-4 py-2.5 font-semibold text-[#A15C07] text-sm shadow-xs transition-colors duration-200 hover:border-[#FDE272] hover:bg-[#FEFBE8] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-[#EAAA08] disabled:hover:bg-white dark:border-[#333741] dark:bg-[#161B26] dark:text-[#CECFD2] dark:disabled:hover:border-[#333741] dark:disabled:hover:bg-[#161B26]", children: "Tournament Rules" })] }), seeDetails && (_jsxs("div", { className: "mt-2 w-full", children: [_jsx("div", { children: _jsx("div", { className: "mt-[6px] flex justify-between text-[#344054] text-lg dark:text-[#CECFD2]", children: _jsxs("div", { className: "flex items-center gap-3 font-semibold", children: [_jsx(Image, { src: star, alt: "3d star", className: "size-6", unoptimized: true }), "Ranking"] }) }) }), _jsx("div", { children: _jsxs(Tabs.Root, { defaultValue: "current", className: "mt-4", children: [_jsxs(Tabs.List, { className: "flex gap-1 rounded-xl border border-[#EAECF0] bg-[#F9FAFB] p-1 font-semibold text-[#667085] text-sm leading-[0.01em] lg:w-fit dark:border-[#1F242F] dark:bg-[#0C111D] dark:text-[#757278]", children: [_jsx(Tabs.Trigger, { value: "current", className: "ui-selected:text-[#475467] ui-selected:dark:text-[#94969C]", children: "Current" }), _jsx(Tabs.Trigger, { value: "previous", className: "ui-selected:text-[#475467] ui-selected:dark:text-[#94969C]", children: "Previous" }), _jsx(Tabs.Indicator, { className: "bg-[white] dark:bg-[#161B26]" })] }), _jsx(Tabs.Content, { value: "current", children: _jsx(TournamentTable, { winnersCount: Number(tournament.winnersCount), rewardSettings: tournament.rewardSettings, leaderboard: tournament.currentLeaderboard
+                                                    .edges }) }), _jsx(Tabs.Content, { value: "previous", children: _jsx(TournamentTable, { winnersCount: Number(tournament.winnersCount), rewardSettings: tournament.rewardSettings, leaderboard: tournament.currentLeaderboard
+                                                    .edges }) })] }) }), _jsx("div", { className: "w-full", children: Boolean(filteredGameProviders.length) && (_jsx(TournamentsListItemGameProviders, { gameProviders: filteredGameProviders })) })] }))] })] }));
+}

package/dist/lib/components/Tournaments/TournamentsList/TournamentsListItemDesktop.d.ts

@@ -0,0 +1,35 @@
+import type { CSSProperties } from 'react';
+interface ClassNameEntries {
+    outerRoot?: string;
+    root?: string;
+    badgeRoot?: string;
+    badgeLabel?: string;
+    badgeIcon?: string;
+    countdownHeading?: string;
+    countdownSubheading?: string;
+    countdownLabel?: string;
+    countdownTime?: string;
+    countdownSeparator?: string;
+}
+interface StyleEntries {
+    outerRoot?: CSSProperties;
+    root?: CSSProperties;
+    badgeRoot?: CSSProperties;
+    badgeLabel?: CSSProperties;
+    badgeIcon?: CSSProperties;
+    countdownHeading?: CSSProperties;
+    countdownSubheading?: CSSProperties;
+    countdownLabel?: CSSProperties;
+    countdownTime?: CSSProperties;
+    countdownSeparator?: CSSProperties;
+}
+interface TournamentsListItemDesktopProps {
+    style?: CSSProperties | StyleEntries;
+    className?: string | ClassNameEntries;
+    startStyle?: {
+        fillStarColor: string;
+        numberColor: string;
+    };
+}
+export declare function TournamentsListItemDesktop({ style, className, startStyle, }: TournamentsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/Tournaments/TournamentsList/TournamentsListItemDesktop.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns';
+import Autoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
+import Image from 'next/image';
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Award01Icon } from '../../../icons/Award01Icon.js';
+import { StarIcon } from '../../../icons/StarIcon.js';
+import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
+import { User01Icon } from '../../../icons/User01Icon.js';
+import firstPlace from '../../../images/first-place.png';
+import trophyTwo from '../../../images/trophy-two.png';
+import trophy from '../../../images/trophy.png';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { getOrdinal } from '../../../utils/getOrdinal.js';
+import { isStyleEntries } from '../../../utils/isStyleEntries.js';
+import { maskFirstLast } from '../../../utils/mask.js';
+import css from './TournamentItem.module.css';
+import { useTournamentsListItemContext } from './TournamentsListContext.js';
+import { TournamentsListItemGameProviders } from './TournamentsListItemGameProviders.js';
+import { TournamentsListItemRules } from './TournamentsListItemRules.js';
+import { useTournamentsListItemData } from './useTournamentListItemData.js';
+import { useTournamentTimer } from './useTournamentTimer.js';
+export function TournamentsListItemDesktop({ style, className, startStyle, }) {
+    const tournament = useTournamentsListItemContext();
+    const { isLaunchStarts, timeParts, now } = useTournamentTimer({
+        activationEndDateTime: tournament.activationEndDateTime,
+        activationStartDateTime: tournament.activationStartDateTime,
+    });
+    const { tournamentReward, filteredGameProviders, localeInfo } = useTournamentsListItemData();
+    const styles = isStyleEntries(style, [
+        'root',
+        'badgeRoot',
+        'badgeLabel',
+        'badgeIcon',
+    ])
+        ? style
+        : { root: style };
+    const classNames = isString(className)
+        ? { root: className }
+        : (className ?? {});
+    const isEnded = new Date(tournament.activationEndDateTime) < now;
+    const [emblaRef] = useEmblaCarousel({
+        slidesToScroll: 'auto',
+        loop: true,
+        duration: 0,
+    }, [Autoplay()]);
+    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, {
+                                                                currency: localeInfo.currency.code,
+                                                                minDecimalPlaces: 2,
+                                                                maxDecimalPlaces: 2,
+                                                            }) })] }), _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) => {
+                                                                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));
+                                                            }) }))] }), _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) => {
+                                                    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 || '', {
+                                                                                midLength: 4,
+                                                                            }) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.amount, {
+                                                                                currency: localeInfo.currency.code,
+                                                                                minDecimalPlaces: 2,
+                                                                                maxDecimalPlaces: 2,
+                                                                            }) })] })] }) }, tournament.id));
+                                                }) }) })) : !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, {
+                                                                currency: localeInfo.currency.code,
+                                                                minDecimalPlaces: 2,
+                                                                maxDecimalPlaces: 2,
+                                                            })] }), _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
+                                                    ? [
+                                                        ...tournament.currentLeaderboard.edges,
+                                                        ...Array(Math.max(0, 10 - tournament.currentLeaderboard.edges.length)).fill(''),
+                                                    ].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
+                                                                                ? starTierStyles[i]?.fillStarColor
+                                                                                : startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 3
+                                                                                ? starTierStyles[i]?.numberColor
+                                                                                : startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: tournament.node?.username
+                                                                    ? maskFirstLast(tournament.node.username, {
+                                                                        midLength: 4,
+                                                                    })
+                                                                    : '-' }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: tournament.node?.multiplier
+                                                                    ? `${tournament.node.multiplier}x`
+                                                                    : '-' }), tournament.node?.prize ? (_jsx("td", { className: "h-12 border-border-secondary border-t-1 text-brand-400", children: formatNumber(tournament.node.prize, {
+                                                                    currency: localeInfo.currency.code,
+                                                                    minDecimalPlaces: 2,
+                                                                    maxDecimalPlaces: 2,
+                                                                }) })) : (_jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" }))] }, i)))
+                                                    : 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
+                                                                                ? starTierStyles[i]?.fillStarColor
+                                                                                : startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 3
+                                                                                ? starTierStyles[i]?.numberColor
+                                                                                : 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 }))] }));
+}
+const starTierStyles = [
+    {
+        fillStarColor: 'fill-[#fac515]',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        fillStarColor: 'fill-[#cecfd2]',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        fillStarColor: 'fill-[#a15c07]',
+        numberColor: 'text-bg-primary',
+    },
+];

package/dist/lib/components/Tournaments/TournamentsList/TournamentsListItemGameProviders.d.ts

@@ -0,0 +1,5 @@
+import type { GameProviderData } from '../../../types';
+export interface TournamentsListItemGameProvidersProps {
+    gameProviders: GameProviderData[];
+}
+export declare function TournamentsListItemGameProviders({ gameProviders, }: TournamentsListItemGameProvidersProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Tournaments/TournamentsList/TournamentsListItemGameProviders.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from 'embla-carousel-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../../icons/ArrowRightIcon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { callIfFn } from '../../../utils/callIfFn.js';
+import { useTournamentsListPropsContext } from './TournamentsListContext.js';
+export function TournamentsListItemGameProviders({ gameProviders, }) {
+    const tournamentsProps = useTournamentsListPropsContext();
+    const viewGamesUrl = (data) => {
+        return tournamentsProps.viewGamesUrl
+            ? callIfFn(tournamentsProps.viewGamesUrl, data)
+                .replace(':id', data.id)
+                .replace(':slug', data.slug)
+            : `/providers/${data.slug}`;
+    };
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    });
+    const scrollPrev = useCallback(() => {
+        if (emblaApi)
+            emblaApi.scrollPrev();
+    }, [emblaApi]);
+    const scrollNext = useCallback(() => {
+        if (emblaApi)
+            emblaApi.scrollNext();
+    }, [emblaApi]);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const onSelect = useCallback(() => {
+        if (!emblaApi)
+            return;
+        setCanScrollPrev(emblaApi.canScrollPrev());
+        setCanScrollNext(emblaApi.canScrollNext());
+    }, [emblaApi]);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect();
+        emblaApi.on('select', onSelect);
+        emblaApi.on('reInit', onSelect);
+    }, [emblaApi, onSelect]);
+    return (_jsxs("div", { className: "p-4 pb-8", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: "Tournament Game Providers" }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] }), _jsx("div", { className: "relative mt-3 overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: "min-w-27.5 rounded-md bg-gray-800", children: _jsx(Image, { src: provider.logo, alt: "provider", className: "size-full", width: 300, height: 150 }) }, provider.slug))) }) })] }));
+}

package/dist/lib/components/Tournaments/TournamentsList/TournamentsListItemMobile.d.ts

@@ -0,0 +1,37 @@
+import { type CSSProperties } from 'react';
+interface ClassNameEntries {
+    outerRoot?: string;
+    root?: string;
+    badgeRoot?: string;
+    badgeLabel?: string;
+    badgeIcon?: string;
+    countdownHeading?: string;
+    countdownSubheading?: string;
+    countdownLabel?: string;
+    countdownTime?: string;
+    countdownSeparator?: string;
+    leaderboardSection?: string;
+}
+interface StyleEntries {
+    outerRoot?: CSSProperties;
+    root?: CSSProperties;
+    badgeRoot?: CSSProperties;
+    badgeLabel?: CSSProperties;
+    badgeIcon?: CSSProperties;
+    countdownHeading?: CSSProperties;
+    countdownSubheading?: CSSProperties;
+    countdownLabel?: CSSProperties;
+    countdownTime?: CSSProperties;
+    countdownSeparator?: CSSProperties;
+    leaderboardSection?: CSSProperties;
+}
+interface TournamentsListItemMobileProps {
+    style?: CSSProperties | StyleEntries;
+    className?: string | ClassNameEntries;
+    startStyle?: {
+        fillStarColor: string;
+        numberColor: string;
+    };
+}
+export declare function TournamentsListItemMobile({ style, className, startStyle, }: TournamentsListItemMobileProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/Tournaments/TournamentsList/TournamentsListItemMobile.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns';
+import Autoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
+import Image from 'next/image';
+import React, { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { ArrowNarrowDownIcon } from '../../../icons/ArrowNarrowDownIcon.js';
+import { ArrowNarrowUpIcon } from '../../../icons/ArrowNarrowUpIcon.js';
+import { Award01Icon } from '../../../icons/Award01Icon.js';
+import { StarIcon } from '../../../icons/StarIcon.js';
+import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
+import { User01Icon } from '../../../icons/User01Icon.js';
+import firstPlace from '../../../images/first-place.png';
+import trophy from '../../../images/trophy.png';
+import { Button } from '../../../ui/Button/index.js';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { getOrdinal } from '../../../utils/getOrdinal.js';
+import { isStyleEntries } from '../../../utils/isStyleEntries.js';
+import { maskFirstLast } from '../../../utils/mask.js';
+import { useTournamentsListItemContext } from './TournamentsListContext.js';
+import { TournamentsListItemGameProviders } from './TournamentsListItemGameProviders.js';
+import { TournamentsListItemRules } from './TournamentsListItemRules.js';
+import { useTournamentsListItemData } from './useTournamentListItemData.js';
+import { useTournamentTimer } from './useTournamentTimer.js';
+export function TournamentsListItemMobile({ style, className, startStyle, }) {
+    const tournament = useTournamentsListItemContext();
+    const { isLaunchStarts, timeParts, now } = useTournamentTimer({
+        activationEndDateTime: tournament.activationEndDateTime,
+        activationStartDateTime: tournament.activationStartDateTime,
+    });
+    const [isDetailsVisible, setIsDetailsVisible] = useState(false);
+    const { tournamentReward, filteredGameProviders, localeInfo } = useTournamentsListItemData();
+    const styles = isStyleEntries(style, [
+        'root',
+        'badgeRoot',
+        'badgeLabel',
+        'badgeIcon',
+    ])
+        ? style
+        : { root: style };
+    const classNames = isString(className)
+        ? { root: className }
+        : (className ?? {});
+    const isEnded = new Date(tournament.activationEndDateTime) < now;
+    const [emblaRef] = useEmblaCarousel({
+        slidesToScroll: 'auto',
+        loop: true,
+        duration: 0,
+    }, [Autoplay()]);
+    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) => {
+                                                            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));
+                                                        }) }))] })] }), _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, {
+                                            currency: localeInfo.currency.code,
+                                            minDecimalPlaces: 2,
+                                            maxDecimalPlaces: 2,
+                                        }) })] }) }), _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) => {
+                                            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 || '', {
+                                                                        midLength: 4,
+                                                                    }) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.amount, {
+                                                                        currency: localeInfo.currency.code,
+                                                                        minDecimalPlaces: 2,
+                                                                        maxDecimalPlaces: 2,
+                                                                    }) })] })] }) }, tournament.id));
+                                        }) }) })) : !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, {
+                                                        currency: localeInfo.currency.code,
+                                                        minDecimalPlaces: 2,
+                                                        maxDecimalPlaces: 2,
+                                                    })] }), _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
+                                                        ? [
+                                                            ...tournament.currentLeaderboard.edges,
+                                                            ...Array(Math.max(0, 10 - tournament.currentLeaderboard.edges.length)).fill(''),
+                                                        ].map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-center text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary border-t-1", children: _jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', i < 3
+                                                                                    ? starTierStyles[i]?.fillStarColor
+                                                                                    : startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 3
+                                                                                    ? starTierStyles[i]?.numberColor
+                                                                                    : startStyle?.numberColor), children: i + 1 })] }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: tournament.node?.username
+                                                                        ? maskFirstLast(tournament.node.username, {
+                                                                            midLength: 4,
+                                                                        })
+                                                                        : '-' }), _jsx("td", { className: "h-12 border-border-secondary border-t-1", children: tournament.node?.multiplier
+                                                                        ? `${tournament.node.multiplier}x`
+                                                                        : '-' }), tournament.node?.prize ? (_jsx("td", { className: "h-12 border-border-secondary border-t-1 text-brand-400", children: formatNumber(tournament.node.prize, {
+                                                                        currency: localeInfo.currency.code,
+                                                                        minDecimalPlaces: 2,
+                                                                        maxDecimalPlaces: 2,
+                                                                    }) })) : (_jsx("td", { className: "h-12 border-border-secondary border-t-1", children: "-" }))] }, i)))
+                                                        : 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 < 3
+                                                                                    ? starTierStyles[i]?.fillStarColor
+                                                                                    : startStyle?.fillStarColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center font-bold text-2xs', i < 3
+                                                                                    ? starTierStyles[i]?.numberColor
+                                                                                    : 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" })] }) }) })] }))] }) }));
+}
+const starTierStyles = [
+    {
+        fillStarColor: 'fill-[#fac515]',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        fillStarColor: 'fill-[#cecfd2]',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        fillStarColor: 'fill-[#a15c07]',
+        numberColor: 'text-bg-primary',
+    },
+];

package/dist/lib/components/Tournaments/TournamentsList/TournamentsListItemRules.d.ts

@@ -0,0 +1,2 @@
+import type { PropsWithChildren } from 'react';
+export declare function TournamentsListItemRules(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Tournaments/TournamentsList/TournamentsListItemRules.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { Flag06Icon } from '../../../icons/Flag06Icon.js';
+import { XIcon } from '../../../icons/XIcon.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
+import { Portal } from '../../../ui/Portal/index.js';
+import { Prose } from '../../../ui/Prose/index.js';
+import { useTournamentsListItemContext } from './TournamentsListContext.js';
+export function TournamentsListItemRules(props) {
+    const tournament = useTournamentsListItemContext();
+    return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? (_jsx("button", { type: "button", className: "flex font-semibold text-button-tertiary-fg text-sm", children: "Tournament Rules" })) }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "mx-auto h-full w-full items-start overflow-y-auto lg:h-auto lg:w-[640px] lg:rounded-xl", children: [_jsxs("div", { className: "p-3xl", children: [_jsxs("div", { className: "mb-3 flex justify-between", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg border border-border-primary bg-bg-tertiary", children: _jsx(Flag06Icon, { className: "size-full p-3 text-text-tertiary-600" }) }), _jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: "Tournament Rules" }), _jsx("div", { className: "mt-1 text-sm text-text-tertiary-600", children: "Terms and Conditions" })] }), _jsx("div", { className: "border-gray-800 border-t-1 pb-3", children: _jsx(Prose, { dangerouslySetInnerHTML: {
+                                            __html: tournament.description,
+                                        }, className: twMerge('px-3xl py-3') }) })] }) })] })] }));
+}

package/dist/lib/components/Tournaments/TournamentsList/useTournamentListItemData.d.ts

@@ -0,0 +1,10 @@
+export declare function useTournamentsListItemData(): {
+    timeParts: {
+        label: string;
+        value: number;
+    }[];
+    tournamentReward: number;
+    prizeAmountsByRank: number[];
+    filteredGameProviders: import("../../../types").GameProviderData[];
+    localeInfo: import("../../../utils/countries/types").LocaleInfo;
+};

package/dist/lib/components/Tournaments/TournamentsList/useTournamentListItemData.js

@@ -0,0 +1,71 @@
+import { pick } from 'lodash-es';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
+import { GAME_PROVIDER_DATA } from '../../../constants/index.js';
+import { useTournamentsListItemContext, useTournamentsListPropsContext, } from './TournamentsListContext.js';
+export function useTournamentsListItemData() {
+    const tournamentsListProps = useTournamentsListPropsContext();
+    const tournament = useTournamentsListItemContext();
+    const gameProviders = tournamentsListProps.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
+    const localeInfo = useLocaleInfo();
+    const [timeRemaining, setTimeRemaining] = useState({
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+        isPast: false,
+    });
+    const activationEndDateTime = useMemo(() => new Date(tournament.activationEndDateTime), [tournament.activationEndDateTime]);
+    const calculateRemainingTime = useCallback(() => {
+        const now = new Date();
+        const diffMs = activationEndDateTime.getTime() - now.getTime();
+        if (diffMs <= 0) {
+            setTimeRemaining({
+                days: 0,
+                hours: 0,
+                minutes: 0,
+                seconds: 0,
+                isPast: true,
+            });
+            return;
+        }
+        const diffSeconds = Math.floor(diffMs / 1000);
+        const days = Math.floor(diffSeconds / (3600 * 24));
+        const hours = Math.floor((diffSeconds % (3600 * 24)) / 3600);
+        const minutes = Math.floor((diffSeconds % 3600) / 60);
+        const seconds = diffSeconds % 60;
+        const updated = pick({ days, hours, minutes, seconds, isPast: false }, [
+            'days',
+            'hours',
+            'minutes',
+            'seconds',
+            'isPast',
+        ]);
+        setTimeRemaining(updated);
+    }, [activationEndDateTime]);
+    useEffect(() => {
+        calculateRemainingTime();
+        const interval = setInterval(calculateRemainingTime, 1000); // Update every second
+        return () => clearInterval(interval);
+    }, [calculateRemainingTime]);
+    const timeParts = [
+        { label: 'Day', value: timeRemaining.days },
+        { label: 'Hour', value: timeRemaining.hours },
+        { label: 'Min', value: timeRemaining.minutes },
+        { label: 'Sec', value: timeRemaining.seconds },
+    ];
+    const tournamentReward = Object.values(tournament.rewardSettings)
+        .map(Number)
+        .reduce((sum, val) => sum + val, 0);
+    const prizeAmountsByRank = Object.values(tournament.rewardSettings).map(Number);
+    const filteredGameProviders = gameProviders.filter((provider) => {
+        return tournament.enabledGameProviders.includes(provider.id);
+    });
+    return {
+        timeParts,
+        tournamentReward,
+        prizeAmountsByRank,
+        filteredGameProviders,
+        localeInfo,
+    };
+}

package/dist/lib/components/Tournaments/TournamentsList/useTournamentTimer.d.ts

@@ -0,0 +1,13 @@
+type Tournament = {
+    activationStartDateTime: string;
+    activationEndDateTime: string;
+};
+export declare function useTournamentTimer(tournament: Tournament): {
+    now: Date;
+    isLaunchStarts: boolean;
+    timeParts: {
+        label: string;
+        value: string;
+    }[];
+};
+export {};