@opexa/portal-components 0.0.2 → 0.0.3

package/dist/components/Account/Account.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, ComponentType, ReactNode } from 'react';
+interface AccountLink {
+    icon: ComponentType<ComponentProps<'svg'>>;
+    href: string;
+    label: string;
+}
+export interface AccountProps {
+    links?: AccountLink[];
+    children?: ReactNode;
+}
+export declare function Account(props: AccountProps): import("react").JSX.Element;
+export {};

package/dist/components/Account/Account.jsx

@@ -0,0 +1,172 @@
+'use client';
+import { Portal } from '@ark-ui/react';
+import Link from 'next/link';
+import { useShallow } from 'zustand/shallow';
+import { useAccountQuery } from '../../hooks/useAccountQuery/useAccountQuery';
+import { useGlobalStore } from '../../hooks/useGlobalStore';
+import { useLocaleInfo } from '../../hooks/useLocaleInfo';
+import { useSignOutMutation } from '../../hooks/useSignOutMutation/useSignOutMutation';
+import { useWalletQuery } from '../../hooks/useWalletQuery/useWalletQuery';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon';
+import { Logout01Icon } from '../../icons/Logout01Icon';
+import { User01Icon } from '../../icons/User01Icon';
+import { Avatar, Button, Drawer, Popover } from '../../ui';
+import { formatNumber } from '../../utils/formatNumber';
+export function Account(props) {
+    var _a, _b, _c, _d;
+    var globalStore = useGlobalStore(useShallow(function (ctx) { return ({
+        profile: ctx.profile,
+        mobileProfile: ctx.mobileProfile,
+    }); }));
+    return (<>
+      <Drawer.Root open={globalStore.profile.open} onOpenChange={function (details) {
+            globalStore.profile.setOpen(details.open);
+        }} lazyMount unmountOnExit>
+        <Drawer.Trigger asChild className="lg:hidden">
+          {(_a = props.children) !== null && _a !== void 0 ? _a : (<button type="button">
+              <Avatar.Root>
+                <Avatar.Fallback>
+                  <User01Icon />
+                </Avatar.Fallback>
+              </Avatar.Root>
+            </button>)}
+        </Drawer.Trigger>
+        <Portal>
+          <Drawer.Backdrop />
+          <Drawer.Positioner>
+            <Drawer.Content className="bg-gray-50 flex w-[316px] flex-col px-xl py-6">
+              <Profile />
+              <Wallet />
+              <Links links={(_b = props.links) !== null && _b !== void 0 ? _b : []}/>
+              <div className="grow"/>
+              <TradeMark />
+            </Drawer.Content>
+          </Drawer.Positioner>
+        </Portal>
+      </Drawer.Root>
+
+      <Popover.Root open={globalStore.mobileProfile.open} onOpenChange={function (details) {
+            globalStore.mobileProfile.setOpen(details.open);
+        }} lazyMount unmountOnExit positioning={{
+            placement: 'bottom',
+        }}>
+        <Popover.Trigger className="hidden lg:flex" asChild>
+          {(_c = props.children) !== null && _c !== void 0 ? _c : (<button type="button">
+              <Avatar.Root>
+                <Avatar.Fallback>
+                  <User01Icon />
+                </Avatar.Fallback>
+              </Avatar.Root>
+            </button>)}
+        </Popover.Trigger>
+        <Portal>
+          <Popover.Positioner>
+            <Popover.Content className="border-gray-200 z-popover w-[316px] rounded-xl border bg-white p-xl ui-open:animate-fade-in ui-closed:animate-fade-out">
+              <Profile />
+              <Wallet />
+              <Links links={(_d = props.links) !== null && _d !== void 0 ? _d : []}/>
+              <TradeMark />
+            </Popover.Content>
+          </Popover.Positioner>
+        </Portal>
+      </Popover.Root>
+    </>);
+}
+function TradeMark() {
+    return (<div className="text-gray-400 mt-xl text-center text-2xs">
+      &copy; 2025 HappyBingo All rights reserved
+    </div>);
+}
+function Profile() {
+    var _a, _b, _c, _d, _e, _f;
+    var accountQuery = useAccountQuery();
+    return (<div className="flex items-center gap-3">
+      <Avatar.Root>
+        <Avatar.Fallback>
+          <User01Icon />
+        </Avatar.Fallback>
+      </Avatar.Root>
+      <div>
+        <p className="text-sm font-semibold">{(_a = accountQuery.data) === null || _a === void 0 ? void 0 : _a.name}</p>
+        <p className="text-gray-400 text-xs">
+          {(_e = (_c = (_b = accountQuery.data) === null || _b === void 0 ? void 0 : _b.nickName) !== null && _c !== void 0 ? _c : (_d = accountQuery.data) === null || _d === void 0 ? void 0 : _d.emailAddress) !== null && _e !== void 0 ? _e : (_f = accountQuery.data) === null || _f === void 0 ? void 0 : _f.realName}
+        </p>
+      </div>
+    </div>);
+}
+function Links(props) {
+    var signOutMutation = useSignOutMutation();
+    var globalStore = useGlobalStore(useShallow(function (ctx) { return ({
+        profile: ctx.profile,
+        mobileProfile: ctx.mobileProfile,
+    }); }));
+    return (<nav className="mt-xl space-y-xl">
+      <ul>
+        {props.links.map(function (link, index) { return (<li key={link.href + index} className="border-gray-200 block border-x border-b bg-white first:rounded-t-xl first:border-t last:rounded-b-xl">
+            <Link href={link.href} onClick={function () {
+                globalStore.profile.setOpen(false);
+                globalStore.mobileProfile.setOpen(false);
+            }} className="flex w-full items-center gap-lg px-xl py-xl text-left text-sm font-semibold">
+              <link.icon className="size-5"/>
+              <span className="grow">{link.label}</span>
+              <ChevronRightIcon className="text-gray-400 size-5"/>
+            </Link>
+          </li>); })}
+      </ul>
+
+      <ul>
+        <li className="border-gray-200 block rounded-xl border bg-white">
+          <button type="button" className="flex w-full items-center gap-lg px-xl py-xl text-left text-sm font-semibold" disabled={signOutMutation.isPending} onClick={function () {
+            signOutMutation.mutate();
+            globalStore.profile.setOpen(false);
+            globalStore.mobileProfile.setOpen(false);
+        }}>
+            <Logout01Icon className="size-5"/>
+            <span className="grow">Log Out</span>
+            <ChevronRightIcon className="text-gray-400 size-5"/>
+          </button>
+        </li>
+      </ul>
+    </nav>);
+}
+function Wallet() {
+    var _a;
+    var localeInfo = useLocaleInfo();
+    var walletQuery = useWalletQuery({
+        refetchInterval: 1000,
+    });
+    var globalStore = useGlobalStore(useShallow(function (ctx) { return ({
+        profile: ctx.profile,
+        mobileProfile: ctx.mobileProfile,
+        depositWithdrawal: ctx.depositWithdrawal,
+    }); }));
+    return (<div className="border-gray-200 mt-3 rounded-lg border bg-white p-xl">
+      <div className="border-gray-200 bg-gray-50 text-gray-600 w-fit rounded-sm border px-1.5 py-0.5 text-xs font-medium">
+        Available Balance
+      </div>
+      <div className="mt-2 text-3xl font-semibold">
+        {formatNumber((_a = walletQuery.data) === null || _a === void 0 ? void 0 : _a.balance, {
+            currency: localeInfo === null || localeInfo === void 0 ? void 0 : localeInfo.currency.code,
+            minDecimalPlaces: 2,
+        })}
+      </div>
+      <div className="mt-3 flex gap-lg">
+        <Button size="xs" variant="outline" colorScheme="gray" onClick={function () {
+            globalStore.depositWithdrawal.setOpen(true);
+            globalStore.depositWithdrawal.setTab('WITHDRAWAL');
+            globalStore.profile.setOpen(false);
+            globalStore.mobileProfile.setOpen(false);
+        }}>
+          Withdraw
+        </Button>
+        <Button size="xs" onClick={function () {
+            globalStore.depositWithdrawal.setOpen(true);
+            globalStore.depositWithdrawal.setTab('DEPOSIT');
+            globalStore.profile.setOpen(false);
+            globalStore.mobileProfile.setOpen(false);
+        }}>
+          Deposit
+        </Button>
+      </div>
+    </div>);
+}

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

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

