@opexa/portal-components 0.1.0 → 0.1.4

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

@@ -1,69 +0,0 @@
-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

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

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

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

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

@@ -1,3 +0,0 @@
-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

@@ -1,9 +0,0 @@
-'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

@@ -1,6 +0,0 @@
-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

@@ -1,149 +0,0 @@
-'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

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

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

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,33 +0,0 @@
-'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

@@ -1,3 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,53 +0,0 @@
-'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

@@ -1,31 +0,0 @@
-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

@@ -1,85 +0,0 @@
-'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

@@ -1,6 +0,0 @@
-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

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

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

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