@opexa/portal-components 0.0.47 → 0.0.49

package/dist/components/Games/BadgeNew.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function BadgeNew(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Games/BadgeNew.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BadgeNew(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "62", height: "63", viewBox: "0 0 62 63", fill: "none", ...props, children: [_jsx("g", { filter: "url(#filter0_d_17300_4274)", children: _jsx("path", { d: "M0 60V33.1103L33.1103 0H60L0 60Z", className: "fill-success-700" }) }), _jsxs("g", { filter: "url(#filter1_d_17300_4274)", children: [_jsx("path", { d: "M16.5726 25.4275L21.9063 30.7612L20.9323 31.7352L15.2548 30.6987L15.2157 30.7378L18.5727 34.0948L17.4451 35.2225L12.1113 29.8887L13.101 28.8991L18.7577 29.9512L18.8045 29.9044L15.4501 26.5499L16.5726 25.4275Z", className: "fill-white" }), _jsx("path", { d: "M22.838 29.8295L17.5043 24.4958L21.0983 20.9017L22.0281 21.8315L19.5617 24.2978L20.8327 25.5688L23.1141 23.2873L24.0438 24.2171L21.7624 26.4985L23.036 27.772L25.5127 25.2953L26.4425 26.2251L22.838 29.8295Z", className: "fill-white" }), _jsx("path", { d: "M28.5292 24.1383L21.6693 20.3307L22.9012 19.0989L27.4901 21.922L27.5343 21.8777L24.8024 17.1977L25.8571 16.1429L30.5424 18.8853L30.5893 18.8384L27.7583 14.2417L28.9902 13.0099L32.7977 19.8698L31.6987 20.9688L27.1958 18.4973L27.1541 18.5389L29.6282 23.0393L28.5292 24.1383Z", className: "fill-white" })] }), _jsxs("defs", { children: [_jsxs("filter", { id: "filter0_d_17300_4274", x: "-2", y: "-1", width: "64", height: "64", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dy: "1" }), _jsx("feGaussianBlur", { stdDeviation: "1" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.25 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_17300_4274" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_17300_4274", result: "shape" })] }), _jsxs("filter", { id: "filter1_d_17300_4274", x: "12.1113", y: "13.0099", width: "20.6865", height: "22.7125", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dy: "0.5" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_17300_4274" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_17300_4274", result: "shape" })] })] })] }));
+}

