@opexa/portal-components 0.0.2 → 0.0.4

package/dist/components/SignUp/SignUpForm.jsx

@@ -0,0 +1,312 @@
+'use client';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useDialogContext } from '@ark-ui/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ObjectId, ObjectType } from '@opexa/portal-sdk-core/object-id';
+import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useCooldown } from '../../hooks/useCooldown.js';
+import { useGlobalStore } from '../../hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../hooks/useLocaleInfo.js';
+import { useMobileNumberParser } from '../../hooks/useMobileNumberParser.js';
+import { useSendVerificationCodeMutation } from '../../hooks/useSendVerificationCodeMutation/useSendVerificationCodeMutation.js';
+import { useSignInMutation } from '../../hooks/useSigninMutation/useSignInMutation.js';
+import { useSignUpMutation } from '../../hooks/useSignUpMutation/useSignUpMutation.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.jsx';
+import { CheckIcon } from '../../icons/CheckIcon.jsx';
+import { Button, Checkbox, Field, PinInput } from '../../ui/index.js';
+import { toaster } from '../../utils/toaster.js';
+export function SignUpForm() {
+    var _this = this;
+    var _a;
+    var _b = useState(1), step = _b[0], setStep = _b[1];
+    var dialog = useDialogContext();
+    var search = useSearchParams();
+    var signInStore = useGlobalStore(useShallow(function (popups) { return popups.signIn; }));
+    var signUpMutation = useSignUpMutation();
+    var signInMutation = useSignInMutation();
+    var sendVerificationCodeMutation = useSendVerificationCodeMutation();
+    var localeInfo = useLocaleInfo();
+    var mobileNumberParser = useMobileNumberParser();
+    var Step1Definition = z.object({
+        mobileNumber: z.string().superRefine(function (v, ctx) {
+            if (!mobileNumberParser.validate(v)) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'Invalid mobile number',
+                });
+            }
+        }),
+        termsAccepted: z.boolean().superRefine(function (v, ctx) {
+            if (!v) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'You must accept the terms and conditions',
+                });
+            }
+        }),
+    });
+    var Step2Definition = z.object({
+        verificationCode: z.array(z.string().min(1).max(1).trim()).min(6).max(6),
+    });
+    var step1Form = useForm({
+        resolver: zodResolver(Step1Definition),
+        defaultValues: {
+            mobileNumber: '',
+            termsAccepted: false,
+        },
+    });
+    var step2Form = useForm({
+        resolver: zodResolver(Step2Definition),
+        defaultValues: {
+            verificationCode: Array.from({ length: 6 }).fill(''),
+        },
+    });
+    var cooldown = useCooldown({
+        max: 60,
+        duration: 1000 * 60,
+    });
+    return (<>
+      {step === 1 && (<>
+          <div className="w-full grow">
+            <h2 className="mt-xl text-center text-lg font-semibold">
+              Create an account
+            </h2>
+            <p className="text-gray-600 mt-xs text-center text-sm">
+              Register instantly and start playing!
+            </p>
+
+            <form className="mt-5" onSubmit={step1Form.handleSubmit(function (data) { return __awaiter(_this, void 0, void 0, function () {
+                var e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, sendVerificationCodeMutation.mutateAsync({
+                                    channel: 'SMS',
+                                    recipient: mobileNumberParser.format(data.mobileNumber),
+                                })];
+                        case 1:
+                            _a.sent();
+                            setStep(2);
+                            cooldown.start();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            e_1 = _a.sent();
+                            toaster.error({
+                                description: e_1 instanceof Error
+                                    ? e_1.message
+                                    : 'Failed to send verification code',
+                            });
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); })}>
+              <Field.Root invalid={!!step1Form.formState.errors.mobileNumber}>
+                <Field.Label>Mobile Number</Field.Label>
+                <div className="relative">
+                  <localeInfo.country.flag className="absolute left-3.5 top-1/2 size-5 shrink-0 -translate-y-1/2"/>
+                  <Field.Input className="pl-11" {...step1Form.register('mobileNumber')}/>
+                </div>
+                <Field.ErrorText>
+                  {(_a = step1Form.formState.errors.mobileNumber) === null || _a === void 0 ? void 0 : _a.message}
+                </Field.ErrorText>
+              </Field.Root>
+
+              <Button type="submit" className="mt-5" disabled={step1Form.formState.isSubmitting}>
+                Create Account
+              </Button>
+
+              <Controller control={step1Form.control} name="termsAccepted" render={function (o) { return (<Checkbox.Root className="mt-xl" invalid={o.fieldState.invalid} checked={o.field.value} onCheckedChange={function (details) {
+                    o.field.onChange(details.checked);
+                }}>
+                    <Checkbox.Control>
+                      <Checkbox.Indicator asChild>
+                        <CheckIcon />
+                      </Checkbox.Indicator>
+                    </Checkbox.Control>
+                    <Checkbox.Label>
+                      I confirm that I am at least 21 years old, not listed in
+                      the PAGCOR NDRP, not a GEL license holder, government
+                      employee, or member of the Armed Forces of the
+                      Philippines. I am not playing in a public space and agree
+                      to the Terms of Use and Privacy Policy. Ineligible
+                      accounts will have their funds forfeited to the
+                      government.
+                    </Checkbox.Label>
+                    <Checkbox.HiddenInput />
+                  </Checkbox.Root>); }}/>
+            </form>
+          </div>
+
+          <div className="flex w-full items-center justify-center gap-xs text-sm">
+            <span className="text-gray-500">Don&apos;t have an account?</span>
+            <button type="submit" className="text-accent-700 font-semibold" onClick={function () {
+                dialog.setOpen(false);
+                signInStore.setOpen(true);
+            }}>
+              Log In
+            </button>
+          </div>
+        </>)}
+
+      {step === 2 && (<div className="w-full grow">
+          <h2 className="mt-xl text-center text-lg font-semibold">
+            Check your Phone
+          </h2>
+          <p className="text-gray-600 mt-xs text-center text-sm">
+            We&rsquo;ve sent a verification code to your mobile number{' '}
+            <span className="font-semibold">
+              {mobileNumberParser.format(step1Form.getValues('mobileNumber'))}
+            </span>{' '}
+            via text
+          </p>
+
+          <form className="mt-5" onSubmit={step2Form.handleSubmit(function (_a) { return __awaiter(_this, [_a], void 0, function (_b) {
+                var id, mobileNumber, name_1, password, _c, _d;
+                var _e, _f, _g;
+                var verificationCode = _b.verificationCode;
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
+                        case 0:
+                            id = ObjectId.generate(ObjectType.MemberAccount).toString();
+                            mobileNumber = step1Form.getValues().mobileNumber;
+                            _h.label = 1;
+                        case 1:
+                            _h.trys.push([1, 7, , 8]);
+                            return [4 /*yield*/, signUpMutation.mutateAsync({
+                                    id: id,
+                                    mobileNumber: mobileNumberParser.format(mobileNumber),
+                                    verificationCode: verificationCode.join(''),
+                                    referralCode: (_e = search.get('referralCode')) !== null && _e !== void 0 ? _e : undefined,
+                                    domain: (_f = search.get('domain')) !== null && _f !== void 0 ? _f : undefined,
+                                    btag: (_g = search.get('btag')) !== null && _g !== void 0 ? _g : undefined,
+                                })];
+                        case 2:
+                            _h.sent();
+                            name_1 = mobileNumberParser.format(mobileNumber);
+                            password = "".concat(name_1).concat(id);
+                            _h.label = 3;
+                        case 3:
+                            _h.trys.push([3, 5, , 6]);
+                            return [4 /*yield*/, signInMutation.mutateAsync({
+                                    type: 'NAME_AND_PASSWORD',
+                                    name: mobileNumberParser.format(mobileNumber),
+                                    password: password,
+                                })];
+                        case 4:
+                            _h.sent();
+                            return [3 /*break*/, 6];
+                        case 5:
+                            _c = _h.sent();
+                            signInStore.setOpen(true);
+                            return [3 /*break*/, 6];
+                        case 6:
+                            dialog.setOpen(false);
+                            step1Form.reset();
+                            step2Form.reset();
+                            setStep(1);
+                            return [3 /*break*/, 8];
+                        case 7:
+                            _d = _h.sent();
+                            toaster.error({
+                                title: 'Invalid Verification Code',
+                            });
+                            return [3 /*break*/, 8];
+                        case 8: return [2 /*return*/];
+                    }
+                });
+            }); })}>
+            <Controller name="verificationCode" control={step2Form.control} render={function (o) { return (<PinInput.Root placeholder="0" invalid={o.fieldState.invalid} value={o.field.value} onValueChange={function (details) {
+                    o.field.onChange(details.value);
+                }}>
+                  <PinInput.Control>
+                    <PinInput.Input index={0}/>
+                    <PinInput.Input index={1}/>
+                    <PinInput.Input index={2}/>
+                    <PinInput.Input index={3}/>
+                    <PinInput.Input index={4}/>
+                    <PinInput.Input index={5}/>
+                  </PinInput.Control>
+                  <PinInput.HiddenInput />
+                </PinInput.Root>); }}/>
+
+            <Button type="submit" className="mt-5" disabled={step2Form.formState.isSubmitting}>
+              Verify and Play
+            </Button>
+
+            <div className="mt-5 flex w-full items-center justify-center gap-xs text-sm">
+              <span className="text-gray-500">
+                Didn&apos;t recieve the code?
+              </span>
+              <button type="button" className="text-accent-700 font-semibold disabled:cursor-not-allowed disabled:opacity-75" disabled={cooldown.cooling} onClick={function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, sendVerificationCodeMutation.mutateAsync({
+                                channel: 'SMS',
+                                recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
+                            })];
+                        case 1:
+                            _a.sent();
+                            cooldown.start();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }}>
+                {cooldown.cooling
+                ? "Resend in ".concat(cooldown.countdown, "s")
+                : 'Resend'}
+              </button>
+            </div>
+
+            <button type="button" className="text-gray-600 mx-auto mt-5 flex w-fit items-center gap-1 text-sm font-semibold" onClick={function () {
+                setStep(1);
+                step2Form.reset();
+                cooldown.stop();
+            }}>
+              <ArrowLeftIcon className="size-5"/>
+              Back
+            </button>
+          </form>
+        </div>)}
+    </>);
+}

