Getting Started

npm install [email protected]

Usage

Example 1: AppContainer, Header, and Main

import { AppContainer, Header, Main, Navbar } from "aixbet-games-ui";
import "aixbet-games-ui";

export default function AppLayout({ children }) {
  return (
    <AppContainer>
      <Header
        balanceDiamond={1000}
        balanceUsd={10}
        balanceType="diamond"
        setBalanceType={setBalanceType}
      />
      <Main>{children}</Main>
    </AppContainer>
  );
}

Example 2: BetAmount and BetButton

import { BetAmount, BetButton } from "aixbet-games-ui";
import { useState } from "react";

export default function Home() {
  const [betAmount, setBetAmount] = useState(100);

  return (
    <>
      <BetAmount
        betAmount={betAmount}
        setBetAmount={setBetAmount}
        balanceType="diamond"
      />
      <BetButton />
    </>
  );
}

 <Frame
      gameControl={<GameControl/>}
    >
 	<Games />
 </Frame>

Components and Types

• AppContainer: A wrapper component for your app layout.

  • Props:
    • children: ReactNode, the child components to be wrapped.
    • className?: Optional string for additional CSS classes.
    • isProduction?: Boolean flag to indicate if the environment is production.

• Main: Used to wrap the main content inside the layout.

  • Props:
    • children: ReactNode, the content inside the main layout.
    • className?: Optional string for additional CSS classes.

• Header: Displays the user’s balance with toggle support for currency type.

  • Props:
    • balanceDiamond: A string or number representing the balance in diamonds.
    • balanceUsd: A string or number representing the balance in USD.
    • balanceType: Enum ("diamond" | "usd"), current selected balance type.
    • setBalanceType: Function to update the balance type.
    • className?: Optional string for additional CSS classes.

• BetAmount: Input for setting the bet amount.

  • Props:
    • betAmount: A number representing the current bet amount.
    • setBetAmount: A function to update the bet amount, passed as Dispatch<SetStateAction<number>>.
    • disabled?: A boolean to disable the input.
    • setInputOnFocus?: Function to track input focus state.
    • balanceType: Enum ("diamond" | "usd"), determines the currency type.

• BetButton: A button to place or cash out a bet.

  • Props:
    • cashoutAmount?: An optional number representing the cashout amount.
    • disabled?: A boolean to disable the button.
    • Other props extend ButtonHTMLAttributes<HTMLButtonElement> for additional control.

• Error: Displays error messages with an action refresh button.

  • Props:
    • title?: Optional string for the error title.
    • desc?: Optional string for the error description.
    • onClick?: Function triggered when the refresh button is clicked.

• AnimatedNumber: Displays an animated number transition.

  • Props:
    • from?: Optional starting number.
    • to: Number to animate towards.
    • duration?: Animation duration in milliseconds.
    • balanceType?: Enum ("diamond" | "usd"), determines currency display.
    • className?: Optional string for additional CSS classes.

• Utility Functions:

  • currencyFormat(input: string | number, precision?: number): Formats a number into a currency string.
  • CurrencyFormatInput(value: string | number): Returns a formatted currency string.
  • requestVibrate(): Triggers a device vibration.
  • usePreviousBalance(value: number): Hook to store the previous balance value.

• Miscellaneous Components:

  • ModalLoading: Displays a loading modal.
  • FullLoading: Displays a full-screen loading indicator.
  • PreventNonMobile: Restricts app access to mobile devices.

Tailwind CSS

Import the Tailwind CSS styles:

import "@bullspin/p4l-games-ui/tailwind.css";

License

MIT License.