@opexa/portal-components 0.0.29 → 0.0.31

package/dist/components/GamesSearch/GamesSearch.jsx

@@ -1,110 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import Image, {} from 'next/image';
-import { useRef, useState } from 'react';
-import { useShallow } from 'zustand/shallow';
-import { useGamesQuery, useGlobalStore } from '../../client/hooks/index.js';
-import { SearchLgIcon, XIcon } from '../../icons/index.js';
-import providerHacksaw from '../../images/hacksaw-gaming.png';
-import { Button, Dialog, Field, IconButton, Presence } from '../../ui/index.js';
-import { GameLaunchTrigger } from '../GameLaunch/index.js';
-export function GamesSearch(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        gamesSearch: ctx.gamesSearch,
-    })));
-    const inputRef = useRef(null);
-    const [search, setSearch] = useState('');
-    const gamesQuery = useGamesQuery({
-        first: 18,
-        search,
-    }, {
-        enabled: search.length >= 3,
-    });
-    const games = gamesQuery.data?.pages
-        .map((page) => page.edges.map((edge) => edge.node))
-        .flat() ?? [];
-    return (<Dialog.Root open={globalStore.gamesSearch.open} onOpenChange={(details) => globalStore.gamesSearch.setOpen(details.open)} lazyMount unmountOnExit>
-      <Portal>
-        <Dialog.Backdrop />
-        <Dialog.Positioner>
-          <Dialog.Content className="bg-bg-primary lg:min-h-auto mx-auto min-h-full w-full pt-xl lg:mt-[132px] lg:max-w-[1136px] lg:bg-unset lg:pt-0">
-            <Dialog.Context>
-              {(api) => (<div className="flex items-center justify-between px-4 lg:hidden">
-                  <Image src={props.logo} alt="" width={200} height={40} className="h-8 w-auto"/>
-                  <IconButton size="sm" colorScheme="gray" onClick={() => api.setOpen(false)}>
-                    <XIcon className="text-text-quinary size-6"/>
-                  </IconButton>
-                </div>)}
-            </Dialog.Context>
-
-            <div className="flex justify-end">
-              <Dialog.Context>
-                {(api) => (<button type="button" onClick={() => api.setOpen(false)} className="hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex">
-                    <XIcon className="size-5 text-white"/>
-                  </button>)}
-              </Dialog.Context>
-            </div>
-
-            <div className="mt-2xl px-4 lg:mt-xl lg:px-0">
-              <div className="relative">
-                <SearchLgIcon className="text-text-quinary pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2"/>
-                <Field.Input ref={inputRef} type="search" value={search} onChange={(e) => {
-            setSearch(e.target.value);
-        }} className="pl-10 pr-16" placeholder="Search" autoComplete="off"/>
-                <Presence present={search.length > 0} asChild lazyMount>
-                  <button type="button" className="text-text-secondary-700 absolute right-3.5 top-1/2 -translate-y-1/2 font-semibold" onClick={() => {
-            setSearch('');
-            inputRef.current?.focus();
-        }}>
-                    Clear
-                  </button>
-                </Presence>
-              </div>
-            </div>
-
-            <div className="lg:bg-bg-primary lg:border-border-primary mt-2xl p-xl pb-3xl lg:mt-2 lg:rounded-xl lg:border">
-              {search.length <= 0 ? (<Alert message="Search for your favorite game or provider."/>) : search.length >= 1 && search.length <= 2 ? (<Alert message="Search requires at least 3 characters."/>) : (<>
-                  {games.length <= 0 && <Alert message="No results found"/>}
-                  {games.length > 0 && (<>
-                      <h2 className="text-lg font-semibold">Providers</h2>
-                      <div className="mb-3xl mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5">
-                        <div className="bg-gray-800 flex h-14 w-full items-center rounded-md">
-                          <Image src={providerHacksaw} alt="" width={100} height={50} className="mx-auto h-auto w-full"/>
-                        </div>
-                      </div>
-
-                      <h2 className="text-lg font-semibold">Games</h2>
-                      <div className="mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5">
-                        {games.map((game) => (<GameLaunchTrigger key={game.id} game={game} className="block w-full shadow-sm" onClick={() => {
-                        globalStore.gamesSearch.setOpen(false);
-                    }}>
-                            <Image src={game.image} alt="" width={200} height={200} priority className="aspect-square w-full rounded-t-md object-cover"/>
-
-                            <span className="bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold">
-                              {game.name}
-                            </span>
-                          </GameLaunchTrigger>))}
-                      </div>
-
-                      <Presence present={gamesQuery.hasNextPage}>
-                        <Button variant="outline" className="mx-auto mt-12 w-fit" onClick={() => gamesQuery.fetchNextPage()}>
-                          Load More
-                        </Button>
-                      </Presence>
-                    </>)}
-                </>)}
-            </div>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>);
-}
-function Alert({ message }) {
-    return (<div className="py-lg" role="alert" aria-live="polite">
-      <div className="bg-bg-secondary shadow-xs border-border-primary mx-auto flex size-12 items-center justify-center rounded-lg border">
-        <SearchLgIcon className="text-text-secondary-700 size-6"/>
-      </div>
-
-      <p className="text-text-secondary-700 mt-4 text-center">{message}</p>
-    </div>);
-}

