@opexa/portal-components 0.0.28 → 0.0.30

package/dist/components/FavoriteGames/FavoriteGames.client.jsx

@@ -1,63 +0,0 @@
-'use client';
-import Image from 'next/image';
-import { twMerge } from 'tailwind-merge';
-import { useFavoriteGamesQuery, useSessionQuery, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks';
-import { ArrowLeftIcon, ArrowRightIcon, Star01Icon } from '../../icons';
-import { Button } from '../../ui';
-import { getGameImageUrl } from '../../utils';
-import { GameLaunchTrigger } from '../GameLaunch';
-export function FavoriteGames__client(props) {
-    const gamesQuery = useFavoriteGamesQuery();
-    const games = gamesQuery.data ?? [];
-    if (games.length <= 0)
-        return null;
-    return (<div className={props.className}>
-      <div className="flex items-center">
-        <h2 className="text-lg font-semibold">
-          {props.heading ?? 'Favorite Games'}
-        </h2>
-        <div className="grow"/>
-        <div className="flex items-center justify-center gap-xl">
-          <div className="hidden lg:flex">
-            <Button variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" aria-label="Previous">
-              <ArrowLeftIcon className="size-5"/>
-            </Button>
-            <Button variant="outline" colorScheme="gray" className="rounded-l-none">
-              <ArrowRightIcon className="size-5"/>
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div className="relative mt-lg lg:overflow-hidden">
-        <div className={twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md')}>
-          {games.map((game) => (<Item key={game.id} game={game}/>))}
-        </div>
-      </div>
-    </div>);
-}
-function Item({ game }) {
-    const sessionQuery = useSessionQuery();
-    const session = sessionQuery.data;
-    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
-    return (<GameLaunchTrigger game={game} className="relative block w-full shadow-sm">
-      {session?.status === 'authenticated' && (<div role="button" onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (unmarkGameAsFavoriteMutation.isPending)
-                    return;
-                unmarkGameAsFavoriteMutation.mutate(game.id);
-            }} aria-disabled={unmarkGameAsFavoriteMutation.isPending} className="rounded-xs absolute right-2 top-2 flex size-9 items-center justify-center bg-black/65 blur-[0.5px]">
-          <Star01Icon className="fill-yellow-400 text-yellow-400 size-5"/>
-        </div>)}
-
-      <Image src={getGameImageUrl({
-            id: game.id,
-            provider: game.provider,
-        })} 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>);
-}

package/dist/components/FavoriteGames/FavoriteGames.jsx

@@ -1,6 +0,0 @@
-import { prefetchFavoriteGamesQuery } from '../../server/utils';
-import { FavoriteGames__client } from './FavoriteGames.client';
-export async function FavoriteGames(props) {
-    await prefetchFavoriteGamesQuery();
-    return <FavoriteGames__client {...props}/>;
-}

package/dist/components/GameLaunch/GameLaunch.jsx