package/dist/components/Games/BadgePopular.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function BadgePopular(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Games/BadgePopular.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BadgePopular(props) {
+    return (_jsxs("svg", { width: "62", height: "63", viewBox: "0 0 62 63", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("g", { filter: "url(#filter0_d_17300_14907)", children: _jsx("path", { d: "M0 60V33.1103L33.1103 0H60L0 60Z", className: "fill-blue-dark-700" }) }), _jsxs("g", { filter: "url(#filter1_d_17300_14907)", children: [_jsx("path", { d: "M38.9607 13.7043L33.627 8.37061L35.7313 6.26628C36.1341 5.86348 36.5499 5.59175 36.9788 5.45112C37.4076 5.30701 37.8278 5.29138 38.2393 5.40424C38.6508 5.51362 39.0327 5.74454 39.3852 6.097C39.7394 6.45119 39.9677 6.8323 40.0701 7.24031C40.1708 7.64659 40.1439 8.06242 39.9894 8.4878C39.8366 8.91144 39.5553 9.32814 39.1456 9.73789L37.7366 11.1469L36.8303 10.2405L38.057 9.01388C38.2723 8.79859 38.4216 8.59024 38.5049 8.38884C38.5883 8.18743 38.6056 7.99297 38.557 7.80546C38.5101 7.61621 38.399 7.4339 38.2236 7.25854C38.0466 7.08145 37.8616 6.96772 37.6689 6.91737C37.4779 6.86528 37.2791 6.88005 37.0725 6.96165C36.8659 7.03978 36.6541 7.18736 36.4371 7.40439L35.6766 8.16486L40.0884 12.5766L38.9607 13.7043ZM39.4138 8.39665L43.1667 9.49829L41.9218 10.7432L38.1976 9.61289L39.4138 8.39665Z", className: "fill-white" }), _jsx("path", { d: "M34.3937 18.2711L33.1853 19.4795L29.6928 12.3045L31.1461 10.8512L38.3185 14.3463L37.1101 15.5547L31.6591 12.7759L31.6175 12.8175L34.3937 18.2711ZM32.2217 16.2501L35.0761 13.3957L35.9563 14.276L33.102 17.1303L32.2217 16.2501Z", className: "fill-white" }), _jsx("path", { d: "M29.1794 23.4875L23.8457 18.1538L24.9734 17.0261L29.3774 21.4301L31.664 19.1435L32.5937 20.0732L29.1794 23.4875Z", className: "fill-white" }), _jsx("path", { d: "M21.7867 20.2094L22.9144 19.0817L26.3782 22.5455C26.7671 22.9344 27.0145 23.3676 27.1204 23.8451C27.2281 24.3208 27.1977 24.8061 27.0293 25.3009C26.8591 25.794 26.5535 26.2611 26.1125 26.7021C25.6698 27.1448 25.2019 27.4512 24.7088 27.6214C24.214 27.7898 23.7287 27.8202 23.253 27.7125C22.7772 27.6049 22.3449 27.3566 21.956 26.9677L18.4922 23.5039L19.6199 22.3762L22.9873 25.7437C23.1905 25.9468 23.4153 26.0831 23.6618 26.1525C23.9101 26.2203 24.161 26.2176 24.4145 26.1447C24.668 26.0718 24.9032 25.9268 25.1203 25.7098C25.339 25.491 25.484 25.2558 25.5552 25.004C25.6281 24.7505 25.6299 24.5005 25.5604 24.254C25.4927 24.0057 25.3573 23.78 25.1541 23.5768L21.7867 20.2094Z", className: "fill-white" }), _jsx("path", { d: "M19.0798 33.5859L13.7461 28.2522L15.8504 26.1479C16.255 25.7433 16.6769 25.476 17.1161 25.3457C17.5537 25.2138 17.9834 25.2094 18.4053 25.3327C18.8272 25.4525 19.2152 25.6895 19.5694 26.0437C19.9236 26.3979 20.1598 26.7868 20.2778 27.2105C20.3959 27.6341 20.3855 28.0664 20.2466 28.5074C20.1094 28.9467 19.836 29.3712 19.4262 29.781L18.085 31.1222L17.1812 30.2185L18.3402 29.0595C18.5572 28.8425 18.6987 28.6264 18.7647 28.4111C18.8307 28.1923 18.8315 27.9813 18.7673 27.7782C18.7031 27.5716 18.5833 27.3806 18.4079 27.2052C18.2308 27.0281 18.0407 26.9092 17.8375 26.8484C17.6344 26.7842 17.4252 26.7868 17.2099 26.8563C16.9929 26.924 16.775 27.0672 16.5562 27.286L15.7957 28.0465L20.2075 32.4582L19.0798 33.5859Z", className: "fill-white" }), _jsx("path", { d: "M15.5748 31.7544C16.1564 32.336 16.541 32.9411 16.7285 33.5696C16.9178 34.1964 16.9308 34.8067 16.7676 35.4005C16.6044 35.9908 16.2875 36.5212 15.817 36.9918C15.343 37.4657 14.81 37.7835 14.2179 37.945C13.6259 38.1064 13.0164 38.0925 12.3897 37.9033C11.7629 37.714 11.1595 37.3295 10.5796 36.7496C9.99799 36.1679 9.61254 35.5637 9.42329 34.9369C9.23404 34.3101 9.22102 33.7016 9.38423 33.1113C9.5457 32.5192 9.86343 31.9862 10.3374 31.5122C10.8079 31.0417 11.3392 30.7257 11.9313 30.5642C12.5233 30.3993 13.1328 30.4114 13.7596 30.6007C14.3881 30.7882 14.9931 31.1728 15.5748 31.7544ZM14.4315 32.8977C14.0547 32.5209 13.6806 32.2596 13.309 32.1138C12.9392 31.9662 12.5859 31.9271 12.249 31.9966C11.9122 32.066 11.6075 32.2371 11.3349 32.5097C11.0623 32.7822 10.8913 33.087 10.8218 33.4238C10.7524 33.7606 10.7906 34.1148 10.9364 34.4864C11.084 34.8562 11.3462 35.2295 11.7229 35.6062C12.0997 35.983 12.473 36.2452 12.8428 36.3928C13.2144 36.5386 13.5686 36.5768 13.9054 36.5073C14.2422 36.4379 14.5469 36.2669 14.8195 35.9943C15.0921 35.7217 15.2631 35.417 15.3326 35.0802C15.402 34.7433 15.363 34.39 15.2154 34.0202C15.0695 33.6486 14.8082 33.2745 14.4315 32.8977Z", className: "fill-white" }), _jsx("path", { d: "M8.59154 44.071L3.25781 38.7373L5.36213 36.633C5.76668 36.2284 6.18858 35.9611 6.62785 35.8308C7.06539 35.6989 7.4951 35.6945 7.91701 35.8178C8.33892 35.9376 8.72697 36.1746 9.08116 36.5288C9.43535 36.883 9.67148 37.2719 9.78954 37.6956C9.90761 38.1192 9.89719 38.5515 9.75829 38.9925C9.62113 39.4318 9.34767 39.8563 8.93792 40.2661L7.59667 41.6073L6.69296 40.7036L7.8519 39.5447C8.06893 39.3276 8.21043 39.1115 8.27641 38.8962C8.34239 38.6774 8.34326 38.4665 8.27902 38.2633C8.21477 38.0567 8.09497 37.8657 7.91961 37.6904C7.74252 37.5133 7.5524 37.3943 7.34926 37.3336C7.14612 37.2693 6.9369 37.2719 6.72161 37.3414C6.50458 37.4091 6.28668 37.5523 6.06792 37.7711L5.30744 38.5316L9.71923 42.9433L8.59154 44.071Z", className: "fill-white" })] }), _jsxs("defs", { children: [_jsxs("filter", { id: "filter0_d_17300_14907", x: "-2", y: "-1", width: "64", height: "64", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dy: "1" }), _jsx("feGaussianBlur", { stdDeviation: "1" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.25 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_17300_14907" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_17300_14907", result: "shape" })] }), _jsxs("filter", { id: "filter1_d_17300_14907", x: "3.25781", y: "5.32983", width: "39.9092", height: "39.2412", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dy: "0.5" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_17300_14907" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_17300_14907", result: "shape" })] })] })] }));
+}