package/dist/components/SignUp/index.d.ts

@@ -0,0 +1 @@
+export * from './SignUp.jsx';

package/dist/components/SignUp/index.js

@@ -0,0 +1 @@
+export * from './SignUp.jsx';

package/dist/components/TopWins/TopWins.d.ts

@@ -0,0 +1,5 @@
+export interface TopWinsProps {
+    heading: string;
+    className?: string;
+}
+export declare function TopWins(props: TopWinsProps): Promise<import("react").JSX.Element>;

package/dist/components/TopWins/TopWins.jsx

@@ -0,0 +1,45 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { TopWinsContent } from './TopWinsContent.jsx';
+export function TopWins(props) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            /* await prefetchTopWinsQuery(); */
+            return [2 /*return*/, <TopWinsContent {...props}/>];
+        });
+    });
+}

package/dist/components/TopWins/TopWinsContent.d.ts

@@ -0,0 +1,2 @@
+import type { TopWinsProps } from './TopWins.jsx';
+export declare function TopWinsContent(props: TopWinsProps): import("react").JSX.Element | null;

package/dist/components/TopWins/TopWinsContent.jsx

@@ -0,0 +1,51 @@
+'use client';
+import useEmblaCarousel from 'embla-carousel-react';
+import Image from 'next/image';
+import { useLocaleInfo } from '../../hooks/useLocaleInfo.js';
+import { useTopWinsQuery } from '../../hooks/useTopWinsQuery/useTopWinsQuery.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
+export function TopWinsContent(props) {
+    var _a;
+    var localeInfo = useLocaleInfo();
+    var topWinsQuery = useTopWinsQuery();
+    var topWins = (_a = topWinsQuery.data) !== null && _a !== void 0 ? _a : [];
+    var emblaRef = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    })[0];
+    if (!(topWins === null || topWins === void 0 ? void 0 : topWins.length))
+        return null;
+    return (<div className={props.className}>
+      <div className="text-gray-600 mb-3 text-lg font-semibold md:mb-4">
+        {props.heading}
+      </div>
+
+      <div ref={emblaRef} className="relative lg:overflow-hidden">
+        <div className="flex gap-sm lg:gap-md">
+          {topWins.map(function (topWin) { return (<div key={topWin.id} className="bg-gray-50 border-gray-200 flex w-[calc((100%-(0.375rem*2))/3)] shrink-0 flex-col space-y-2 rounded-sm border p-2 text-center lg:w-[calc((100%-(0.5rem*5))/6)] xl:w-[calc((100%-(0.5rem*9))/10)]">
+              <div className="mx-auto aspect-square w-full">
+                {topWin.game && (<Image width={100} height={100} src={getGameImageUrl(topWin.game)} alt="" className="size-full rounded-sm object-cover"/>)}
+              </div>
+
+              <div className="space-y-0.5">
+                <div className="text-gray-600 text-xs">
+                  {topWin.member.name}
+                </div>
+                <div className="text-gray-800 text-sm font-semibold">
+                  {formatNumber(topWin.payout, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+            })}
+                </div>
+                <div className="text-gray-600 text-xs">
+                  {formatNumber(topWin.multiplier, {
+                minDecimalPlaces: 2,
+            })}
+                </div>
+              </div>
+            </div>); })}
+        </div>
+      </div>
+    </div>);
+}