@@ -1,188 +0,0 @@
-'use client';
-import { Dialog, Portal, Presence } from '@ark-ui/react';
-import { useRef } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useShallow } from 'zustand/shallow';
-import { useDisclosure, useEndGameSessionMutation, useFavoriteGamesQuery, useGlobalStore, useMarkGameAsFavoriteMutation, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks';
-import { AlertCircleIcon, ChevronLeftIcon, CoinsHandIcon, Expand03Icon, SpinnerIcon, Star01Icon, XIcon, } from '../../icons';
-import { AlertDialog, Button, IconButton } from '../../ui';
-export function GameLaunch() {
-    const ref = useRef(null);
-    const maximizeDisclosure = useDisclosure({
-        defaultOpen: true,
-        onOpenChange(open) {
-            if (!open) {
-                setTimeout(() => {
-                    ref.current?.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start',
-                        inline: 'start',
-                    });
-                }, 25);
-            }
-        },
-    });
-    const cancelDisclosure = useDisclosure();
-    const endGameSessionMutation = useEndGameSessionMutation();
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        gameLaunch: ctx.gameLaunch,
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    async function endGameSession() {
-        if (globalStore.gameLaunch.details.status === 'PLAYING') {
-            await endGameSessionMutation.mutateAsync({
-                game: globalStore.gameLaunch.details.game,
-                session: globalStore.gameLaunch.details.session,
-            });
-        }
-        maximizeDisclosure.setOpen(true);
-        globalStore.gameLaunch.setDetails({
-            status: 'WAITING',
-            session: null,
-            game: null,
-        });
-    }
-    const favoriteGamesQuery = useFavoriteGamesQuery();
-    const favoriteGames = favoriteGamesQuery.data ?? [];
-    const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
-    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
-    const markedAsFavorite = favoriteGames.some((favoriteGame) => {
-        return !globalStore.gameLaunch.details.game
-            ? false
-            : 'reference' in globalStore.gameLaunch.details.game
-                ? favoriteGame.id === globalStore.gameLaunch.details.game.reference
-                : favoriteGame.id === globalStore.gameLaunch.details.game.id;
-    });
-    return (<>
-      <Presence ref={ref} present={globalStore.gameLaunch.details.status !== 'WAITING' &&
-            !maximizeDisclosure.open} lazyMount unmountOnExit={globalStore.gameLaunch.details.status === 'WAITING'} className="border-border-primary bg-bg-primary-alt w-full overflow-hidden rounded-lg border ui-open:animate-fade-in ui-closed:animate-fade-out">
-        <section className="aspect-[960/540] w-full">
-          {globalStore.gameLaunch.details.status === 'LOADING' && (<div className="flex size-full items-center justify-center">
-              <SpinnerIcon className="size-8"/>
-            </div>)}
-
-          {globalStore.gameLaunch.details.status === 'FAILED' && (<div>{/* TODO */}</div>)}
-
-          {globalStore.gameLaunch.details.status === 'PLAYING' && (<iframe src={globalStore.gameLaunch.details.session?.launchUrl ?? ''} className="size-full"/>)}
-        </section>
-        <section className="border-border-primary flex justify-end gap-2 border-t p-2">
-          <IconButton size="xs" variant="outline" colorScheme="gray" onClick={() => {
-            if (globalStore.gameLaunch.details.status !== 'PLAYING') {
-                endGameSession();
-                return;
-            }
-            cancelDisclosure.setOpen(true);
-        }} disabled={globalStore.gameLaunch.details.status === 'LOADING'} aria-label="Quit Game">
-            <XIcon className="size-5"/>
-          </IconButton>
-          <IconButton size="xs" variant="outline" colorScheme="gray" disabled={globalStore.gameLaunch.details.status === 'LOADING'} aria-label={markedAsFavorite ? 'Remove from Favorites' : 'Add to Favorites'} onClick={() => {
-            if (!globalStore.gameLaunch.details.game)
-                return;
-            if (markedAsFavorite) {
-                unmarkGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
-                    ? globalStore.gameLaunch.details.game.reference
-                    : globalStore.gameLaunch.details.game.id);
-            }
-            else {
-                markGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
-                    ? globalStore.gameLaunch.details.game.reference
-                    : globalStore.gameLaunch.details.game.id);
-            }
-        }}>
-            <Star01Icon className={twMerge('size-5', markedAsFavorite
-            ? 'text-yellow-400 fill-yellow-400'
-            : 'text-inherit')}/>
-          </IconButton>
-          <IconButton size="xs" variant="outline" colorScheme="gray" onClick={() => maximizeDisclosure.setOpen(true)} title="Maximize" aria-label="Maximize">
-            <Expand03Icon className="size-5"/>
-          </IconButton>
-        </section>
-      </Presence>
-
-      <Dialog.Root open={globalStore.gameLaunch.details.status !== 'WAITING' &&
-            maximizeDisclosure.open &&
-            !cancelDisclosure.open} lazyMount closeOnEscape={false} closeOnInteractOutside={false}>
-        <Portal>
-          <Dialog.Positioner className="z-dialog fixed inset-0">
-            <Dialog.Content className="ui-open:animate-dialog-in ui-closed:animate-dialog-out bg-bg-primary-alt flex size-full flex-col">
-              <section className="flex items-center gap-2 px-4 py-2">
-                <IconButton size="xs" variant="outline" onClick={() => {
-            if (globalStore.gameLaunch.details.status !== 'PLAYING') {
-                endGameSession();
-                return;
-            }
-            cancelDisclosure.setOpen(true);
-        }} disabled={globalStore.gameLaunch.details.status === 'LOADING'} title="Quit" aria-label="Quit Game">
-                  <ChevronLeftIcon className="size-5"/>
-                </IconButton>
-                <div className="grow"/>
-                <IconButton size="xs" variant="outline">
-                  <Star01Icon className={twMerge('size-5', markedAsFavorite
-            ? 'text-yellow-400 fill-yellow-400'
-            : 'text-inherit')}/>
-                </IconButton>
-                <IconButton size="xs" variant="outline" onClick={() => maximizeDisclosure.setOpen(false)} title="Minimize" aria-label="Minimize">
-                  <Expand03Icon className="size-5"/>
-                </IconButton>
-                <IconButton size="xs" fullWidth={false} onClick={() => {
-            globalStore.depositWithdrawal.setOpen(true);
-        }}>
-                  <CoinsHandIcon className="size-5"/>
-                </IconButton>
-              </section>
-              <section className="grow">
-                {globalStore.gameLaunch.details.status === 'LOADING' && (<div className="flex size-full items-center justify-center">
-                    <SpinnerIcon className="size-8"/>
-                  </div>)}
-
-                {globalStore.gameLaunch.details.status === 'FAILED' && (<div>{/* TODO: Error */}</div>)}
-
-                {globalStore.gameLaunch.details.status === 'PLAYING' && (<iframe src={globalStore.gameLaunch.details.session.launchUrl ?? ''} className="size-full"/>)}
-              </section>
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
-
-      <AlertDialog.Root role="alertdialog" open={cancelDisclosure.open} onOpenChange={(details) => {
-            cancelDisclosure.setOpen(details.open);
-        }} lazyMount closeOnEscape={false} closeOnInteractOutside={false}>
-        <Portal>
-          <AlertDialog.Backdrop />
-          <AlertDialog.Positioner>
-            <AlertDialog.Content>
-              <AlertDialog.Header>
-                <div className="bg-error-700/25 text-error-200 flex size-12 items-center justify-center rounded-full">
-                  <AlertCircleIcon />
-                </div>
-                <AlertDialog.CloseTrigger>
-                  <XIcon />
-                </AlertDialog.CloseTrigger>
-              </AlertDialog.Header>
-              <AlertDialog.Body>
-                <AlertDialog.Title>Quit Game</AlertDialog.Title>
-                <AlertDialog.Description>
-                  Are you sure you want to quit?
-                </AlertDialog.Description>
-              </AlertDialog.Body>
-              <AlertDialog.Context>
-                {(api) => (<AlertDialog.Footer>
-                    <Button variant="outline" colorScheme="gray" disabled={endGameSessionMutation.isPending} onClick={() => {
-                api.setOpen(false);
-            }}>
-                      Cancel
-                    </Button>
-                    <Button colorScheme="danger" disabled={endGameSessionMutation.isPending} onClick={async () => {
-                await endGameSession();
-                api.setOpen(false);
-            }}>
-                      Proceed
-                    </Button>
-                  </AlertDialog.Footer>)}
-              </AlertDialog.Context>
-            </AlertDialog.Content>
-          </AlertDialog.Positioner>
-        </Portal>
-      </AlertDialog.Root>
-    </>);
-}