package/dist/components/Games/BadgeTop.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function BadgeTop(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Games/BadgeTop.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BadgeTop(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "62", height: "63", viewBox: "0 0 62 63", fill: "none", ...props, children: [_jsx("g", { filter: "url(#filter0_d_17300_12161)", children: _jsx("path", { d: "M0 60V33.1103L33.1103 0H60L0 60Z", className: "fill-error-600" }) }), _jsxs("g", { filter: "url(#filter1_d_17300_12161)", children: [_jsx("path", { d: "M28.4829 23.6247L23.1492 18.291L25.2535 16.1867C25.658 15.7822 26.08 15.5148 26.5192 15.3846C26.9568 15.2526 27.3865 15.2483 27.8084 15.3715C28.2303 15.4913 28.6183 15.7283 28.9725 16.0825C29.3267 16.4367 29.5628 16.8256 29.6809 17.2493C29.799 17.6729 29.7886 18.1052 29.6497 18.5462C29.5125 18.9855 29.239 19.41 28.8293 19.8198L27.488 21.161L26.5843 20.2573L27.7433 19.0984C27.9603 18.8813 28.1018 18.6652 28.1678 18.4499C28.2338 18.2311 28.2346 18.0202 28.1704 17.817C28.1061 17.6104 27.9863 17.4194 27.811 17.2441C27.6339 17.067 27.4438 16.948 27.2406 16.8873C27.0375 16.823 26.8283 16.8256 26.613 16.8951C26.3959 16.9628 26.1781 17.106 25.9593 17.3248L25.1988 18.0853L29.6106 22.4971L28.4829 23.6247Z", className: "fill-white" }), _jsx("path", { d: "M24.9825 21.7932C25.5642 22.3749 25.9488 22.98 26.1363 23.6085C26.3255 24.2353 26.3385 24.8455 26.1753 25.4393C26.0121 26.0297 25.6953 26.5601 25.2247 27.0306C24.7508 27.5046 24.2177 27.8223 23.6257 27.9838C23.0336 28.1453 22.4242 28.1314 21.7974 27.9421C21.1706 27.7529 20.5673 27.3683 19.9874 26.7884C19.4057 26.2068 19.0203 25.6025 18.831 24.9758C18.6418 24.349 18.6288 23.7404 18.792 23.1501C18.9535 22.558 19.2712 22.025 19.7452 21.551C20.2157 21.0805 20.747 20.7645 21.339 20.603C21.9311 20.4381 22.5405 20.4503 23.1673 20.6395C23.7958 20.827 24.4009 21.2116 24.9825 21.7932ZM23.8392 22.9366C23.4625 22.5598 23.0883 22.2985 22.7167 22.1526C22.3469 22.0051 21.9936 21.966 21.6568 22.0354C21.3199 22.1049 21.0152 22.2759 20.7426 22.5485C20.4701 22.8211 20.299 23.1258 20.2296 23.4626C20.1601 23.7995 20.1983 24.1537 20.3442 24.5252C20.4918 24.895 20.7539 25.2683 21.1307 25.6451C21.5075 26.0218 21.8807 26.284 22.2506 26.4316C22.6221 26.5774 22.9763 26.6156 23.3131 26.5462C23.65 26.4767 23.9547 26.3057 24.2273 26.0331C24.4999 25.7605 24.6709 25.4558 24.7403 25.119C24.8098 24.7822 24.7707 24.4288 24.6231 24.059C24.4773 23.6875 24.216 23.3133 23.8392 22.9366Z", className: "fill-white" }), _jsx("path", { d: "M13.4844 29.816L12.5547 28.8862L16.9352 24.5057L17.865 25.4354L16.232 27.0684L20.636 31.4723L19.5213 32.587L15.1174 28.183L13.4844 29.816Z", className: "fill-white" })] }), _jsxs("defs", { children: [_jsxs("filter", { id: "filter0_d_17300_12161", x: "-2", y: "-1", width: "64", height: "64", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dy: "1" }), _jsx("feGaussianBlur", { stdDeviation: "1" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.25 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_17300_12161" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_17300_12161", result: "shape" })] }), _jsxs("filter", { id: "filter1_d_17300_12161", x: "12.5547", y: "15.2822", width: "17.208", height: "17.8047", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dy: "0.5" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_17300_12161" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_17300_12161", result: "shape" })] })] })] }));
+}

