@opexa/portal-components 0.0.957 → 0.0.959

package/dist/lib/components/TermsOfUse/TermsOfUseV3.lazy.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import { useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { ScrollToBottomIcon } from '../../icons/ScrollToBottomIcon.js';
+import { ScrollToTopIcon } from '../../icons/ScrollToTopIcon.js';
+import decorativebackground from '../../images/decorative-patern.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function TermsOfUseV3({ logo, content }) {
+    const scrollableContentRef = useRef(null);
+    const [hasReachedBottom, setHasReachedBottom] = useState(false);
+    const [isAtBottom, setIsAtBottom] = useState(false);
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        signUp: ctx.signUp,
+        disclaimer: ctx.disclaimer,
+        termsOfUse: ctx.termsOfUse,
+    })));
+    useEffect(() => {
+        if (scrollableContentRef.current) {
+            const { scrollHeight, clientHeight } = scrollableContentRef.current;
+            const isScrollable = scrollHeight > clientHeight;
+            const atBottom = scrollHeight - scrollableContentRef.current.scrollTop <=
+                clientHeight + 1;
+            setIsAtBottom(!isScrollable || atBottom);
+            setHasReachedBottom(!isScrollable || atBottom);
+        }
+    }, []);
+    return (_jsx(Dialog.Root, { open: globalStore.termsOfUse.open, onOpenChange: (details) => {
+            globalStore.termsOfUse.setOpen(details.open);
+            if (!details.open)
+                globalStore.termsOfUse.setAccepted(true);
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
+            if (globalStore.termsOfUse.next === 'SIGN_IN') {
+                globalStore.signIn.setOpen(true);
+            }
+            if (globalStore.termsOfUse.next === 'SIGN_UP') {
+                globalStore.signUp.setOpen(true);
+            }
+            if (globalStore.termsOfUse.next === 'DISCLAIMER') {
+                globalStore.disclaimer.setOpen(true);
+            }
+            globalStore.termsOfUse.setNext(null);
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-hidden bg-bg-primary p-4 sm:p-6 lg:mx-auto lg:max-h-[90vh] lg:w-[500px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: decorativebackground, alt: "", width: 200, height: 200, className: "absolute top-safe-area-inset-top left-0" }), _jsx(Image, { src: logo, alt: "", width: 250, height: 150, className: "h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(Dialog.Title, { className: "my-3 text-center font-semibold text-brand-400 sm:mt-6 sm:text-lg lg:my-xl lg:text-2xl", children: "Terms of Use" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col rounded-md bg-bg-primary-alt px-2 py-2", children: _jsxs("div", { ref: scrollableContentRef, className: "mt-2 scrollbar:h-2 scrollbar:w-2 flex-1 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-track:rounded-full bg-bg-primary-alt scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-bg-primary p-3 pr-4 sm:mt-xs sm:p-4", onScroll: (e) => {
+                                                const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+                                                if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
+                                                    setHasReachedBottom(true);
+                                                }
+                                            }, children: [_jsx(Dialog.Description, { className: "text-xs leading-relaxed sm:text-sm sm:leading-2xl", children: content }), _jsx(Button, { type: "button", className: twMerge('absolute right-6 bottom-7 z-10 size-10 rounded-lg transition-colors duration-75 ease-in-out sm:right-6 sm:bottom-6 lg:right-8 lg:bottom-8', isAtBottom
+                                                        ? 'border border-[#CECFD2] bg-bg-secondary'
+                                                        : 'bg-bg-brand-secondary'), onClick: () => {
+                                                        if (scrollableContentRef.current) {
+                                                            scrollableContentRef.current.scrollTo({
+                                                                top: isAtBottom
+                                                                    ? 0
+                                                                    : scrollableContentRef.current.scrollHeight,
+                                                                behavior: 'smooth',
+                                                            });
+                                                        }
+                                                    }, children: isAtBottom ? _jsx(ScrollToTopIcon, {}) : _jsx(ScrollToBottomIcon, {}) })] }) })] }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { type: "button", className: twMerge('mt-4 flex-1 py-2 text-sm sm:py-2.5 sm:text-base', hasReachedBottom
+                                        ? 'bg-bg-brand-secondary'
+                                        : 'bg-bg-disabled text-text-disabled'), onClick: () => {
+                                        api.setOpen(false);
+                                    }, disabled: !hasReachedBottom, children: "Accept" })) })] }) })] }) }));
+}