package/dist/components/Account/index.js

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

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,11 @@
+import type { ImageProps } from 'next/image';
+interface Banner {
+    src: ImageProps['src'];
+    redirectUrl?: string;
+}
+export interface BannerProps {
+    banners: Banner[];
+    className?: string;
+}
+export declare function Banner(props: BannerProps): import("react").JSX.Element;
+export {};

package/dist/components/Banner/Banner.jsx

@@ -0,0 +1,52 @@
+'use client';
+import emblaCarouselAutoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel from 'embla-carousel-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Fragment, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { dataAttr } from '../../utils/dataAttr';
+export function Banner(props) {
+    var _a = useEmblaCarousel({
+        loop: true,
+        align: 'start',
+    }, [
+        emblaCarouselAutoplay({
+            playOnInit: true,
+            delay: 5000,
+        }),
+    ]), emblaRef = _a[0], emblaApi = _a[1];
+    var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
+    useEffect(function () {
+        function handler(detail) {
+            var _a;
+            setCurrentIndex((_a = detail === null || detail === void 0 ? void 0 : detail.selectedScrollSnap()) !== null && _a !== void 0 ? _a : 0);
+        }
+        emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.on('scroll', handler);
+        emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.on('init', handler);
+        return function () {
+            emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.on('init', handler);
+            emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.off('scroll', handler);
+        };
+    }, [emblaApi]);
+    return (<div className={twMerge('relative', props.className)}>
+      <div ref={emblaRef} className="overflow-hidden">
+        <div className="flex gap-2">
+          {props.banners.map(function (banner, index) {
+            var img = (<Image src={banner.src} alt="" width={1200} /* ✏️ TODO: must be 400 on mobile */ height={300} /* ✏️ TODO: must be 225 on mobile */ className="block h-auto w-full rounded-xl" priority={index === 0}/>);
+            return (<Fragment key={index}>
+                {!banner.redirectUrl ? (<div className="w-full shrink-0">{img}</div>) : (<Link href={banner.redirectUrl} className="block w-full shrink-0">
+                    {img}
+                  </Link>)}
+              </Fragment>);
+        })}
+        </div>
+      </div>
+
+      <div className="absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2">
+        {props.banners.map(function (_, index) { return (<button key={index} type="button" className="border-gray-200 ui-active:bg-gray-800 bg-gray-400 size-3 shrink-0 rounded-full border transition-all duration-300 ui-active:w-9" onClick={function () {
+                emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollTo(index);
+            }} aria-label={"Go to slide ".concat(index + 1)} data-active={dataAttr(index === currentIndex)}/>); })}
+      </div>
+    </div>);
+}

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

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

package/dist/components/Banner/index.js

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

package/dist/components/BetRecords/BetRecords.d.ts

@@ -0,0 +1,7 @@
+import type { GameProvider, GameType } from '@opexa/portal-sdk-core';
+export interface BetRecordsProps {
+    gameTypes: GameType[];
+    gameProviders: GameProvider[];
+    className?: string;
+}
+export declare function BetRecords(props: BetRecordsProps): import("react").JSX.Element;

package/dist/components/BetRecords/BetRecords.jsx

@@ -0,0 +1,4 @@
+import { BetRecordsContent } from './BetRecordsContent';
+export function BetRecords(props) {
+    return <BetRecordsContent {...props}/>;
+}

package/dist/components/BetRecords/BetRecordsContent.d.ts

@@ -0,0 +1,2 @@
+import type { BetRecordsProps } from './BetRecords';
+export declare function BetRecordsContent(props: BetRecordsProps): import("react").JSX.Element;