package/dist/components/Games/Game.d.ts

@@ -1 +1,4 @@
-export declare function Game(): import("react/jsx-runtime").JSX.Element;
+export interface GameProps {
+    badge?: 'top' | 'new' | 'popular';
+}
+export declare function Game(props: GameProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Games/Game.js

@@ -4,8 +4,11 @@ import { twMerge } from 'tailwind-merge';
 import { useFavoriteGamesQuery, useMarkGameAsFavoriteMutation, useSessionQuery, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks/index.js';
 import { Star01Icon } from '../../icons/index.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
+import { BadgeNew } from './BadgeNew.js';
+import { BadgePopular } from './BadgePopular.js';
+import { BadgeTop } from './BadgeTop.js';
 import { useGameContext } from './GameContext.js';
-export function Game() {
+export function Game(props) {
     const game = useGameContext();
     const sessionQuery = useSessionQuery();
     const session = sessionQuery.data;
@@ -14,7 +17,7 @@ export function Game() {
     const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
     const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
     const markedAsFavorite = favoriteGames.some((favoriteGame) => favoriteGame.id === game.id);
-    return (_jsxs(GameLaunchTrigger, { game: game, className: "relative block w-full shadow-sm", children: [session?.status === 'authenticated' && (_jsx("div", { role: "button", onClick: (e) => {
+    return (_jsxs(GameLaunchTrigger, { game: game, className: "relative block w-full shadow-sm", children: [props.badge === 'new' && (_jsx(BadgeNew, { className: "absolute left-0 top-0 size-[3.75rem]" })), props.badge === 'top' && (_jsx(BadgeTop, { className: "absolute left-0 top-0 size-[3.75rem]" })), props.badge === 'popular' && (_jsx(BadgePopular, { className: "absolute left-0 top-0 size-[3.75rem]" })), session?.status === 'authenticated' && (_jsx("div", { role: "button", onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (markGameAsFavoriteMutation.isPending)

package/dist/components/Games/GamesCarousel.client.js

@@ -54,5 +54,5 @@ export function GamesCarousel__client(props) {
                         ? 'grid-rows-3'
                         : numOfRows === 2
                             ? 'grid-rows-2'
-                            : 'grid-rows-1'), children: games.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, {}) }, game.id))) }) })] }));
+                            : 'grid-rows-1'), children: games.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge }) }, game.id))) }) })] }));
 }