package/dist/lib/components/TermsOfUse/index.d.ts

@@ -0,0 +1 @@
+export * from './TermsOfUse';

package/dist/lib/components/TermsOfUse/index.js

@@ -0,0 +1 @@
+export * from './TermsOfUse.js';

package/dist/lib/components/TopProgress/TopProgressBar.client.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from 'react';
+import type { TopProgressBar } from './TopProgressBar';
+export declare function TopProgressBarClient(props: ComponentProps<typeof TopProgressBar>): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/TopProgress/TopProgressBar.client.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+const ClientTopProgressBar = dynamic(() => import('./TopProgressBar.js').then((mod) => mod.TopProgressBar), {
+    ssr: false,
+});
+export function TopProgressBarClient(props) {
+    return _jsx(ClientTopProgressBar, { ...props });
+}

package/dist/lib/components/TopProgress/TopProgressBar.d.ts

@@ -0,0 +1,6 @@
+type TopProgressBarPreset = 'Sunset' | 'Poppy' | 'Rosebud' | 'Sunshine' | 'Gold' | 'Twilight' | 'Powder' | 'Holly' | 'Northern Lights' | 'Raw Green' | 'Lime' | 'Nemesia' | 'Snowflake' | 'Blue Bird' | 'Blueprint' | 'Salvia' | 'Heartsease' | 'Amaranthus' | 'Candy' | 'Verbena';
+export declare const TopProgressBar: ({ preset, customPreset, }: {
+    preset?: TopProgressBarPreset;
+    customPreset?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/TopProgress/TopProgressBar.js

@@ -0,0 +1,149 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+// CSS gradient presets (inline styles), approximate Tailwind palette colors
+// --> check presets here <3 https://www.creative-tim.com/twcomponents/gradient-generator
+const PRESET_BG = {
+    Sunset: 'linear-gradient(90deg, #ef4444 0%, #f97316 100%)',
+    Poppy: 'linear-gradient(90deg, #fb7185 0%, #ef4444 100%)',
+    Rosebud: 'linear-gradient(90deg, #ec4899 0%, #f43f5e 100%)',
+    Sunshine: 'linear-gradient(90deg, #fde68a 0%, #facc15 100%)',
+    Gold: 'linear-gradient(90deg, #fde68a 0%, #eab308 100%)',
+    Twilight: 'linear-gradient(90deg, #f59e0b 0%, #ec4899 100%)',
+    Powder: 'linear-gradient(90deg, #ddd6fe 0%, #fbcfe8 100%)',
+    Holly: 'linear-gradient(90deg, #bfdbfe 0%, #a5f3fc 100%)',
+    'Northern Lights': 'linear-gradient(90deg, #99f6e4 0%, #14b8a6 100%)',
+    'Raw Green': 'linear-gradient(90deg, #a3e635 0%, #84cc16 100%)',
+    Lime: 'linear-gradient(90deg, #2dd4bf 0%, #fef08a 100%)',
+    Nemesia: 'linear-gradient(90deg, #34d399 0%, #22d3ee 100%)',
+    Snowflake: 'linear-gradient(90deg, #d946ef 0%, #22d3ee 100%)',
+    'Blue Bird': 'linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%)',
+    Blueprint: 'linear-gradient(90deg, #6366f1 0%, #3b82f6 100%)',
+    Salvia: 'linear-gradient(90deg, #2563eb 0%, #7c3aed 100%)',
+    Heartsease: 'linear-gradient(90deg, #c026d3 0%, #db2777 100%)',
+    Amaranthus: 'linear-gradient(90deg, #c026d3 0%, #9333ea 100%)',
+    Candy: 'linear-gradient(90deg, #d946ef 0%, #ec4899 100%)',
+    Verbena: 'linear-gradient(90deg, #8b5cf6 0%, #a855f7 100%)',
+};
+export const TopProgressBar = ({ preset = 'Gold', customPreset, }) => {
+    const [progress, setProgress] = useState(0);
+    const [visible, setVisible] = useState(false);
+    const incrementTimerRef = useRef(null);
+    const hideTimerRef = useRef(null);
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const currentUrl = useMemo(() => {
+        const sp = searchParams?.toString();
+        return `${pathname ?? ''}${sp ? `?${sp}` : ''}`;
+    }, [pathname, searchParams]);
+    const clearTimers = useCallback(() => {
+        if (incrementTimerRef.current) {
+            clearInterval(incrementTimerRef.current);
+            incrementTimerRef.current = null;
+        }
+        if (hideTimerRef.current) {
+            clearTimeout(hideTimerRef.current);
+            hideTimerRef.current = null;
+        }
+    }, []);
+    const startProgress = useCallback(() => {
+        clearTimers();
+        setVisible(true);
+        setProgress(8);
+        incrementTimerRef.current = window.setInterval(() => {
+            setProgress((prev) => {
+                if (prev >= 90)
+                    return prev;
+                const delta = Math.max(1, Math.min(10, 10 * Math.random()));
+                return Math.min(prev + delta, 90);
+            });
+        }, 250);
+    }, [clearTimers]);
+    const finishProgress = useCallback(() => {
+        setProgress(100);
+        if (incrementTimerRef.current) {
+            clearInterval(incrementTimerRef.current);
+            incrementTimerRef.current = null;
+        }
+        if (hideTimerRef.current) {
+            window.clearTimeout(hideTimerRef.current);
+        }
+        hideTimerRef.current = window.setTimeout(() => {
+            setVisible(false);
+            // Reset for next time after fade-out transition
+            hideTimerRef.current = window.setTimeout(() => setProgress(0), 200);
+        }, 150);
+    }, []);
+    // Trigger progress completion when URL changes
+    const previousUrl = useRef('');
+    useEffect(() => {
+        if (previousUrl.current !== currentUrl) {
+            previousUrl.current = currentUrl;
+            finishProgress();
+        }
+    }, [currentUrl, finishProgress]);
+    useEffect(() => {
+        const handleAnchorClick = (event) => {
+            const target = event.currentTarget;
+            if (!target)
+                return;
+            const href = target.getAttribute('href');
+            if (!href)
+                return;
+            // Don't start progress for links that open in new tabs
+            const targetBlank = target.getAttribute('target') === '_blank';
+            if (targetBlank)
+                return;
+            const targetUrl = new URL(href, window.location.origin);
+            const current = new URL(window.location.href);
+            const isDifferent = targetUrl.origin !== current.origin ||
+                targetUrl.pathname !== current.pathname ||
+                targetUrl.search !== current.search;
+            if (isDifferent) {
+                startProgress();
+            }
+        };
+        const attachListeners = () => {
+            const anchors = document.querySelectorAll('a[href]');
+            anchors.forEach((a) => {
+                a.removeEventListener('click', handleAnchorClick);
+                a.addEventListener('click', handleAnchorClick);
+            });
+        };
+        const observer = new MutationObserver(() => attachListeners());
+        observer.observe(document, { childList: true, subtree: true });
+        attachListeners();
+        const originalPush = window.history.pushState;
+        const originalReplace = window.history.replaceState;
+        window.history.pushState = new Proxy(originalPush, {
+            apply: (target, thisArg, argArray) => {
+                const result = Reflect.apply(target, thisArg, argArray);
+                requestAnimationFrame(() => finishProgress());
+                return result;
+            },
+        });
+        window.history.replaceState = new Proxy(originalReplace, {
+            apply: (target, thisArg, argArray) => {
+                const result = Reflect.apply(target, thisArg, argArray);
+                requestAnimationFrame(() => finishProgress());
+                return result;
+            },
+        });
+        // Cleanup
+        return () => {
+            observer.disconnect();
+            const anchors = document.querySelectorAll('a[href]');
+            anchors.forEach((a) => a.removeEventListener('click', handleAnchorClick));
+            window.history.pushState = originalPush;
+            window.history.replaceState = originalReplace;
+            clearTimers();
+        };
+    }, [clearTimers, finishProgress, startProgress]);
+    return (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none fixed top-safe-area-inset-top right-0 left-0 z-[9999]", children: _jsx("div", { className: twMerge('h-[3px] transition-[width,opacity] duration-200 ease-out', visible ? 'opacity-100' : 'opacity-0'), style: {
+                width: `${progress}%`,
+                background: customPreset ?? PRESET_BG[preset],
+                boxShadow: '0 0 10px rgba(255, 255, 255, 0.6)',
+            } }) }));
+};