package/dist/components/GameProviders/GameProviders.jsx

@@ -1,60 +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, ChevronRightIcon } from '../../icons';
-import { Button } from '../../ui';
-export function GameProviders(props) {
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-        align: 'start',
-        slidesToScroll: 1,
-    });
-    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
-    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
-    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
-    const onNextButtonClick = useCallback(async () => {
-        emblaApi?.scrollNext();
-    }, [emblaApi]);
-    const onSelect = useCallback((emblaApi) => {
-        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
-        setNextBtnDisabled(!emblaApi?.canScrollNext());
-    }, []);
-    useEffect(() => {
-        if (!emblaApi)
-            return;
-        onSelect(emblaApi);
-        emblaApi.on('reInit', onSelect).on('select', onSelect);
-    }, [emblaApi, onSelect]);
-    const viewAllUrl = props.viewAllUrl ?? '/games/providers';
-    return (<div className={props.className}>
-      <div className="flex items-center">
-        <h2 className="text-lg font-semibold">
-          {props.heading ?? 'Providers'}
-        </h2>
-        <div className="grow"/>
-        <div className="flex items-center justify-center gap-xl">
-          <Link href={viewAllUrl} className="text-button-tertiary-fg flex gap-sm text-sm font-semibold">
-            See All
-            <ChevronRightIcon className="size-5 lg:hidden"/>
-          </Link>
-          <div className="hidden lg:flex">
-            <Button variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" onClick={onPrevButtonClick} disabled={prevBtnDisabled} aria-label="Previous">
-              <ArrowLeftIcon className="size-5"/>
-            </Button>
-            <Button variant="outline" colorScheme="gray" className="rounded-l-none" onClick={onNextButtonClick} disabled={nextBtnDisabled} aria-label="Next">
-              <ArrowRightIcon className="size-5"/>
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div ref={emblaRef} className="relative mt-lg lg:overflow-hidden">
-        <div className="grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md">
-          {props.gameProviders.map((provider) => (<Link key={provider.id} href={`${viewAllUrl}/${provider.slug}`} className="bg-gray-800 flex w-full items-center rounded-md px-md py-sm lg:h-[5.75rem]">
-              <Image src={provider.logo} alt="" width={300} height={150} className="mx-auto h-auto w-full"/>
-            </Link>))}
-        </div>
-      </div>
-    </div>);
-}

