@opexa/portal-components 0.1.38 → 0.1.39
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.
|
@@ -15,13 +15,11 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
|
15
15
|
import { GAME_PROVIDER_DATA, GAME_TYPE_DATA } from '../../constants/index.js';
|
|
16
16
|
import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
|
|
17
17
|
import { XIcon } from '../../icons/XIcon.js';
|
|
18
|
-
import
|
|
19
|
-
import bingoImg from '../../images/game-types/bingo.png';
|
|
18
|
+
import fishingImg from '../../images/game-types/fishing.png';
|
|
20
19
|
import liveImg from '../../images/game-types/live.png';
|
|
21
20
|
import numericImg from '../../images/game-types/numeric.png';
|
|
22
21
|
import slotsImg from '../../images/game-types/slots.png';
|
|
23
|
-
import
|
|
24
|
-
import sportsImg from '../../images/game-types/sports.png';
|
|
22
|
+
import tableImg from '../../images/game-types/table.png';
|
|
25
23
|
import RainbowballImg from '../../images/rainbow-ball-online.webp';
|
|
26
24
|
import { Button } from '../../ui/Button/index.js';
|
|
27
25
|
import { Dialog } from '../../ui/Dialog/index.js';
|
|
@@ -53,20 +51,21 @@ export function Search(props) {
|
|
|
53
51
|
.filter((provider) => {
|
|
54
52
|
return lookup(provider.name, search) || lookup(provider.slug, search);
|
|
55
53
|
});
|
|
54
|
+
const defaultGameTypeImages = {
|
|
55
|
+
SLOTS: slotsImg,
|
|
56
|
+
LIVE: liveImg,
|
|
57
|
+
NUMERIC: numericImg,
|
|
58
|
+
FISHING: fishingImg,
|
|
59
|
+
TABLE: tableImg,
|
|
60
|
+
};
|
|
56
61
|
const gameTypesFiltered = props.gameTypes
|
|
57
62
|
.map((type) => GAME_TYPE_DATA[type])
|
|
58
63
|
.filter((type) => {
|
|
59
64
|
return lookup(type.name, search) || lookup(type.slug, search);
|
|
65
|
+
})
|
|
66
|
+
.filter((type) => {
|
|
67
|
+
return props.gameTypeImages?.[type.id] ?? defaultGameTypeImages[type.id];
|
|
60
68
|
});
|
|
61
|
-
const defaultGameTypeImages = {
|
|
62
|
-
ARCADE: arcadeImg,
|
|
63
|
-
BINGO: bingoImg,
|
|
64
|
-
LIVE: liveImg,
|
|
65
|
-
NUMERIC: numericImg,
|
|
66
|
-
SLOTS: slotsImg,
|
|
67
|
-
SPECIALTY: specialtyImg,
|
|
68
|
-
SPORTS: sportsImg,
|
|
69
|
-
};
|
|
70
69
|
const gamesQuery = useGamesQuery({
|
|
71
70
|
first: 18,
|
|
72
71
|
search: gameProviders.length > 0 ? undefined : search,
|
|
@@ -147,9 +146,8 @@ export function Search(props) {
|
|
|
147
146
|
}, children: "Clear" }) })] }) }), _jsx("div", { className: "flex max-h-[85dvh] min-h-0 flex-1 flex-col", children: _jsx("div", { className: "mt-2xl p-xl pb-3xl lg:mt-2 lg:max-h-[41rem] lg:overflow-y-auto lg:rounded-xl lg:border lg:border-border-primary lg:bg-bg-primary", children: search.length <= 0 ? (_jsx(Alert, { message: "Search for your favorite game, provider, or game type." })) : search.length === 1 ? (_jsx(Alert, { message: "Search requires at least 2 characters." })) : (_jsxs(_Fragment, { children: [empty && _jsx(Alert, { message: "No results found" }), !empty && (_jsxs(_Fragment, { children: [gameTypesFiltered.length > 0 &&
|
|
148
147
|
featureFlag.enabled && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-semibold text-lg", children: "Type" }), _jsx("div", { className: "mt-3.5 mb-3xl grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameTypesFiltered.map((type) => (_jsx(Link, { href: viewGameTypeUrl(type), "aria-label": `View ${type.name} games`, className: twMerge('flex h-14 w-full items-center rounded-md bg-bg-primary-alt', classNames.gameTypeThumbnailRoot), onClick: () => {
|
|
149
148
|
globalStore.search.setOpen(false);
|
|
150
|
-
}, children: _jsx(Image, { src: props.gameTypeImages?.[type.id] ??
|
|
151
|
-
defaultGameTypeImages[type.id]
|
|
152
|
-
'', alt: "", width: 100, height: 50, className: twMerge('mx-auto h-auto w-full', classNames.gameTypeThumbnailName) }) }, type.id))) })] })), gameProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-semibold text-lg", children: "Providers" }), _jsx("div", { className: "mt-3.5 mb-3xl grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), "aria-label": `View ${provider.name} games`, className: twMerge('flex h-14 w-full items-center rounded-md bg-brand-800', classNames.providerThumbnailRoot), onClick: () => {
|
|
149
|
+
}, children: _jsx(Image, { src: (props.gameTypeImages?.[type.id] ??
|
|
150
|
+
defaultGameTypeImages[type.id]), alt: "", width: 100, height: 50, className: twMerge('mx-auto h-auto w-full', classNames.gameTypeThumbnailName) }) }, type.id))) })] })), gameProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-semibold text-lg", children: "Providers" }), _jsx("div", { className: "mt-3.5 mb-3xl grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), "aria-label": `View ${provider.name} games`, className: twMerge('flex h-14 w-full items-center rounded-md bg-brand-800', classNames.providerThumbnailRoot), onClick: () => {
|
|
153
151
|
globalStore.search.setOpen(false);
|
|
154
152
|
}, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ??
|
|
155
153
|
provider.logo, alt: "", width: 100, height: 50, className: twMerge('mx-auto h-auto w-full', classNames.providerThumbnailImage) }) }, provider.id))) })] })), games.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-semibold text-lg", children: "Games" }), _jsx("div", { className: twMerge('mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5', classNames.gameSearchResult), children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: isBypass, game: game, className: twMerge('block w-full shadow-sm', classNames.gameThumbnailRoot), onClick: () => {
|
|
Binary file
|
|
Binary file
|