@opexa/portal-components 0.0.690 → 0.0.692
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Games/Game.js +18 -6
- package/dist/components/Games/GamesCarousel.client.d.ts +3 -0
- package/dist/components/Games/GamesCarousel.client.js +11 -11
- package/dist/components/Games/GamesList.client.d.ts +3 -0
- package/dist/components/Games/GamesList.client.js +9 -9
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { isString } from 'lodash-es';
|
|
3
|
-
import Image from 'next/image';
|
|
3
|
+
import Image, {} from 'next/image';
|
|
4
|
+
import { useState } from 'react';
|
|
4
5
|
import { twMerge } from 'tailwind-merge';
|
|
5
6
|
import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
|
|
6
7
|
import { useFavoriteGamesQuery } from '../../client/hooks/useFavoriteGamesQuery.js';
|
|
@@ -15,7 +16,7 @@ import { GameLaunchTrigger } from '../GameLaunch/index.js';
|
|
|
15
16
|
import { BadgeNew } from './BadgeNew.js';
|
|
16
17
|
import { BadgePopular } from './BadgePopular.js';
|
|
17
18
|
import { BadgeTop } from './BadgeTop.js';
|
|
18
|
-
import { useGameContext } from './GamesContext.js';
|
|
19
|
+
import { useGameContext, useGamesPropsContext } from './GamesContext.js';
|
|
19
20
|
export function Game(props) {
|
|
20
21
|
const game = useGameContext();
|
|
21
22
|
const featureFlag = useFeatureFlag();
|
|
@@ -76,8 +77,19 @@ export function Game(props) {
|
|
|
76
77
|
: 'Mark as favorite game', "aria-disabled": markGameAsFavoriteMutation.isPending ||
|
|
77
78
|
unmarkGameAsFavoriteMutation.isPending, className: "absolute top-2 right-2 flex size-9 items-center justify-center rounded-xs bg-black/65 opacity-100 blur-[0.5px] transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100", children: _jsx(Star01Icon, { className: twMerge('size-5 text-white transition-colors duration-200 hover:text-yellow-400', markedAsFavorite
|
|
78
79
|
? 'fill-yellow-400 text-yellow-400'
|
|
79
|
-
: 'text-white') }) })), _jsx(
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
80
|
+
: 'text-white') }) })), _jsx(GameImage, {}), _jsx("span", { className: twMerge('block w-full truncate rounded-b-md bg-bg-tertiary px-2 py-3.5 text-center font-semibold text-text-primary-brand text-xs', classNames.title), children: game.name })] }));
|
|
81
|
+
}
|
|
82
|
+
function GameImage() {
|
|
83
|
+
const game = useGameContext();
|
|
84
|
+
const props = useGamesPropsContext();
|
|
85
|
+
const [imgSrc, setImgSrc] = useState(getGameImageUrl({
|
|
86
|
+
reference: game.reference,
|
|
87
|
+
provider: game.provider,
|
|
88
|
+
}));
|
|
89
|
+
return (_jsx(Image, { src: imgSrc, alt: game.name, width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-contain", onError: () => {
|
|
90
|
+
const fallbackThumbnail = props.fallbackThumbnails?.[game.provider];
|
|
91
|
+
if (fallbackThumbnail) {
|
|
92
|
+
setImgSrc(fallbackThumbnail);
|
|
93
|
+
}
|
|
94
|
+
} }));
|
|
83
95
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import type { ImageProps } from 'next/image';
|
|
1
2
|
import { type ReactNode } from 'react';
|
|
2
3
|
import type { GamesInput__Next } from '../../services/cmsPortal';
|
|
4
|
+
import type { GameProvider } from '../../types';
|
|
3
5
|
interface ClassNameEntries {
|
|
4
6
|
root?: string;
|
|
5
7
|
thumbnailRoot?: string;
|
|
@@ -21,6 +23,7 @@ export interface GamesCarouselProps {
|
|
|
21
23
|
search?: string;
|
|
22
24
|
sort?: GamesInput__Next['sort'];
|
|
23
25
|
className?: string | ClassNameEntries;
|
|
26
|
+
fallbackThumbnails?: Partial<Record<GameProvider, ImageProps['src']>>;
|
|
24
27
|
}
|
|
25
28
|
export declare function GamesCarousel__client(props: GamesCarouselProps): import("react/jsx-runtime").JSX.Element;
|
|
26
29
|
export {};
|
|
@@ -14,7 +14,7 @@ import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
|
|
|
14
14
|
import { Button } from '../../ui/Button/index.js';
|
|
15
15
|
import { Empty } from '../shared/Empty.js';
|
|
16
16
|
import { Game } from './Game.js';
|
|
17
|
-
import { GameContext } from './GamesContext.js';
|
|
17
|
+
import { GameContext, GamesPropsContext } from './GamesContext.js';
|
|
18
18
|
export function GamesCarousel__client(props) {
|
|
19
19
|
const numOfRows = props.numOfRows ?? 1;
|
|
20
20
|
const gamesQuery = useGamesQuery({
|
|
@@ -57,14 +57,14 @@ export function GamesCarousel__client(props) {
|
|
|
57
57
|
const classNames = isString(props.className)
|
|
58
58
|
? { root: props.className }
|
|
59
59
|
: (props.className ?? {});
|
|
60
|
-
return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Games' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/games', className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled && !gamesQuery.hasNextPage
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
60
|
+
return (_jsx(GamesPropsContext, { value: props, children: _jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Games' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/games', className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled && !gamesQuery.hasNextPage
|
|
61
|
+
? true
|
|
62
|
+
: gamesQuery.isFetchingNextPage, "aria-label": "Next", children: gamesQuery.isFetchingNextPage ? (_jsx(SpinnerIcon, { className: "size-5" })) : (_jsx(ArrowRightIcon, { className: "size-5" })) })] })] })] }), games.length <= 0 && (_jsx(Empty, { icon: GamingPad01Icon, title: "No games", message: "No game is currently available. Please check back later", className: "mt-lg" })), games.length >= 1 && (_jsx("div", { ref: emblaRef, className: "relative mt-lg overflow-hidden", children: _jsx("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
|
|
63
|
+
? 'grid-rows-3'
|
|
64
|
+
: numOfRows === 2
|
|
65
|
+
? 'grid-rows-2'
|
|
66
|
+
: 'grid-rows-1'), children: games.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, className: {
|
|
67
|
+
root: classNames.thumbnailRoot,
|
|
68
|
+
title: classNames.thumbnailTitle,
|
|
69
|
+
} }) }, game.id))) }) }))] }) }));
|
|
70
70
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import type { ImageProps } from 'next/image';
|
|
1
2
|
import type { ReactNode } from 'react';
|
|
2
3
|
import type { GamesInput__Next } from '../../services/cmsPortal';
|
|
4
|
+
import type { GameProvider } from '../../types';
|
|
3
5
|
interface ClassNameEntries {
|
|
4
6
|
root?: string;
|
|
5
7
|
thumbnailRoot?: string;
|
|
@@ -21,6 +23,7 @@ export interface GamesListProps {
|
|
|
21
23
|
viewGameProvidersUrl?: string;
|
|
22
24
|
className?: string | ClassNameEntries;
|
|
23
25
|
pagination?: 'lazy-load' | 'paginated';
|
|
26
|
+
fallbackThumbnails?: Partial<Record<GameProvider, ImageProps['src']>>;
|
|
24
27
|
}
|
|
25
28
|
export declare function GamesList__client(props: GamesListProps): import("react/jsx-runtime").JSX.Element;
|
|
26
29
|
export {};
|
|
@@ -13,7 +13,7 @@ import { Button } from '../../ui/Button/index.js';
|
|
|
13
13
|
import { Progress } from '../../ui/Progress/index.js';
|
|
14
14
|
import { Empty } from '../shared/Empty.js';
|
|
15
15
|
import { Game } from './Game.js';
|
|
16
|
-
import { GameContext } from './GamesContext.js';
|
|
16
|
+
import { GameContext, GamesPropsContext } from './GamesContext.js';
|
|
17
17
|
import { GamesPagination } from './GamesPagination.js';
|
|
18
18
|
export function GamesList__client(props) {
|
|
19
19
|
const { pagination = 'lazy-load' } = props;
|
|
@@ -46,12 +46,12 @@ export function GamesList__client(props) {
|
|
|
46
46
|
const classNames = isString(props.className)
|
|
47
47
|
? { root: props.className }
|
|
48
48
|
: (props.className ?? {});
|
|
49
|
-
return (_jsxs("div", { className: classNames.root, id: "games-list", children: [_jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center lg:justify-between", children: [_jsx("h2", { className: "order-2 mt-4xl font-semibold text-lg lg:order-none lg:mt-0", children: props.heading ?? 'Games' }), props.viewGameProvidersUrl && (_jsxs(Link, { href: props.viewGameProvidersUrl, className: "order-1 flex items-center gap-sm font-semibold text-button-tertiary-fg text-lg lg:order-none lg:text-sm", children: [_jsx(ChevronLeftIcon, { className: "size-5" }), "Back to all Providers"] }))] }), totalRows <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : GamingPad01Icon, title: loading ? 'Just a moment' : 'No games', message: loading
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
49
|
+
return (_jsx(GamesPropsContext, { value: props, children: _jsxs("div", { className: classNames.root, id: "games-list", children: [_jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center lg:justify-between", children: [_jsx("h2", { className: "order-2 mt-4xl font-semibold text-lg lg:order-none lg:mt-0", children: props.heading ?? 'Games' }), props.viewGameProvidersUrl && (_jsxs(Link, { href: props.viewGameProvidersUrl, className: "order-1 flex items-center gap-sm font-semibold text-button-tertiary-fg text-lg lg:order-none lg:text-sm", children: [_jsx(ChevronLeftIcon, { className: "size-5" }), "Back to all Providers"] }))] }), totalRows <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : GamingPad01Icon, title: loading ? 'Just a moment' : 'No games', message: loading
|
|
50
|
+
? 'Fetching latest games...'
|
|
51
|
+
: 'No game is currently available. Please check back later', className: "mt-lg" })), totalRows >= 1 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: (pagination === 'paginated' ? paginatedRows : availableRows).map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, className: {
|
|
52
|
+
root: classNames.thumbnailRoot,
|
|
53
|
+
title: classNames.thumbnailTitle,
|
|
54
|
+
} }) }, game.id))) }), _jsx("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: pagination === 'paginated' && totalRows > 0 ? (_jsx(GamesPagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (page) => {
|
|
55
|
+
setCurrentPage(page);
|
|
56
|
+
} })) : (_jsxs(_Fragment, { children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: twMerge('w-[12.5rem]', classNames.progressRoot), children: _jsx(Progress.Track, { className: twMerge('bg-bg-tertiary', classNames.progressTrack), children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "mt-md text-button-tertiary-fg text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: twMerge('mt-lg', classNames.loadMoreButton), children: "Load More" }))] })) })] }))] }) }));
|
|
57
57
|
}
|