package/dist/lib/components/TopProgress/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TopProgressBar';
+export * from './TopProgressBar.client';

package/dist/lib/components/TopProgress/index.js

@@ -0,0 +1,2 @@
+export * from './TopProgressBar.js';
+export * from './TopProgressBar.client.js';

package/dist/lib/components/TopWins/TopWins.client.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export interface ClassNameEntries {
+    root?: string;
+    card?: string;
+    image?: string;
+    playerName?: string;
+    amount?: string;
+    multiplier?: string;
+}
+export interface TopWinsProps {
+    /** @default "Recent Big Wins" */
+    heading?: string | ReactNode;
+    className?: string | ClassNameEntries;
+}
+export declare function TopWins__client(props: TopWinsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/lib/components/TopWins/TopWins.client.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
+import Image from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useTopWinsQuery } from '../../client/hooks/useTopWinsQuery.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
+export function TopWins__client(props) {
+    const localeInfo = useLocaleInfo();
+    const topWinsQuery = useTopWinsQuery();
+    const topWins = topWinsQuery.data ?? [];
+    const [emblaRef] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    });
+    if (!topWins?.length)
+        return null;
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    return (_jsxs("div", { className: twMerge('w-full', classNames.root), children: [_jsx("div", { className: twMerge('mb-3 font-semibold text-lg md:mb-4'), children: props.heading ?? 'Recent Big Wins' }), _jsx("div", { ref: emblaRef, className: twMerge('relative lg:overflow-hidden'), children: _jsx("div", { className: twMerge('flex gap-sm lg:gap-md'), children: topWins.map((topWin) => (_jsxs("div", { className: twMerge('flex w-[calc((100%-(0.375rem*2))/3)] shrink-0 flex-col space-y-2 rounded-sm border border-border-primary bg-bg-tertiary p-2 text-center lg:w-[calc((100%-(0.5rem*5))/6)] xl:w-[calc((100%-(0.5rem*9))/10)]', classNames.card), children: [_jsx("div", { className: twMerge('mx-auto aspect-square w-full', classNames.image), children: topWin.game && (_jsx(Image, { src: getGameImageUrl({
+                                        id: topWin.game.id,
+                                        provider: topWin.game.provider,
+                                    }), alt: topWin.game.name, width: 120, height: 120, loading: "lazy", unoptimized: true, className: twMerge('size-full rounded-sm object-cover', classNames.image) })) }), _jsxs("div", { className: twMerge('space-y-0.5'), children: [_jsx("div", { className: twMerge('text-text-secondary-700 text-xs', classNames.playerName), children: topWin.member.name }), _jsx("div", { className: twMerge('break-words font-semibold text-sm text-text-primary-brand', classNames.amount), children: formatNumber(topWin.payout, {
+                                            currency: localeInfo.currency.code,
+                                            minDecimalPlaces: 2,
+                                        }) }), _jsxs("div", { className: twMerge('break-words text-text-secondary-700 text-xs', classNames.multiplier), children: [formatNumber(topWin.multiplier, {
+                                                minDecimalPlaces: 2,
+                                            }), "x"] })] })] }, topWin.id))) }) })] }));
+}

