@opexa/portal-components 0.0.27 → 0.0.28

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

@@ -0,0 +1,118 @@
+'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.d.ts

@@ -1,4 +1,4 @@
-import { GamesInput } from '@opexa/portal-sdk-core';
+import type { GamesInput } from '@opexa/portal-sdk-core';
 export interface GamesProps {
     /** @default "Games" */
     heading?: string;

package/dist/components/Games/Games.jsx

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

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

package/dist/components/GamesSearch/GamesSearch.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps } from 'next/image';
+import { type ImageProps } from 'next/image';
 interface GamesSearchProps {
     logo: ImageProps['src'];
 }

package/dist/components/GamesSearch/GamesSearch.jsx

@@ -0,0 +1,110 @@
+'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/GamesSearch/GamesSearchTrigger.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 export interface GamesSearchTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }

package/dist/components/GamesSearch/GamesSearchTrigger.jsx

@@ -0,0 +1,13 @@
+'use client';
+import { ark } from '@ark-ui/react';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks';
+export function GamesSearchTrigger(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        gamesSearch: ctx.gamesSearch,
+    })));
+    return (<ark.button type="button" {...props} onClick={(e) => {
+            globalStore.gamesSearch.setOpen(!globalStore.gamesSearch.open);
+            return props.onClick?.(e);
+        }} data-state={globalStore.gamesSearch.open ? 'open' : 'closed'}/>);
+}

package/dist/components/GamesSearch/index.js

@@ -0,0 +1,2 @@
+export * from './GamesSearch';
+export * from './GamesSearchTrigger';

package/dist/components/InfiniteScroll.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface InfiniteScrollProps {
     loader?: ReactNode;
     hasMore?: boolean;

package/dist/components/InfiniteScroll.jsx

@@ -0,0 +1,30 @@
+'use client';
+import { Fragment } from 'react';
+import { useBoolean, useDebounceCallback, useIntersectionObserver, } from 'usehooks-ts';
+export function InfiniteScroll(props) {
+    const { value: loading, setValue: setLoading } = useBoolean(false);
+    const loader = props.loader ?? null;
+    const hasMore = props.hasMore ?? false;
+    const loadMore = useDebounceCallback(async () => {
+        if (loading)
+            return;
+        if (!hasMore)
+            return;
+        setLoading(true);
+        await props.loadMore();
+        setLoading(false);
+    }, 300);
+    const [ref] = useIntersectionObserver({
+        onChange(isIntersecting) {
+            if (isIntersecting)
+                loadMore();
+        },
+    });
+    return (<Fragment>
+      {props.children}
+
+      <div ref={ref} role="presentation" style={props.style} className={props.className} hidden={!hasMore}>
+        {!!hasMore && <Fragment>{loader}</Fragment>}
+      </div>
+    </Fragment>);
+}

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

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

package/dist/components/JackpotCounter/JackpotCounter.client.jsx

@@ -0,0 +1,84 @@
+'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>);
+}

package/dist/components/JackpotCounter/JackpotCounter.jsx

@@ -0,0 +1,20 @@
+import { prefetchJackpotsQuery } from '../../server/utils';
+import { JackpotCounter__client } from './JackpotCounter.client';
+export async function JackpotCounter(props) {
+    await prefetchJackpotsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+            deleted: {
+                equal: false,
+            },
+        },
+        sort: {
+            cursor: 'POOL',
+            order: 'DESC',
+        },
+    });
+    return <JackpotCounter__client {...props}/>;
+}

package/dist/components/JackpotCounter/JackpotCounterItem.d.ts

@@ -1,4 +1,4 @@
-import { Jackpot } from '@opexa/portal-sdk-core';
+import type { Jackpot } from '@opexa/portal-sdk-core';
 export interface JackpotCounterCardProps {
     jackpot: Jackpot;
     className?: string;