@opexa/portal-components 0.0.27 → 0.0.28

package/dist/components/Disclaimer/Disclaimer.jsx

@@ -0,0 +1,45 @@
+'use client';
+import { Portal } from '@ark-ui/react';
+import Image from 'next/image';
+import { useRef } from 'react';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { Button, Dialog } from '../../ui';
+import { useDisclaimer } from './useDisclaimer';
+export function Disclaimer(props) {
+    const disclaimer = useDisclaimer();
+    const acceptTriggerRef = useRef(null);
+    return (<Dialog.Root open={disclaimer.open} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false} initialFocusEl={() => acceptTriggerRef.current}>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content className="flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl">
+            <Image src={props.logo} alt="" width={200} height={100} className="mx-auto h-auto w-[120px]" draggable={false}/>
+
+            <div className="w-full grow">
+              <Dialog.Title className="mt-3xl text-center text-lg font-semibold">
+                Age Verification
+              </Dialog.Title>
+              <Dialog.Description className="text-text-tertiary-600 mt-xs text-center text-sm">
+                By entering this website I acknowledge and confirmI am 21 years
+                of age and I agree with the{' '}
+                <button type="button" className="text-brand-400 underline underline-offset-2">
+                  Terms and Conditions.
+                </button>
+              </Dialog.Description>
+
+              <div className="mt-5 flex items-center justify-center gap-3xl">
+                <Image src={pagcorLogo} alt="" height={75} width={88} className="h-[88px] w-auto shrink-0" draggable={false}/>
+
+                <Image src={responsibleGamingLogo} alt="" height={62} width={186} className="h-[62px] w-auto shrink-0" draggable={false}/>
+              </div>
+            </div>
+
+            <Button ref={acceptTriggerRef} type="button" className="mt-4xl" onClick={disclaimer.close}>
+              Accept
+            </Button>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>);
+}

package/dist/components/Disclaimer/index.js

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

package/dist/components/Disclaimer/useDisclaimer.jsx

@@ -0,0 +1,37 @@
+import { addMinutes } from 'date-fns';
+import { clamp } from 'lodash-es';
+import { useLocalStorage, useTimeout } from 'usehooks-ts';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery';
+export function useDisclaimer() {
+    'use no memo';
+    const sessionQuery = useSessionQuery();
+    const disclaimerStore = useGlobalStore(useShallow((state) => state.disclaimer));
+    const [refreshPausedUntil, setRefreshPausedUntil] = useLocalStorage('WebPortalDisclaimerRefreshPausedUntil', null, {
+        serializer(v) {
+            return v?.toISOString() ?? '';
+        },
+        deserializer(v) {
+            return v ? new Date(v) : null;
+        },
+    });
+    const now = new Date();
+    const refetchPausedUntilInMs = refreshPausedUntil
+        ? clamp(refreshPausedUntil.getTime() - now.getTime(), 0, Infinity)
+        : /* set to zero to trigger timeout function */ 0;
+    useTimeout(() => {
+        disclaimerStore.setOpen(true);
+    }, refetchPausedUntilInMs);
+    return {
+        open: sessionQuery.isLoading
+            ? false
+            : sessionQuery.data?.status === 'authenticated'
+                ? false
+                : disclaimerStore.open,
+        close: () => {
+            disclaimerStore.setOpen(false);
+            setRefreshPausedUntil(addMinutes(new Date(), 30));
+        },
+    };
+}

package/dist/components/Empty.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ComponentType } from 'react';
+import type { ComponentProps, ComponentType } from 'react';
 interface EmptyProps {
     icon: ComponentType<ComponentProps<'svg'>>;
     title: string;

package/dist/components/Empty.jsx

@@ -0,0 +1,62 @@
+export function Empty(props) {
+    return (<div role="alert" aria-live="polite" className={props.className}>
+      <div className="relative mx-auto w-[9.5rem] pt-4">
+        <div className="bg-utility-gray-200 absolute left-1/2 top-0 size-[6.5rem] -translate-x-1/2 rounded-full"/>
+        <CloudIcon className="relative h-auto w-full shrink-0"/>
+        <div className="bg-utility-gray-200/40 absolute bottom-2 left-1/2 flex size-12 -translate-x-1/2 items-center justify-center rounded-full backdrop-blur-sm">
+          <props.icon className="size-6 text-white"/>
+        </div>
+
+        <div className="bg-utility-gray-200 absolute left-4 top-3.5 size-2.5 rounded-full"></div>
+        <div className="bg-utility-gray-200 absolute bottom-0.5 left-3 size-3.5 rounded-full"></div>
+        <div className="bg-utility-gray-200 absolute right-3.5 top-1 size-2 rounded-full"></div>
+        <div className="bg-utility-gray-200 absolute right-0 top-6.5 size-3.5 rounded-full"></div>
+      </div>
+      <h2 className="mt-xl text-center font-semibold">{props.title}</h2>
+      <p className="text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm">
+        {props.message}
+      </p>
+    </div>);
+}
+function CloudIcon(props) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152 104" fill="none" {...props}>
+      <g filter="url(#filter0_dd_2719_19242)">
+        <path d="M77.6 0C66.8273 0 57.2978 5.32329 51.4987 13.4829C49.605 13.0363 47.6301 12.8 45.6 12.8C31.4615 12.8 20 24.2615 20 38.4C20 52.5385 31.4615 64 45.6 64L109.6 64C121.971 64 132 53.9712 132 41.6C132 29.2288 121.971 19.2 109.6 19.2C108.721 19.2 107.854 19.2506 107.002 19.349C102.098 7.9677 90.7797 0 77.6 0Z" fill="#F9FAFB"/>
+        <ellipse cx="45.6" cy="38.4008" rx="25.6" ry="25.6" fill="url(#paint0_linear_2719_19242)"/>
+        <circle cx="77.6" cy="32" r="32" fill="url(#paint1_linear_2719_19242)"/>
+        <ellipse cx="109.6" cy="41.5992" rx="22.4" ry="22.4" fill="url(#paint2_linear_2719_19242)"/>
+      </g>
+      <defs>
+        <filter id="filter0_dd_2719_19242" x="0" y="0" width="152" height="104" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity="0" result="BackgroundImageFix"/>
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+          <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_2719_19242"/>
+          <feOffset dy="8"/>
+          <feGaussianBlur stdDeviation="4"/>
+          <feComposite in2="hardAlpha" operator="out"/>
+          <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0"/>
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2719_19242"/>
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+          <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_2719_19242"/>
+          <feOffset dy="20"/>
+          <feGaussianBlur stdDeviation="12"/>
+          <feComposite in2="hardAlpha" operator="out"/>
+          <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0"/>
+          <feBlend mode="normal" in2="effect1_dropShadow_2719_19242" result="effect2_dropShadow_2719_19242"/>
+          <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2719_19242" result="shape"/>
+        </filter>
+        <linearGradient id="paint0_linear_2719_19242" x1="25.9429" y1="21.4865" x2="71.2" y2="64.0007" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#D0D5DD"/>
+          <stop offset="0.350715" stopColor="white" stopOpacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_2719_19242" x1="53.0286" y1="10.8571" x2="109.6" y2="64" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#D0D5DD"/>
+          <stop offset="0.350715" stopColor="white" stopOpacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_2719_19242" x1="92.4" y1="26.7992" x2="132" y2="63.9992" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#D0D5DD"/>
+          <stop offset="0.350715" stopColor="white" stopOpacity="0"/>
+        </linearGradient>
+      </defs>
+    </svg>);
+}