package/dist/components/Games/Games.client.jsx

@@ -1,118 +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 { twMerge } from 'tailwind-merge';
-import { useFavoriteGamesQuery, useGamesQuery, useMarkGameAsFavoriteMutation, useSessionQuery, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks';
-import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, SpinnerIcon, Star01Icon, } from '../../icons';
-import { Button } from '../../ui';
-import { GameLaunchTrigger } from '../GameLaunch';
-export function Games__client(props) {
-    const numOfRows = props.numOfRows ?? 1;
-    const gamesQuery = useGamesQuery({
-        first: (numOfRows + 1) * 6,
-        filter: props.filter,
-    });
-    const games = gamesQuery.data?.pages
-        .map((page) => page.edges.map((edge) => edge.node))
-        .flat() ?? [];
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-        align: 'start',
-        slidesToScroll: 3,
-        breakpoints: {
-            '(min-width: 1024px)': {
-                slidesToScroll: 6,
-            },
-        },
-    });
-    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
-    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
-    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
-    const onNextButtonClick = useCallback(async () => {
-        if (!emblaApi?.canScrollNext() && gamesQuery.hasNextPage) {
-            await gamesQuery.fetchNextPage();
-            emblaApi?.reInit();
-            await new Promise((resolve) => setTimeout(resolve, 1));
-        }
-        emblaApi?.scrollNext();
-    }, [emblaApi, gamesQuery]);
-    const onSelect = useCallback((emblaApi) => {
-        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
-        setNextBtnDisabled(!emblaApi?.canScrollNext());
-    }, []);
-    useEffect(() => {
-        if (!emblaApi)
-            return;
-        onSelect(emblaApi);
-        emblaApi.on('reInit', onSelect).on('select', onSelect);
-    }, [emblaApi, onSelect]);
-    return (<div className={props.className}>
-      <div className="flex items-center">
-        <h2 className="text-lg font-semibold">{props.heading ?? 'Games'}</h2>
-        <div className="grow"/>
-        <div className="flex items-center justify-center gap-xl">
-          <Link href={props.viewAllUrl ?? '/games'} className="text-button-tertiary-fg flex gap-sm text-sm font-semibold">
-            See All
-            <ChevronRightIcon className="size-5 lg:hidden"/>
-          </Link>
-          <div className="hidden lg:flex">
-            <Button variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" onClick={onPrevButtonClick} disabled={prevBtnDisabled} aria-label="Previous">
-              <ArrowLeftIcon className="size-5"/>
-            </Button>
-            <Button variant="outline" colorScheme="gray" className="rounded-l-none" onClick={onNextButtonClick} disabled={nextBtnDisabled && !gamesQuery.hasNextPage
-            ? true
-            : gamesQuery.isFetchingNextPage} aria-label="Next">
-              {gamesQuery.isFetchingNextPage ? (<SpinnerIcon className="size-5"/>) : (<ArrowRightIcon className="size-5"/>)}
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div ref={emblaRef} className="relative mt-lg lg:overflow-hidden">
-        <div className={twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md', numOfRows === 3
-            ? 'grid-rows-3'
-            : numOfRows === 2
-                ? 'grid-rows-2'
-                : 'grid-rows-1')}>
-          {games.map((game) => (<Item key={game.id} game={game}/>))}
-        </div>
-      </div>
-    </div>);
-}
-function Item({ game }) {
-    const sessionQuery = useSessionQuery();
-    const session = sessionQuery.data;
-    const favoriteGamesQuery = useFavoriteGamesQuery();
-    const favoriteGames = favoriteGamesQuery.data ?? [];
-    const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
-    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
-    const markedAsFavorite = favoriteGames.some((favoriteGame) => favoriteGame.id === game.id);
-    return (<GameLaunchTrigger game={game} className="relative block w-full shadow-sm">
-      {session?.status === 'authenticated' && (<div role="button" onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (markGameAsFavoriteMutation.isPending)
-                    return;
-                if (unmarkGameAsFavoriteMutation.isPending)
-                    return;
-                if (markedAsFavorite) {
-                    unmarkGameAsFavoriteMutation.mutate(game.reference);
-                }
-                else {
-                    markGameAsFavoriteMutation.mutate(game.reference);
-                }
-            }} aria-disabled={markGameAsFavoriteMutation.isPending ||
-                unmarkGameAsFavoriteMutation.isPending} className="rounded-xs absolute right-2 top-2 flex size-9 items-center justify-center bg-black/65 blur-[0.5px]">
-          <Star01Icon className={twMerge('size-5', markedAsFavorite
-                ? 'fill-yellow-400 text-yellow-400'
-                : 'text-white')}/>
-        </div>)}
-
-      <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>);
-}