package/dist/lib/components/TopWins/TopWins.d.ts

@@ -0,0 +1,3 @@
+import { type TopWinsProps } from './TopWins.client';
+export declare function TopWins(props: TopWinsProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { TopWinsProps };

package/dist/lib/components/TopWins/TopWins.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchTopWinsQuery } from '../../server/utils/prefetchTopWinsQuery.js';
+import { TopWins__client } from './TopWins.client.js';
+export async function TopWins(props) {
+    await prefetchTopWinsQuery();
+    return _jsx(TopWins__client, { ...props });
+}

package/dist/lib/components/TopWins/index.d.ts

@@ -0,0 +1 @@
+export * from './TopWins';

package/dist/lib/components/TopWins/index.js

@@ -0,0 +1 @@
+export * from './TopWins.js';

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

@@ -0,0 +1,4 @@
+import { type TournamentsCarouselProps } from './TournamentsCarousel/TournamentsCarousel';
+import { type TournamentsListProps } from './TournamentsList/TournamentsList';
+export type TournamentsProps = TournamentsListProps | TournamentsCarouselProps;
+export declare function Tournaments(props: TournamentsProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchTournamentsQuery } from '../../server/utils/prefetchTournamentsQuery.js';
+import { TournamentsCarousel, } from './TournamentsCarousel/TournamentsCarousel.js';
+import { TournamentsList, } from './TournamentsList/TournamentsList.js';
+export async function Tournaments(props) {
+    await prefetchTournamentsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+        },
+    });
+    if (props.layout === 'list') {
+        return _jsx(TournamentsList, { ...props });
+    }
+    else {
+        return _jsx(TournamentsCarousel, { ...props });
+    }
+}

