@opexa/portal-components 0.0.300 → 0.0.301
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.
|
@@ -26,5 +26,6 @@ export interface GameProvidersCarouselProps {
|
|
|
26
26
|
viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
|
|
27
27
|
gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
|
|
28
28
|
className?: string | ClassNameEntries;
|
|
29
|
+
futureGameProviders?: GameProvider[];
|
|
29
30
|
}
|
|
30
31
|
export declare function GameProvidersCarousel(props: GameProvidersCarouselProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,6 +6,7 @@ import Image, {} from 'next/image';
|
|
|
6
6
|
import Link from 'next/link';
|
|
7
7
|
import { useCallback, useEffect, useState } from 'react';
|
|
8
8
|
import { twMerge } from 'tailwind-merge';
|
|
9
|
+
import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
|
|
9
10
|
import { GAME_PROVIDER_DATA } from '../../constants/index.js';
|
|
10
11
|
import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
|
|
11
12
|
import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
|
|
@@ -47,9 +48,13 @@ export function GameProvidersCarousel(props) {
|
|
|
47
48
|
.replace(':slug', data?.slug)
|
|
48
49
|
: `/providers/${data.slug}`;
|
|
49
50
|
};
|
|
50
|
-
const
|
|
51
|
+
const { enabled } = useFeatureFlag();
|
|
52
|
+
const combinedProviders = enabled
|
|
53
|
+
? [...props.gameProviders, ...(props.futureGameProviders ?? [])]
|
|
54
|
+
: props.gameProviders;
|
|
55
|
+
const gameProviders = combinedProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
|
|
51
56
|
const classNames = isString(props.className)
|
|
52
57
|
? { root: props.className }
|
|
53
58
|
: (props.className ?? {});
|
|
54
|
-
return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center
|
|
59
|
+
return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "gap-xl flex items-center justify-center", children: [_jsxs(Link, { href: viewAllUrl, className: "text-button-tertiary-fg gap-sm flex text-sm font-semibold", 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, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), _jsx("div", { ref: emblaRef, className: "mt-lg relative lg:overflow-hidden", children: _jsx("div", { className: "gap-sm lg:gap-md grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 lg:auto-cols-[calc((100%-(0.5rem*5))/6)]", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-brand-800 flex h-full w-full items-center overflow-hidden rounded-md lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }) })] }));
|
|
55
60
|
}
|
|
@@ -22,5 +22,6 @@ export interface GameProvidersListProps {
|
|
|
22
22
|
viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
|
|
23
23
|
gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
|
|
24
24
|
className?: string | ClassNameEntries;
|
|
25
|
+
futureGameProviders?: GameProvider[];
|
|
25
26
|
}
|
|
26
27
|
export declare function GameProvidersList(props: GameProvidersListProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,6 +5,7 @@ import Image, {} from 'next/image';
|
|
|
5
5
|
import Link from 'next/link';
|
|
6
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
7
|
import { useChunk } from '../../client/hooks/useChunk.js';
|
|
8
|
+
import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
|
|
8
9
|
import { GAME_PROVIDER_DATA } from '../../constants/index.js';
|
|
9
10
|
import { Button } from '../../ui/Button/index.js';
|
|
10
11
|
import { Progress } from '../../ui/Progress/index.js';
|
|
@@ -17,10 +18,14 @@ export function GameProvidersList(props) {
|
|
|
17
18
|
.replace(':slug', data.slug)
|
|
18
19
|
: `/providers/${data.slug}`;
|
|
19
20
|
};
|
|
20
|
-
const
|
|
21
|
+
const { enabled } = useFeatureFlag();
|
|
22
|
+
const combinedProviders = enabled
|
|
23
|
+
? [...props.gameProviders, ...(props.futureGameProviders ?? [])]
|
|
24
|
+
: props.gameProviders;
|
|
25
|
+
const gameProviders = combinedProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
|
|
21
26
|
const classNames = isString(props.className)
|
|
22
27
|
? { root: props.className }
|
|
23
28
|
: (props.className ?? {});
|
|
24
29
|
const chunked = useChunk(gameProviders, 18);
|
|
25
|
-
return (_jsxs("div", { className: classNames.root, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: chunked.loadedItems.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-brand-800 flex h-full w-full items-center overflow-hidden rounded-md lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center
|
|
30
|
+
return (_jsxs("div", { className: classNames.root, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: chunked.loadedItems.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-brand-800 flex h-full w-full items-center overflow-hidden rounded-md lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }), _jsxs("div", { className: "mt-2xl lg:mt-3xl flex flex-col items-center", children: [_jsx(Progress.Root, { min: 0, max: chunked.totalItems, value: chunked.totalLoadedItems, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { className: "bg-bg-tertiary", children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${chunked.totalLoadedItems} of ${chunked.totalItems}` }), chunked.hasNext && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: chunked.next, className: "mt-lg", children: "Load More" }))] })] }));
|
|
26
31
|
}
|