package/dist/components/TopWins/index.d.ts

@@ -0,0 +1 @@
+export * from './TopWins.jsx';

package/dist/components/TopWins/index.js

@@ -0,0 +1 @@
+export * from './TopWins.jsx';

package/dist/components/TournamentCounter/TournamentCounter.d.ts

@@ -0,0 +1,6 @@
+export interface TournamentCounterProps {
+    className?: string;
+    heading: string;
+    seeAllUrl: string;
+}
+export declare function TournamentCounter(props: TournamentCounterProps): Promise<import("react").JSX.Element>;

package/dist/components/TournamentCounter/TournamentCounter.jsx

@@ -0,0 +1,54 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { TournamentCounterContent } from './TournamentCounterContent.jsx';
+export function TournamentCounter(props) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            /*
+            await prefetchTournamentsQuery({
+              first: 100,
+              filter: {
+                status: {
+                  equal: 'ACTIVE',
+                },
+              },
+            });
+            */
+            return [2 /*return*/, <TournamentCounterContent {...props}/>];
+        });
+    });
+}

package/dist/components/TournamentCounter/TournamentCounterContent.d.ts

@@ -0,0 +1,2 @@
+import type { TournamentCounterProps } from './TournamentCounter.jsx';
+export declare function TournamentCounterContent(props: TournamentCounterProps): import("react").JSX.Element | null;

