@opexa/portal-components 0.0.383 → 0.0.385
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/JackpotsList/JackpotsList.d.ts +2 -0
- package/dist/components/Jackpots/JackpotsList/JackpotsListItemDesktop.js +3 -1
- package/dist/components/Jackpots/JackpotsList/JackpotsListItemMobile.js +3 -1
- package/dist/components/Jackpots/JackpotsList/JackpotsListItemRules.d.ts +7 -1
- package/dist/components/Jackpots/JackpotsList/JackpotsListItemRules.js +6 -1
- package/package.json +1 -1
|
@@ -22,6 +22,8 @@ export interface ClassNameEntries {
|
|
|
22
22
|
recentPayoutsTableHeadRow?: string;
|
|
23
23
|
recentPayoutsTableBodyRow?: string;
|
|
24
24
|
recentPayoutsTableBodyData?: string;
|
|
25
|
+
recentPayoutsHeading?: string;
|
|
26
|
+
recentPayoutsJackpotRulesButton?: string;
|
|
25
27
|
}
|
|
26
28
|
interface StyleEntries {
|
|
27
29
|
root?: CSSProperties;
|
|
@@ -81,7 +81,9 @@ export function JackpotsListItemDesktop({ animate = true, customJackpotChestImag
|
|
|
81
81
|
currency: localeInfo.currency.code,
|
|
82
82
|
minDecimalPlaces: 2,
|
|
83
83
|
maxDecimalPlaces: 2,
|
|
84
|
-
}) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "firstPlace", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })) })] }) }) }), _jsx(ProgressBar, {})] }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className:
|
|
84
|
+
}) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "firstPlace", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })) })] }) }) }), _jsx(ProgressBar, {})] }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: twMerge('font-semibold text-lg text-text-primary-900', className?.recentPayoutsHeading), children: jackpotPayouts.length ? 'Recent Payouts' : 'Starting soon!' })] }), _jsx(JackpotsListItemRules, { className: {
|
|
85
|
+
button: className?.recentPayoutsJackpotRulesButton,
|
|
86
|
+
} })] }), _jsx(RecentPayoutsTable, {})] }), isPayingOut && animate && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute top-0 right-0 rounded-2xl') }))] }), Boolean(filteredGameProviders.length) && (_jsx(JackpotsListItemGameProviders, { gameProviders: filteredGameProviders }))] }));
|
|
85
87
|
}
|
|
86
88
|
function getPercentage(value, total) {
|
|
87
89
|
const v = parseDecimal(value, 0);
|
|
@@ -114,5 +114,7 @@ export function JackpotsListItemMobile({ animate = true, customJackpotChestImage
|
|
|
114
114
|
currency: localeInfo.currency.code,
|
|
115
115
|
minDecimalPlaces: 2,
|
|
116
116
|
maxDecimalPlaces: 2,
|
|
117
|
-
}) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })) }), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }), isPayingOut && animate && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute top-0 right-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:9.375rem]') }))] }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className:
|
|
117
|
+
}) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })) }), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }), isPayingOut && animate && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute top-0 right-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:9.375rem]') }))] }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className: twMerge('font-semibold text-lg text-text-primary-900', className?.recentPayoutsHeading), children: jackpotPayouts.length ? 'Recent payouts' : 'Starting soon!' }) }), _jsx(JackpotsListItemRules, { className: {
|
|
118
|
+
button: className?.recentPayoutsJackpotRulesButton,
|
|
119
|
+
} })] }), _jsx(RecentPayoutsTable, {})] }), Boolean(filteredGameProviders.length) && (_jsx(JackpotsListItemGameProviders, { gameProviders: filteredGameProviders })), _jsx("div", { className: "m-3", children: _jsx(Button, { variant: "outline", className: twMerge('px-3.5 py-2.5 text-sm', !isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["Hide", _jsx(ArrowNarrowUpIcon, { className: "size-5" })] }) }) })] }))] }));
|
|
118
120
|
}
|
|
@@ -1,2 +1,8 @@
|
|
|
1
1
|
import type { PropsWithChildren } from 'react';
|
|
2
|
-
export
|
|
2
|
+
export interface ClassNameEntries {
|
|
3
|
+
root?: string;
|
|
4
|
+
button?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare function JackpotsListItemRules(props: PropsWithChildren<{
|
|
7
|
+
className?: string | ClassNameEntries;
|
|
8
|
+
}>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,6 +5,11 @@ import { Dialog } from '../../../ui/Dialog/index.js';
|
|
|
5
5
|
import { Portal } from '../../../ui/Portal/index.js';
|
|
6
6
|
import { useJackpotsListItemContext } from './JackpotsListContext.js';
|
|
7
7
|
export function JackpotsListItemRules(props) {
|
|
8
|
+
const classNames = typeof props.className === 'string'
|
|
9
|
+
? { root: props.className }
|
|
10
|
+
: (props.className ?? {});
|
|
8
11
|
const jackpot = useJackpotsListItemContext();
|
|
9
|
-
return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? (_jsx("button", { type: "button", className:
|
|
12
|
+
return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? (_jsx("button", { type: "button", className: classNames.button ??
|
|
13
|
+
'flex font-semibold text-button-tertiary-fg text-sm', children: "Jackpot Rules" })) }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: classNames.root ??
|
|
14
|
+
'mx-auto h-full w-full items-start overflow-y-auto lg:h-auto lg:w-[640px] lg:rounded-xl', children: [_jsxs("div", { className: "p-3xl", children: [_jsxs("div", { className: "mb-3 flex justify-between", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg border border-border-primary bg-bg-tertiary", children: _jsx(Flag06Icon, { className: "size-full p-3 text-text-tertiary-600" }) }), _jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: "Jackpot Rules" }), _jsx("div", { className: "mt-1 text-sm text-text-tertiary-600", children: "Terms and Conditions" })] }), _jsx("div", { className: "border-gray-800 border-t-1 pb-3", children: _jsx("div", { dangerouslySetInnerHTML: { __html: jackpot.description }, className: "px-3xl py-3" }) })] }) })] })] }));
|
|
10
15
|
}
|