package/dist/components/Games/Games.jsx

@@ -1,10 +0,0 @@
-import { prefetchGamesQuery } from '../../server/utils';
-import { Games__client } from './Games.client';
-export async function Games(props) {
-    const numOfRows = props.numOfRows ?? 1;
-    await prefetchGamesQuery({
-        first: (numOfRows + 1) * 6,
-        filter: props.filter,
-    });
-    return <Games__client {...props}/>;
-}

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';
-import { SearchLgIcon, XIcon } from '../../icons';
-import providerHacksaw from '../../images/hacksaw-gaming.png';
-import { Button, Dialog, Field, IconButton, Presence } from '../../ui';
-import { GameLaunchTrigger } from '../GameLaunch';
-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/JackpotCounter.client.jsx

@@ -1,84 +0,0 @@
-'use client';
-import useEmblaCarousel from 'embla-carousel-react';
-import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
-import { useJackpotsQuery } from '../../client/hooks';
-import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon } from '../../icons';
-import { Button } from '../../ui';
-import { JackpotCounterItem } from './JackpotCounterItem';
-export function JackpotCounter__client(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 jackpotsQuery = useJackpotsQuery({
-        first: 100,
-        filter: {
-            status: {
-                equal: 'ACTIVE',
-            },
-            deleted: {
-                equal: false,
-            },
-        },
-        sort: {
-            cursor: 'POOL',
-            order: 'DESC',
-        },
-    });
-    const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
-    if (jackpots.length <= 0)
-        return null;
-    return (<div className={props.className}>
-      <div className="flex items-center justify-between">
-        <div className="text-lg font-semibold">
-          {props.heading ?? 'Jackpots'}
-        </div>
-        <div className="flex items-center md:gap-3xl">
-          <Link href={props.viewAllUrl ?? '/jackpots'} className="text-button-tertiary-fg flex gap-sm text-sm font-semibold">
-            See All
-            <ChevronRightIcon className="size-5 lg:hidden"/>
-          </Link>
-
-          <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>
-
-      <div className="relative mt-lg lg:overflow-hidden" ref={emblaRef}>
-        <div className="flex gap-2.5">
-          {jackpots.map((jackpot) => (<JackpotCounterItem key={jackpot.id} jackpot={jackpot} className="w-full" viewAllUrl={props.viewAllUrl}/>))}
-        </div>
-      </div>
-    </div>);
-}