package/dist/lib/components/Tournaments/TournamentsCarousel/TournamentCarouselItem.Crazywin.d.ts

@@ -0,0 +1 @@
+export declare function TournamentsCarouselItemCrazywin(): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Tournaments/TournamentsCarousel/TournamentCarouselItem.Crazywin.js

@@ -0,0 +1,53 @@
+'use client';
+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 Image from 'next/image';
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
+import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
+import { Award01Icon } from '../../../icons/Award01Icon.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 { formatNumber } from '../../../utils/formatNumber.js';
+import { getOrdinal } from '../../../utils/getOrdinal.js';
+import { maskFirstLast } from '../../../utils/mask.js';
+import { useTournamentTimer } from '../TournamentsList/useTournamentTimer.js';
+import { useTournamentsCarouselItemContext } from './TournamentsCarouselContext.js';
+export function TournamentsCarouselItemCrazywin() {
+    const tournament = useTournamentsCarouselItemContext();
+    const localeInfo = useLocaleInfo();
+    const { isLaunchStarts, timeParts, now } = useTournamentTimer({
+        activationEndDateTime: tournament.activationEndDateTime,
+        activationStartDateTime: tournament.activationStartDateTime,
+    });
+    const tournamentReward = Object.values(tournament.rewardSettings)
+        .map(Number)
+        .reduce((sum, val) => sum + val, 0);
+    const isEnded = new Date(tournament.activationEndDateTime) < now;
+    const [emblaRef] = useEmblaCarousel({
+        slidesToScroll: 'auto',
+        loop: true,
+    }, [Autoplay()]);
+    return (_jsxs("div", { className: "flex w-full flex-col rounded-2xl bg-[linear-gradient(242deg,#1A534C_1.19%,#051B29_100%)] shadow-[0_0_20px_0_#88FFD7_inset]", children: [_jsx("div", { className: twMerge('relative flex flex-1 flex-col p-3 text-center lg:gap-6 lg:p-5'), children: _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: _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", { className: twMerge('mb-4.5 inline-flex items-center gap-1 rounded-full border border-[#085D3A] bg-[#053321] px-2.5 py-1 font-medium text-[#75E0A7] text-xs shadow-sm'), children: [_jsx(Award01Icon, { className: "size-3" }), _jsx("span", { 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-[linear-gradient(6deg,#215B5F_4.86%,#88FFD7_119.22%)] px-2 py-1.5 font-semibold text-[#09232E] 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-[linear-gradient(6deg,#215B5F_4.86%,#88FFD7_119.22%)] py-1 font-semibold text-[#09232E] text-sm'), children: "Launching Soon" })), !isEnded && (_jsx("div", { className: "flex h-fit gap-4.5", children: timeParts.map((part) => (_jsx(React.Fragment, { children: _jsxs("div", { className: twMerge('flex h-fit w-9 flex-col items-center rounded-[0.25rem] bg-[linear-gradient(6deg,#215B5F_4.86%,#88FFD7_119.22%)] pb-1.5 font-medium text-[#09232E] text-xl'), children: [_jsx("span", { className: "font-medium text-xl", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-3xs text-white", children: part.label })] }) }, part.label))) }))] })] }), _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "w-full", children: [_jsx("div", { className: "w-1/2 text-left font-bold text-lg lg:w-[68%] lg:text-2xl", children: tournament.name }), _jsx("div", { className: "mt-1.5 w-fit rounded-md bg-[linear-gradient(6deg,#215B5F_4.86%,#88FFD7_119.22%)] px-2 py-1 font-bold text-2xl text-[#09232E] lg:mt-2 lg:text-4xl", children: formatNumber(tournamentReward, {
+                                                                        currency: localeInfo.currency.code,
+                                                                        minDecimalPlaces: 2,
+                                                                        maxDecimalPlaces: 2,
+                                                                    }) })] }) })] }), _jsx("div", { className: "-bottom-16 -right-6 absolute z-1 hidden lg:block", children: _jsx(Image, { width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) })] }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "-top-10 absolute right-0 z-1 block lg:hidden", children: _jsx(Image, { src: trophy, alt: "trophy", width: 155, height: 155, className: "h-23 w-auto" }) }), tournament.topPayouts.length ? (_jsx("div", { ref: emblaRef, className: "mt-4 overflow-hidden rounded-lg bg-bg-primary", children: _jsx("div", { className: "relative flex", children: tournament.topPayouts.map((tournament, idx) => {
+                                                        return (_jsx("div", { className: "min-w-0 flex-[0_0_100%] bg-[linear-gradient(6deg,#215B5F_4.86%,#88FFD7_119.22%)] 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 border-4 border-[#0C0E12]", children: [_jsx("div", { className: twMerge('flex h-full w-full items-center justify-center rounded-full', 'bg-[#1A534C]'), children: _jsx(User01Icon, { className: "h-[34px] w-auto stroke-2 text-[#FFF] lg:h-[36px]" }) }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[#09232E] border-[1.5px] bg-[#32A294] font-bold text-2xs text-[#09232E]", children: getOrdinal(idx + 1) })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-[6px] border border-[#085D3A] bg-[#053321] py-0.5 pr-1.5 pl-1 font-medium text-[#75E0A7] text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-[#75E0A7]" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: maskFirstLast(tournament.member?.name || '', {
+                                                                                    midLength: 4,
+                                                                                }) }), _jsx("div", { className: "font-bold text-2xl text-[#09232E]", 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-[linear-gradient(6deg,#215B5F_4.86%,#88FFD7_119.22%)] 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 bg-[linear-gradient(6deg,#215B5F_4.86%,#88FFD7_119.22%)] px-2 py-0.5 font-medium text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5" }), "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-full gap-4 rounded-lg bg-[linear-gradient(6deg,#215B5F_4.86%,#88FFD7_119.22%)] 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 text-white", children: [_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-[6px] border border-[#085D3A] bg-[#053321] py-0.5 pr-1.5 pl-1 font-medium text-[#75E0A7] text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-[#75E0A7]" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-xs", children: "You could be the first to win the tournament!" })] })] }))] })] }) }) }) }) }), _jsxs("div", { className: "flex w-full flex-1 items-center justify-between rounded-b-2xl bg-[radial-gradient(103.87%_100%_at_50.15%_0%,#072B37_20.3%,#051125_100%)] px-4 py-3.5 shadow-[0_-5px_20px_0_#88FFD7_inset]", children: [_jsxs("button", { type: "button", className: "flex items-center gap-1 font-medium text-sm", children: ["See details", _jsx(ArrowNarrowUpRightIcon, { className: "h-5 w-5" })] }), _jsx("button", { type: "button", className: "flex h-9 items-center justify-center gap-1.5 rounded-lg px-4 py-2.5 font-semibold text-[#FFE5AF] text-sm underline disabled:cursor-not-allowed disabled:opacity-50", children: "Tournament Rules" })] })] }));
+}

package/dist/lib/components/Tournaments/TournamentsCarousel/TournamentsCarousel.d.ts

@@ -0,0 +1,31 @@
+import { type CSSProperties, type ReactNode } from 'react';
+interface ClassNameEntries {
+    root?: string;
+    itemRoot?: string;
+    itemBadgeRoot?: string;
+    itemBadgeLabel?: string;
+    itemBadgeIcon?: string;
+}
+interface StyleEntries {
+    root?: CSSProperties;
+    itemRoot?: CSSProperties;
+    itemBadgeRoot?: CSSProperties;
+    itemBadgeLabel?: CSSProperties;
+    itemBadgeIcon?: CSSProperties;
+}
+export interface TournamentsCarouselProps {
+    layout: 'carousel';
+    /** @default "Tournaments" */
+    heading?: string | ReactNode;
+    /** @default "/tournaments" */
+    viewAllUrl?: string;
+    className?: string | ClassNameEntries;
+    style?: CSSProperties | StyleEntries;
+    startStyle?: {
+        fillStarColor: string;
+        numberColor: string;
+    };
+    variant?: 'happybingo' | 'crazywin';
+}
+export declare function TournamentsCarousel({ style, className, ...props }: TournamentsCarouselProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/lib/components/Tournaments/TournamentsCarousel/TournamentsCarousel.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
+import dynamic from 'next/dynamic';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useCallback, useEffect, useState, } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useTournamentsQuery } from '../../../client/hooks/useTournamentsQuery.js';
+import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../../icons/ArrowRightIcon.js';
+import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
+import tournamentIcon from '../../../images/tourna-icon.webp';
+import { Button } from '../../../ui/Button/index.js';
+import { isStyleEntries } from '../../../utils/isStyleEntries.js';
+import { TournamentsCarouselItemContext } from './TournamentsCarouselContext.js';
+const TournamentsCarouselItemCrazywin = dynamic(() => import('./TournamentCarouselItem.Crazywin.js').then((mod) => mod.TournamentsCarouselItemCrazywin), { ssr: false, loading: () => null });
+const TournamentsCarouselItemHappyBingo = dynamic(() => import('./TournamentsCarouselItem.HappyBingo.js').then((mod) => mod.TournamentsCarouselItemHappyBingo), { ssr: false, loading: () => null });
+const TournamentsCarouselItem = dynamic(() => import('./TournamentsCarouselItem.js').then((mod) => mod.TournamentsCarouselItem), { ssr: false, loading: () => null });
+export function TournamentsCarousel({ style, className, ...props }) {
+    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]);
+    const tournamentsQuery = useTournamentsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+        },
+    });
+    const tournaments = tournamentsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    if (tournaments.length <= 0)
+        return null;
+    const styles = isStyleEntries(style, [
+        'root',
+        'itemRoot',
+        'itemBadgeRoot',
+        'itemBadgeLabel',
+        'itemBadgeIcon',
+    ])
+        ? style
+        : { root: style };
+    const classNames = isString(className)
+        ? { root: className }
+        : (className ?? {});
+    return (_jsxs("div", { className: classNames.root, style: styles.root, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [props.variant === 'crazywin' && (_jsx(Image, { src: tournamentIcon, alt: "Tournament", width: 300, height: 300, className: "size-5", draggable: false })), _jsx("div", { className: "font-semibold text-lg", children: props.heading ?? 'Tournaments' })] }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/tournaments', className: twMerge('flex gap-sm font-semibold text-sm', props.variant === 'happybingo'
+                                    ? 'text-button-tertiary-fg'
+                                    : 'text-white'), children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _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-lg lg:overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: tournaments.map((tournament) => (_jsx(TournamentsCarouselItemContext, { value: tournament, children: props.variant === 'happybingo' ? (_jsx(TournamentsCarouselItemHappyBingo, {})) : props.variant === 'crazywin' ? (_jsx(TournamentsCarouselItemCrazywin, {})) : (_jsx(TournamentsCarouselItem, { viewAllUrl: props.viewAllUrl, style: {
+                                root: styles.itemRoot,
+                                badgeIcon: styles.itemBadgeIcon,
+                                badgeRoot: styles.itemBadgeRoot,
+                                badgeLabel: styles.itemBadgeLabel,
+                            }, className: {
+                                root: classNames.itemRoot,
+                                badgeRoot: classNames.itemBadgeRoot,
+                                badgeLabel: classNames.itemBadgeLabel,
+                                badgeIcon: classNames.itemBadgeIcon,
+                            }, startStyle: props.startStyle })) }, tournament.id))) }) })] }));
+}

package/dist/lib/components/Tournaments/TournamentsCarousel/TournamentsCarouselContext.d.ts

@@ -0,0 +1,6 @@
+import type { Tournament } from '../../../types';
+export declare const TournamentsCarouselItemContext: (props: {
+    value: Tournament;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useTournamentsCarouselItemContext: () => Tournament;

package/dist/lib/components/Tournaments/TournamentsCarousel/TournamentsCarouselContext.js

@@ -0,0 +1,2 @@
+import { createContext } from '../../../client/utils/createContext.js';
+export const [TournamentsCarouselItemContext, useTournamentsCarouselItemContext,] = createContext();

package/dist/lib/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.HappyBingo.d.ts

@@ -0,0 +1 @@
+export declare function TournamentsCarouselItemHappyBingo(): import("react/jsx-runtime").JSX.Element;