package/dist/components/TournamentCounter/TournamentCounterContent.jsx

@@ -0,0 +1,79 @@
+'use client';
+import useEmblaCarousel from 'embla-carousel-react';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { useTournamentsQuery } from '../../hooks/useTournamentsQuery/useTournamentsQuery.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.jsx';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.jsx';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.jsx';
+import { Button } from '../../ui/index.js';
+import { TournamentCounterItem } from './TournamentCounterItem.jsx';
+export function TournamentCounterContent(props) {
+    var _a, _b;
+    var _c = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    }), emblaRef = _c[0], emblaApi = _c[1];
+    var scrollPrev = useCallback(function () {
+        if (emblaApi)
+            emblaApi.scrollPrev();
+    }, [emblaApi]);
+    var scrollNext = useCallback(function () {
+        if (emblaApi)
+            emblaApi.scrollNext();
+    }, [emblaApi]);
+    var _d = useState(false), canScrollPrev = _d[0], setCanScrollPrev = _d[1];
+    var _e = useState(false), canScrollNext = _e[0], setCanScrollNext = _e[1];
+    var onSelect = useCallback(function () {
+        if (!emblaApi)
+            return;
+        setCanScrollPrev(emblaApi.canScrollPrev());
+        setCanScrollNext(emblaApi.canScrollNext());
+    }, [emblaApi]);
+    useEffect(function () {
+        if (!emblaApi)
+            return;
+        onSelect(); // set initial state
+        emblaApi.on('select', onSelect);
+        emblaApi.on('reInit', onSelect); // handles responsive changes
+    }, [emblaApi, onSelect]);
+    var tournamentsQuery = useTournamentsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+        },
+    });
+    var tournaments = (_b = (_a = tournamentsQuery.data) === null || _a === void 0 ? void 0 : _a.pages[0].edges.map(function (edge) { return edge.node; })) !== null && _b !== void 0 ? _b : [];
+    if (tournaments.length <= 0)
+        return null;
+    return (<div className={props.className}>
+      <div className="mb-3 flex items-center justify-between md:mb-4">
+        <div className="text-lg font-semibold">{props.heading}</div>
+        <div className="flex items-center md:gap-3xl">
+          <Link href={props.seeAllUrl} className="flex gap-sm text-sm font-semibold">
+            See All
+            <ChevronRightIcon className="size-5 lg:hidden"/>
+          </Link>
+
+          <div className="hidden lg:flex">
+            <Button disabled={!canScrollPrev} onClick={scrollPrev} variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" aria-label="Previous">
+              <ArrowLeftIcon className="size-5"/>
+            </Button>
+            <Button disabled={!canScrollNext} onClick={scrollNext} variant="outline" colorScheme="gray" className="rounded-l-none" aria-label="Next">
+              <ArrowRightIcon className="size-5"/>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full overflow-hidden" ref={emblaRef}>
+        <div className="flex gap-2.5">
+          {tournaments.map(function (tournament, index) { return (<TournamentCounterItem key={tournament.id} index={index} tournament={tournament} className={tournaments.length < 2
+                ? 'w-full'
+                : 'w-full lg:w-[calc((100%-0.75rem)/2)]'}/>); })}
+        </div>
+      </div>
+    </div>);
+}

package/dist/components/TournamentCounter/TournamentCounterItem.d.ts

@@ -0,0 +1,8 @@
+import type { Tournament } from '@opexa/portal-sdk-core';
+import React from 'react';
+export interface JackpotCounterCardProps {
+    tournament: Tournament;
+    className?: string;
+    index: number;
+}
+export declare function TournamentCounterItem({ tournament, className, index, }: JackpotCounterCardProps): React.JSX.Element;