package/dist/components/Games/GamesCarousel.d.ts

@@ -9,6 +9,7 @@ export interface GamesCarouselProps {
     viewAllUrl?: string;
     /** @default 1 */
     numOfRows?: 1 | 2 | 3;
+    badge?: 'top' | 'new' | 'popular';
     filter?: GamesInput['filter'];
     className?: string;
 }

package/dist/components/Games/GamesList.client.js

@@ -10,5 +10,5 @@ export function GamesList__client(props) {
         first: props.first ?? 24,
         filter: props.filter,
     });
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: availableRows.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, {}) }, game.id))) }), _jsxs("div", { className: "mt-3xl flex flex-col items-center", children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: "mt-lg", children: "Load More" }))] })] }));
+    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: availableRows.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge }) }, game.id))) }), _jsxs("div", { className: "mt-3xl flex flex-col items-center", children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: "mt-lg", children: "Load More" }))] })] }));
 }

package/dist/components/Games/GamesList.d.ts

@@ -1,5 +1,6 @@
 import type { GamesInput } from '@opexa/portal-sdk-core';
 export interface GamesListProps {
+    badge?: 'top' | 'new' | 'popular';
     /** @default 24 */
     first?: number;
     filter?: GamesInput['filter'];

package/dist/components/Messages/Messages.js

@@ -29,10 +29,10 @@ export function Messages(props) {
     const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
         ? props.offsetTop
         : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
-    return (_jsxs(_Fragment, { children: [_jsxs(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, children: props.children ?? (_jsxs(IconButton, { size: "sm", colorScheme: "gray", className: "relative", children: [!!unreadMessagesCount && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 rounded-full border px-1.5 text-2xs font-semibold", children: unreadMessagesCount })), _jsx(Bell01Icon, {})] })) }), _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsx(Drawer.Content, { className: twMerge('flex', 'flex-col', 'border-l', 'border-border-secondary', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
+    return (_jsxs(_Fragment, { children: [_jsxs(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, children: props.children ?? (_jsxs(IconButton, { size: "sm", colorScheme: "gray", className: "relative", children: [!!unreadMessagesCount && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 rounded-full border px-1.5 text-2xs font-semibold", children: unreadMessagesCount })), _jsx(Bell01Icon, {})] })) }), _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsx(Drawer.Content, { className: twMerge('flex', 'flex-col', 'border-border-secondary', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'lg:border-l', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
                                     ['--offset-top-mobile']: mobileOffsetTop,
                                     ['--offset-top-desktop']: desktopOffsetTop,
-                                }, children: _jsxs("div", { className: "flex flex-col space-y-6", children: [_jsxs("div", { className: "flex items-end justify-between px-4 pt-6", children: [_jsx("p", { className: "text-text-primary-brand text-xl font-semibold", children: "Notifications" }), _jsx(Drawer.CloseTrigger, { className: "p-2", children: _jsx(XIcon, {}) })] }), _jsxs(Tabs.Root, { value: globalStore.messages.tab, onValueChange: (details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsx("div", { className: "mb-4 w-full px-4", children: _jsxs(Tabs.List, { className: "border-border-secondary w-full border", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600 flex items-center justify-center space-x-2", children: [_jsx("div", { children: "Unread" }), !!unreadMessagesCount && (_jsx("div", { className: "border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, { className: "bg-bg-active" })] }) }), _jsx("div", { className: "border-border-secondary mb-10 w-full border-t" }), TABS.map((tab) => (_jsxs(Tabs.Content, { id: "messages-scrollable", value: tab, className: "scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full max-h-[calc(100vh-197px)] overflow-y-auto pb-4 pl-4", style: { scrollbarGutter: 'stable' }, children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-4", children: messages.map((message) => (_jsx(MessageItem, { message: message }, message.id))) })), _jsx(InfiniteScroll, { loader: _jsx(SpinnerIcon, { className: "mx-auto size-5" }), hasMore: !!messagesQuery.hasNextPage, loadMore: async () => {
+                                }, children: _jsxs("div", { className: "flex flex-col space-y-6", children: [_jsxs("div", { className: "flex items-end justify-between px-4 pt-6", children: [_jsx("p", { className: "text-text-primary-brand text-xl font-semibold", children: "Notifications" }), _jsx(Drawer.CloseTrigger, { className: "p-2", children: _jsx(XIcon, {}) })] }), _jsxs(Tabs.Root, { value: globalStore.messages.tab, onValueChange: (details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsx("div", { className: "mb-4 w-full px-4", children: _jsxs(Tabs.List, { className: "border-border-secondary w-full border", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600 flex items-center justify-center space-x-2", children: [_jsx("div", { children: "Unread" }), !!unreadMessagesCount && (_jsx("div", { className: "border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, { className: "bg-bg-active" })] }) }), _jsx("div", { className: "border-border-secondary w-full border-t" }), TABS.map((tab) => (_jsxs(Tabs.Content, { value: tab, className: "scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full max-h-[calc(100vh-197px)] overflow-y-auto p-xl", style: { scrollbarGutter: 'stable' }, children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-4", children: messages.map((message) => (_jsx(MessageItem, { message: message }, message.id))) })), _jsx(InfiniteScroll, { loader: _jsx(SpinnerIcon, { className: "mx-auto size-5" }), hasMore: !!messagesQuery.hasNextPage, loadMore: async () => {
                                                                 await messagesQuery.fetchNextPage();
                                                             }, className: "mt-4" })] }, tab)))] })] }) }) }) })] }), _jsx(MessagePopup, {})] }));
 }

package/dist/styles/theme.css

@@ -193,6 +193,7 @@
   --color-success-700: #067647;
   --color-success-800: #085d3a;
   --color-cyan-950: #0d2d3a;
+  --color-blue-dark-700: #004eeb;
 
   --color-button-primary-bg: #fac515;
   --color-button-primary-fg: #542c0d;