package/dist/components/FavoriteGames/FavoriteGames.client.d.ts

@@ -1,2 +1,2 @@
-import { FavoriteGamesProps } from './FavoriteGames';
+import type { FavoriteGamesProps } from './FavoriteGames';
 export declare function FavoriteGames__client(props: FavoriteGamesProps): import("react").JSX.Element | null;

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

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

@@ -0,0 +1,6 @@
+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/FavoriteGames/index.js

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

package/dist/components/GameLaunch/GameLaunch.jsx

@@ -0,0 +1,188 @@
+'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/GameLaunch/GameLaunchTrigger.d.ts

@@ -1,5 +1,5 @@
-import { HTMLArkProps } from '@ark-ui/react';
-import { FavoriteGame, Game } from '@opexa/portal-sdk-core';
+import { type HTMLArkProps } from '@ark-ui/react';
+import type { FavoriteGame, Game } from '@opexa/portal-sdk-core';
 export interface GameLaunchTriggerProps extends HTMLArkProps<'button'> {
     game: Game | FavoriteGame;
     asChild?: boolean;

package/dist/components/GameLaunch/GameLaunchTrigger.jsx

@@ -0,0 +1,53 @@
+'use client';
+import { ark } from '@ark-ui/react';
+import { useShallow } from 'zustand/shallow';
+import { useCreateGameSessionMutation, useGlobalStore, useSessionQuery, } from '../../client/hooks';
+import { toaster } from '../../client/utils';
+export function GameLaunchTrigger(props) {
+    const sessionQuery = useSessionQuery();
+    const createGameSessionMutation = useCreateGameSessionMutation();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        gameLaunch: ctx.gameLaunch,
+    })));
+    const disabled = sessionQuery.data?.status === 'unauthenticated'
+        ? false
+        : globalStore.gameLaunch.details.status !== 'WAITING'
+            ? true
+            : props.disabled;
+    return (<ark.button type="button" {...props} onClick={async (e) => {
+            props.onClick?.(e);
+            if (sessionQuery.data?.status === 'unauthenticated') {
+                return globalStore.signIn.setOpen(true);
+            }
+            globalStore.gameLaunch.setDetails({
+                game: props.game,
+                status: 'LOADING',
+                session: null,
+            });
+            try {
+                const session = await createGameSessionMutation.mutateAsync(props.game);
+                globalStore.gameLaunch.setDetails({
+                    game: props.game,
+                    session,
+                    status: 'PLAYING',
+                });
+            }
+            catch (error) {
+                globalStore.gameLaunch.setDetails({
+                    game: props.game,
+                    session: null,
+                    status: 'FAILED',
+                });
+                toaster.error({
+                    description: error instanceof Error ? error.message : 'Failed to launch game',
+                });
+            }
+        }} disabled={disabled} data-state={sessionQuery.data?.status === 'unauthenticated'
+            ? globalStore.signIn.open
+                ? 'open'
+                : 'closed'
+            : globalStore.gameLaunch.details.status === 'WAITING'
+                ? 'closed'
+                : 'open'}/>);
+}

package/dist/components/GameLaunch/index.js

@@ -0,0 +1,2 @@
+export * from './GameLaunch';
+export * from './GameLaunchTrigger';

package/dist/components/GameProviders/GameProviders.d.ts

@@ -1,4 +1,4 @@
-import { GameProviderData } from '../../types';
+import type { GameProviderData } from '../../types';
 export interface GameProvidersProps {
     gameProviders: GameProviderData[];
     heading?: string;

package/dist/components/GameProviders/GameProviders.jsx

@@ -0,0 +1,60 @@
+'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/GameProviders/index.js

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

package/dist/components/Games/Games.client.d.ts

@@ -1,2 +1,2 @@
-import { GamesProps } from './Games';
+import type { GamesProps } from './Games';
 export declare function Games__client(props: GamesProps): import("react").JSX.Element;