@opexa/portal-components 0.0.731 → 0.0.732
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/Jackpots/Jackpots.js +2 -2
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarousel.d.ts +2 -1
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarousel.js +5 -3
- package/dist/components/Jackpots/JackpotsCarouselNext/JackpotsCarousel.js +3 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { prefetchJackpotsNextQuery } from '../../server/utils/prefetchJackpotsNextQuery.js';
|
|
3
3
|
import { prefetchJackpotsQuery } from '../../server/utils/prefetchJackpotsQuery.js';
|
|
4
|
-
import {
|
|
4
|
+
import { JackpotsCarousels, } from './JackpotsCarousel/JackpotsCarousel.js';
|
|
5
5
|
import { JackpotsList, } from './JackpotsList/JackpotsList.js';
|
|
6
6
|
export async function Jackpots(props) {
|
|
7
7
|
await prefetchJackpotsQuery({
|
|
@@ -29,7 +29,7 @@ export async function Jackpots(props) {
|
|
|
29
29
|
},
|
|
30
30
|
});
|
|
31
31
|
if (props.layout === 'carousel') {
|
|
32
|
-
return _jsx(
|
|
32
|
+
return _jsx(JackpotsCarousels, { ...props });
|
|
33
33
|
}
|
|
34
34
|
else {
|
|
35
35
|
return _jsx(JackpotsList, { ...props });
|
|
@@ -4,10 +4,10 @@ export interface ClassNameEntries {
|
|
|
4
4
|
root?: string;
|
|
5
5
|
itemRoot?: string;
|
|
6
6
|
jackpotAmountRoot?: string;
|
|
7
|
-
latestPayoutRoot?: string;
|
|
8
7
|
jackpotBadgeRoot?: string;
|
|
9
8
|
jackpotTurnoverRoot?: string;
|
|
10
9
|
jackpotTurnoverIcon?: string;
|
|
10
|
+
latestPayoutRoot?: string;
|
|
11
11
|
latestPayoutBadgeRoot?: string;
|
|
12
12
|
latestPayoutBadgeIcon?: string;
|
|
13
13
|
latestPayoutAmount?: string;
|
|
@@ -84,4 +84,5 @@ export interface JackpotsCarouselProps {
|
|
|
84
84
|
jackpotProfileShape?: 'oval' | 'star';
|
|
85
85
|
}
|
|
86
86
|
export declare function JackpotsCarousel({ style, className, ...props }: JackpotsCarouselProps): import("react/jsx-runtime").JSX.Element | null;
|
|
87
|
+
export declare function JackpotsCarousels(props: JackpotsCarouselProps): import("react/jsx-runtime").JSX.Element;
|
|
87
88
|
export {};
|
|
@@ -16,7 +16,6 @@ import { JackpotsCarouselNext } from '../JackpotsCarouselNext/JackpotsCarousel.j
|
|
|
16
16
|
import { JackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
|
|
17
17
|
import { JackpotsCarouselItem } from './JackpotsCarouselItem.js';
|
|
18
18
|
export function JackpotsCarousel({ style, className, ...props }) {
|
|
19
|
-
const future = useFeatureFlag();
|
|
20
19
|
const [emblaRef, emblaApi] = useEmblaCarousel({
|
|
21
20
|
align: 'start',
|
|
22
21
|
slidesToScroll: 1,
|
|
@@ -60,7 +59,6 @@ export function JackpotsCarousel({ style, className, ...props }) {
|
|
|
60
59
|
},
|
|
61
60
|
}, {
|
|
62
61
|
refetchInterval: inView ? 10_000 : false,
|
|
63
|
-
enabled: !future.enabled,
|
|
64
62
|
});
|
|
65
63
|
const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
|
|
66
64
|
if (jackpots.length <= 0)
|
|
@@ -71,7 +69,11 @@ export function JackpotsCarousel({ style, className, ...props }) {
|
|
|
71
69
|
const classNames = isString(className)
|
|
72
70
|
? { root: className }
|
|
73
71
|
: (className ?? {});
|
|
72
|
+
return (_jsxs("div", { ref: ref, style: styles.root, className: classNames.root, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-semibold text-lg", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/jackpots', 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, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] })] }), _jsx("div", { className: "relative mt-lg overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: jackpots.map((jackpot, index) => (_jsx(JackpotsCarouselItemContext, { value: jackpot, children: _jsx(JackpotsCarouselItem, { style: styles.itemRoot, className: classNames, viewAllUrl: props.viewAllUrl, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier }) }, index))) }) })] }));
|
|
73
|
+
}
|
|
74
|
+
export function JackpotsCarousels(props) {
|
|
75
|
+
const future = useFeatureFlag();
|
|
74
76
|
if (future.enabled)
|
|
75
77
|
return _jsx(JackpotsCarouselNext, { ...props });
|
|
76
|
-
return
|
|
78
|
+
return _jsx(JackpotsCarousel, { ...props });
|
|
77
79
|
}
|
|
@@ -69,8 +69,9 @@ export function JackpotsCarouselNext({ style, className, ...props }) {
|
|
|
69
69
|
? { root: className }
|
|
70
70
|
: (className ?? {});
|
|
71
71
|
return (_jsxs("div", { ref: ref, style: styles.root, className: classNames.root, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-semibold text-lg", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/jackpots', 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, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] })] }), _jsx("div", { className: "relative mt-lg overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: jackpots.map((jackpot, index) => {
|
|
72
|
-
if (jackpot.stages?.length)
|
|
73
|
-
return (_jsx(JackpotsCarouselItemContext, { value: jackpot, children: _jsx(JackpotsCarouselStageItem, { style: styles.itemRoot, className: classNames,
|
|
72
|
+
if (jackpot.stages?.length) {
|
|
73
|
+
return (_jsx(JackpotsCarouselItemContext, { value: jackpot, children: _jsx(JackpotsCarouselStageItem, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, customJackpotStageChest: props.customJackpotStageChest, medalImage: props.medalImage }) }, index));
|
|
74
|
+
}
|
|
74
75
|
return (_jsx(JackpotsCarouselItemContext, { value: jackpot, children: _jsx(JackpotsCarouselItem, { style: styles.itemRoot, className: classNames, viewAllUrl: props.viewAllUrl, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier }) }, index));
|
|
75
76
|
}) }) })] }));
|
|
76
77
|
}
|