package/dist/components/JackpotCounter/JackpotCounterItem.jsx

@@ -1,317 +0,0 @@
-'use client';
-import { Progress } from '@ark-ui/react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useCallback, useMemo } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useLocaleInfo } from '../../client/hooks/index.js';
-import { useJackpotPayoutsQuery } from '../../client/hooks/useJackpotPayoutsQuery.js';
-import { ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, Trophy01Icon, } from '../../icons/index.js';
-import { StarIcon } from '../../icons/StarIcon';
-import closeChest from '../../images/close-chest.png';
-import firstPlace from '../../images/first-place.png';
-import leaderboard from '../../images/leaderboard.png';
-import openChest from '../../images/open-chest.png';
-import { formatNumber } from '../../utils/index.js';
-import styles from './JackpotCounterItem.module.css';
-export function JackpotCounterItem({ jackpot, className, viewAllUrl, }) {
-    const jackpotPayoutsQuery = useJackpotPayoutsQuery({
-        first: 30,
-        filter: {
-            jackpot: {
-                equal: jackpot.id,
-            },
-        },
-        sort: {
-            cursor: 'AMOUNT',
-            order: 'DESC',
-        },
-    });
-    const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
-    const topJackpotPayout = jackpotPayouts[0] ?? [];
-    const localeInfo = useLocaleInfo();
-    const isPayingOut = jackpot.drawing;
-    const jackpotAmount = isPayingOut
-        ? jackpot.maximumJackpotPoolLimit
-        : jackpot.pool;
-    const Arrow = useCallback(({ index }) => {
-        const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
-        return (<Icon className={twMerge('scale-400 lg:scale-250 text-brand-300 min-w-2.5 lg:min-w-4', isPayingOut
-                ? styles['animate-wave-color-error']
-                : styles['animate-wave-color-success'])} style={{
-                animationDelay: isPayingOut
-                    ? `${(40 - index - 1) * 0.1}s`
-                    : `${index * 0.1}s`,
-            }}/>);
-    }, [isPayingOut]);
-    const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => (<Arrow key={i} isFirst={i === 0} index={i}/>)), [Arrow]);
-    return (<div className={twMerge('bg-bg-tertiary border-border-primary relative flex shrink-0 rounded-2xl border p-3 text-center lg:gap-4 lg:p-5', className)}>
-      <div className="z-1 relative flex flex-1 flex-col">
-        <div className="flex h-full flex-col justify-between">
-          <div className="flex w-full justify-between">
-            <div className="flex w-full flex-col">
-              <div className="relative flex w-full justify-between">
-                <div>
-                  {/* Badge */}
-
-                  {isPayingOut ? (<div className="border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
-                      <span className="full bg-utility-success-500 size-1.5 animate-pulse rounded"/>
-                      Paying Out
-                    </div>) : (<div className="border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
-                      <ArrowNarrowUpRightIcon className="text-utility-blue-500 size-3.5"/>
-                      Accumulating
-                    </div>)}
-
-                  <div className="text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl">
-                    {jackpot.name}
-                  </div>
-
-                  <div className="bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl">
-                    {formatNumber(jackpotAmount, {
-            currency: localeInfo.currency.code,
-            minDecimalPlaces: 2,
-            maxDecimalPlaces: 2,
-        })}
-                  </div>
-                </div>
-                <div className="z-1 bottom-[-60] right-0 lg:absolute">
-                  <Image width={150} height={150} src={isPayingOut ? openChest : closeChest} alt="closeChest" quality={100} className="h-25 w-25 lg:h-37.5 lg:w-37.5 size-full p-2"/>
-                </div>
-              </div>
-
-              {/* Top Payout */}
-
-              {topJackpotPayout.amount ? (<div>
-                  <div className="bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex">
-                    <div className="border-yellow-400 relative h-18 w-18 rounded-full border">
-                      <div className="bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold">
-                        1st
-                      </div>
-                    </div>
-
-                    <div className="flex flex-col gap-1 text-left">
-                      <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium">
-                        <Trophy01Icon className="text-utility-brand-600 size-3.5"/>
-                        Top Payout
-                      </div>
-
-                      <div className="font-semibold">
-                        {maskName(topJackpotPayout.member.name)}
-                      </div>
-                      <div className="text-brand-400 text-2xl">
-                        {formatNumber(topJackpotPayout.amount, {
-                currency: localeInfo.currency.code,
-                minDecimalPlaces: 2,
-                maxDecimalPlaces: 2,
-            })}
-                      </div>
-                    </div>
-                  </div>
-                </div>) : (<div className="bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex">
-                  <Image width={66} height={87} src={firstPlace} alt="closeChest" className="size-full h-auto w-[66px] mix-blend-luminosity"/>
-
-                  <div className="flex flex-col gap-1 text-left">
-                    <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium">
-                      <Trophy01Icon className="text-utility-brand-600 size-3.5"/>
-                      Top Payout
-                    </div>
-
-                    <div className="font-semibold">No winners yet</div>
-                    <div className="text-text-secondary-700 text-xs">
-                      You could be the first to win the tournament!
-                    </div>
-                  </div>
-                </div>)}
-            </div>
-          </div>
-        </div>
-
-        {/* Progress Bar */}
-
-        <div className="mt-3 lg:mt-4">
-          <div className="mb-1 flex justify-between">
-            <div className="text-text-primary-900 text-xs font-semibold">
-              {formatNumber(0, {
-            currency: localeInfo.currency.code,
-            compact: true,
-        })}
-            </div>
-
-            <div className="relative flex items-center justify-end gap-1.5">
-              {isPayingOut ? (<div className="flex w-6 items-center">
-                  <div className={twMerge('absolute left-0', styles['animate-arrow-red-flash-1'])}>
-                    <ChevronLeftIcon className="size-4.5"/>
-                  </div>
-                  <div className={twMerge('absolute left-1.5', styles['animate-arrow-red-flash-2'])}>
-                    <ChevronLeftIcon className="size-4.5"/>
-                  </div>
-                  <div className={twMerge('absolute left-3', styles['animate-arrow-red-flash-3'])}>
-                    <ChevronLeftIcon className="size-4.5"/>
-                  </div>
-                </div>) : (<div className="flex w-6 items-center">
-                  <div className={twMerge('absolute left-0', styles['animate-arrow-green-flash-1'])}>
-                    <ChevronRightIcon className="size-4.5"/>
-                  </div>
-                  <div className={twMerge('absolute left-1.5', styles['animate-arrow-green-flash-2'])}>
-                    <ChevronRightIcon className="size-4.5"/>
-                  </div>
-                  <div className={twMerge('absolute left-3', styles['animate-arrow-green-flash-3'])}>
-                    <ChevronRightIcon className="size-4.5"/>
-                  </div>
-                </div>)}
-
-              <div className="text-text-primary-900 text-xs font-semibold">
-                {formatNumber(jackpot?.maximumJackpotPoolLimit, {
-            currency: localeInfo.currency.code,
-            compact: true,
-        })}
-              </div>
-            </div>
-          </div>
-
-          <Progress.Root className="bg-bg-primary h-2 w-full rounded-full lg:h-4" max={100} value={calculatePercentage(Number(jackpot.pool), Number(jackpot.maximumJackpotPoolLimit))}>
-            <Progress.Track className="bg-bg-primary h-full overflow-hidden rounded-full">
-              <Progress.Range className="bg-brand-500 relative h-full overflow-hidden rounded-full pl-1.5">
-                <div className="pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5" aria-hidden="true">
-                  {arrowImages}
-                </div>
-              </Progress.Range>
-            </Progress.Track>
-          </Progress.Root>
-
-          <div className="mt-1 block text-start text-2xs lg:hidden">
-            {isPayingOut
-            ? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
-                currency: localeInfo.currency.code,
-                compact: true,
-            })} Play now for your chance to win big! 🔥`
-            : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0)}
-          </div>
-        </div>
-      </div>
-
-      {/* Leaderboard */}
-
-      <div className="z-1 hidden flex-1 space-y-4 lg:block">
-        <div className="flex items-center justify-between">
-          <div className="flex gap-2">
-            <Image width={24} height={24} src={leaderboard} quality={100} alt="leaderboardIcon" className="size-full h-auto w-6"/>
-            <div className="text-text-primary-900 text-lg font-semibold">
-              {jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!'}
-            </div>
-          </div>
-          <Link className="text-button-tertiary-fg flex text-sm font-semibold" href={viewAllUrl ?? '/jackpots'}>
-            See details
-            <ChevronRightIcon className="size-5"/>
-          </Link>
-        </div>
-
-        <div className={twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea'])}>
-          <div className="border-gray-200 overflow-hidden rounded-xl">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium">
-                  <th className="w-[52px]">#</th>
-                  <th>Player</th>
-                  <th>Multiplier</th>
-                  <th>Prize</th>
-                </tr>
-              </thead>
-              <tbody>
-                {jackpotPayouts.length ? (<>
-                    {jackpotPayouts.map((jackpotPayout, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 text-sm">
-                        <td className="border-border-secondary h-12 w-[52px] border-t-2">
-                          {i + 1 < 6 ? (<div className="relative">
-                              <StarIcon className={twMerge('mx-auto size-6.5', starTierStyles[i].starColor)}/>
-                              <span className={twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor)}>
-                                {i + 1}
-                              </span>
-                            </div>) : (i + 1)}
-                        </td>
-                        <td className="border-border-secondary h-12 border-t-2">
-                          {maskName(jackpotPayout.member.name)}
-                        </td>
-                        <td className="border-border-secondary h-12 border-t-2">
-                          {jackpotPayout.multiplier}x
-                        </td>
-                        <td className="border-border-secondary text-brand-400 h-12 border-t-2">
-                          {formatNumber(jackpotPayout.amount, {
-                    currency: localeInfo.currency.code,
-                    minDecimalPlaces: 2,
-                    maxDecimalPlaces: 2,
-                })}
-                        </td>
-                      </tr>))}
-                  </>) : (<>
-                    {Array.from({ length: 10 }).map((_, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 text-sm">
-                        <td className="border-border-secondary h-12 w-[52px] border-t-2">
-                          {i + 1 < 6 ? (<div className="relative">
-                              <StarIcon className={twMerge('mx-auto size-6.5', starTierStyles[i].starColor)}/>
-                              <span className={twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor)}>
-                                {i + 1}
-                              </span>
-                            </div>) : (i + 1)}
-                        </td>
-                        <td className="border-border-secondary h-12 border-t-2">
-                          -
-                        </td>
-                        <td className="border-border-secondary h-12 border-t-2">
-                          -
-                        </td>
-                        <td className="border-border-secondary h-12 border-t-2">
-                          -
-                        </td>
-                      </tr>))}
-                  </>)}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-
-      {/* Paying Out Animation */}
-
-      {isPayingOut && (<div className={twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl [--light-rays-top:25%] lg:[--light-rays-top:150px]')}></div>)}
-    </div>);
-}
-export function maskName(name) {
-    if (name.length <= 7) {
-        return '*'.repeat(name.length);
-    }
-    const visiblePart = name.slice(0, 3);
-    const maskedPart = '*'.repeat(7);
-    return visiblePart + maskedPart;
-}
-const calculatePercentage = (part, total) => {
-    if (total === 0)
-        return 0;
-    return (part / total) * 100;
-};
-const getAccumulatingJackpotDescription = (part, total) => {
-    const percentage = total === 0 ? 0 : (part / total) * 100;
-    return percentage <= 90
-        ? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
-        : '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
-};
-const starTierStyles = [
-    {
-        starColor: 'text-yellow-400',
-        numberColor: 'text-bg-primary',
-    },
-    {
-        starColor: 'text-utility-gray-700',
-        numberColor: 'text-bg-primary',
-    },
-    {
-        starColor: 'text-yellow-700',
-        numberColor: 'text-bg-primary',
-    },
-    {
-        starColor: 'text-bg-quaternary',
-        numberColor: 'text-text-primary-900',
-    },
-    {
-        starColor: 'text-bg-quaternary',
-        numberColor: 'text-text-primary-900',
-    },
-];

package/dist/components/Jackpots/JackpotGameProviders.jsx

@@ -1,59 +0,0 @@
-'use client';
-import useEmblaCarousel from 'embla-carousel-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
-import { ArrowLeftIcon, ArrowRightIcon } from '../../icons/index.js';
-import { Button } from '../../ui/index.js';
-export function JackpotGameProviders({ gameProviders, }) {
-    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 (<div className="p-4 pb-8">
-      <div className="flex items-center justify-between">
-        <div className="text-text-primary-900 text-lg font-semibold">
-          Jackpot Game Providers
-        </div>
-        <div className="hidden lg:flex">
-          <Button disabled={!canScrollPrev} onClick={scrollPrev} variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" aria-label="Previous">
-            <ArrowLeftIcon className="size-5"/>
-          </Button>
-          <Button disabled={!canScrollNext} onClick={scrollNext} variant="outline" colorScheme="gray" className="rounded-l-none" aria-label="Next">
-            <span className="sr-only">Next</span>
-            <ArrowRightIcon className="size-5"/>
-          </Button>
-        </div>
-      </div>
-      <div className="relative mt-3 overflow-hidden" ref={emblaRef}>
-        <div className="flex gap-3.5">
-          {gameProviders.map((provider, i) => (<Link key={i} href={`/${provider.slug}`} className="bg-gray-800 lg:bg-bg-primary-900 min-w-27.5 rounded-md">
-              <Image src={provider.logo} alt="provider" className="size-full"/>
-            </Link>))}
-        </div>
-      </div>
-    </div>);
-}