@opexa/portal-components 0.0.27 → 0.0.28

package/dist/components/Jackpots/JackpotItemDesktop.jsx

@@ -0,0 +1,251 @@
+'use client';
+import { Progress } from '@ark-ui/react';
+import Image from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, Trophy01Icon, } from '../../icons';
+import { StarIcon } from '../../icons/StarIcon';
+import closeChest from '../../images/close-chest.png';
+import firstPlace from '../../images/first-place.png';
+import leaderboard from '../../images/leaderboard.png';
+import openChest from '../../images/open-chest.png';
+import { formatNumber } from '../../utils';
+import { maskName } from '../JackpotCounter/JackpotCounterItem';
+import styles from '../JackpotCounter/JackpotCounterItem.module.css';
+import { JackpotGameProviders } from './JackpotGameProviders';
+import { JackpotRules } from './JackpotRules';
+import { useJackpotItemData } from './useJackpotItemData';
+export function JackpotItemDesktop({ jackpot, gameProviders, }) {
+    const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, calculatePercentage, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotItemData({ jackpot, gameProviders });
+    return (<div className={twMerge('bg-bg-tertiary border-border-primary rounded-2xl border')}>
+      <div className={twMerge('relative flex shrink-0 p-3 text-center lg:gap-4 lg:p-5')}>
+        <div className="z-1 relative flex flex-1 flex-col">
+          <div className="flex h-full flex-col justify-between">
+            <div className="flex w-full justify-between">
+              <div className="flex w-full flex-col">
+                <div className="relative flex w-full justify-between">
+                  <div>
+                    {/* Badge */}
+
+                    {isPayingOut ? (<div className="border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
+                        <span className="full bg-utility-success-500 size-1.5 animate-pulse rounded"/>
+                        Paying Out
+                      </div>) : (<div className="border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
+                        <ArrowNarrowUpRightIcon className="text-utility-blue-500 size-3.5"/>
+                        Accumulating
+                      </div>)}
+
+                    <div className="text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl">
+                      {jackpot.name}
+                    </div>
+
+                    <div className="bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl">
+                      {formatNumber(jackpotAmount, {
+            currency: localeInfo.currency.code,
+            minDecimalPlaces: 2,
+            maxDecimalPlaces: 2,
+        })}
+                    </div>
+                  </div>
+                  <div className="z-1 bottom-[-60] right-0 block lg:absolute">
+                    <Image width={150} height={150} src={isPayingOut ? openChest : closeChest} alt="closeChest" quality={100} className="h-25 w-25 lg:h-37.5 lg:w-37.5 size-full p-2"/>
+                  </div>
+                </div>
+
+                {/* Top Payout */}
+
+                {topJackpotPayout.amount ? (<div>
+                    <div className="bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex">
+                      <div className="border-yellow-400 relative h-18 w-18 rounded-full border">
+                        <div className="bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold">
+                          1st
+                        </div>
+                      </div>
+
+                      <div className="flex flex-col gap-1 text-left">
+                        <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium">
+                          <Trophy01Icon className="text-utility-brand-600 size-3.5"/>
+                          Top Payout
+                        </div>
+
+                        <div className="font-semibold">
+                          {maskName(topJackpotPayout.member.name)}
+                        </div>
+                        <div className="text-brand-400 text-2xl">
+                          {formatNumber(topJackpotPayout.amount, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}
+                        </div>
+                      </div>
+                    </div>
+                  </div>) : (<div className="bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex">
+                    <Image width={66} height={87} src={firstPlace} alt="closeChest" className="size-full h-auto w-[66px] mix-blend-luminosity"/>
+
+                    <div className="flex flex-col gap-1 text-left">
+                      <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium">
+                        <Trophy01Icon className="text-utility-brand-600 size-3.5"/>
+                        Top Payout
+                      </div>
+
+                      <div className="font-semibold">No winners yet</div>
+                      <div className="text-text-secondary-700 text-xs">
+                        You could be the first to win the tournament!
+                      </div>
+                    </div>
+                  </div>)}
+              </div>
+            </div>
+          </div>
+
+          {/* Progress Bar */}
+
+          <div className="mt-3 lg:mt-4">
+            <div className="mb-1 flex justify-between">
+              <div className="text-text-primary-900 text-xs font-semibold">
+                {formatNumber(0, {
+            currency: localeInfo.currency.code,
+            compact: true,
+        })}
+              </div>
+
+              <div className="relative flex items-center justify-end gap-1.5">
+                {isPayingOut ? (<div className="flex w-6 items-center">
+                    <div className={twMerge('absolute left-0', styles['animate-arrow-red-flash-1'])}>
+                      <ChevronLeftIcon className="size-4.5"/>
+                    </div>
+                    <div className={twMerge('absolute left-1.5', styles['animate-arrow-red-flash-2'])}>
+                      <ChevronLeftIcon className="size-4.5"/>
+                    </div>
+                    <div className={twMerge('absolute left-3', styles['animate-arrow-red-flash-3'])}>
+                      <ChevronLeftIcon className="size-4.5"/>
+                    </div>
+                  </div>) : (<div className="flex w-6 items-center">
+                    <div className={twMerge('absolute left-0', styles['animate-arrow-green-flash-1'])}>
+                      <ChevronRightIcon className="size-4.5"/>
+                    </div>
+                    <div className={twMerge('absolute left-1.5', styles['animate-arrow-green-flash-2'])}>
+                      <ChevronRightIcon className="size-4.5"/>
+                    </div>
+                    <div className={twMerge('absolute left-3', styles['animate-arrow-green-flash-3'])}>
+                      <ChevronRightIcon className="size-4.5"/>
+                    </div>
+                  </div>)}
+
+                <div className="text-text-primary-900 text-xs font-semibold">
+                  {formatNumber(jackpot?.maximumJackpotPoolLimit, {
+            currency: localeInfo.currency.code,
+            compact: true,
+        })}
+                </div>
+              </div>
+            </div>
+
+            <Progress.Root className="bg-bg-primary h-2 w-full rounded-full lg:h-4" max={100} value={calculatePercentage(Number(jackpot.pool), Number(jackpot.maximumJackpotPoolLimit))}>
+              <Progress.Track className="bg-bg-primary h-full overflow-hidden rounded-full">
+                <Progress.Range className="bg-brand-500 relative h-full overflow-hidden rounded-full pl-1.5">
+                  <div className="pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5" aria-hidden="true">
+                    {arrowImages}
+                  </div>
+                </Progress.Range>
+              </Progress.Track>
+            </Progress.Root>
+
+            <div className="mt-1 block text-start text-2xs lg:hidden">
+              {isPayingOut
+            ? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
+                currency: localeInfo.currency.code,
+                compact: true,
+            })} Play now for your chance to win big! 🔥`
+            : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0)}
+            </div>
+          </div>
+        </div>
+
+        {/* Leaderboard */}
+
+        <div className="z-1 hidden flex-1 space-y-4 lg:block">
+          <div className="flex items-center justify-between">
+            <div className="flex gap-2">
+              <Image width={24} height={24} src={leaderboard} quality={100} alt="leaderboardIcon" className="size-full h-auto w-6"/>
+              <div className="text-text-primary-900 text-lg font-semibold">
+                {jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!'}
+              </div>
+            </div>
+
+            <JackpotRules jackpotRules={jackpot.description}/>
+          </div>
+
+          <div className={twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea'])}>
+            <div className="border-gray-200 overflow-hidden rounded-xl">
+              <table className="w-full">
+                <thead>
+                  <tr className="bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium">
+                    <th className="w-[52px]">#</th>
+                    <th>Player</th>
+                    <th>Multiplier</th>
+                    <th>Prize</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {jackpotPayouts.length ? (<>
+                      {jackpotPayouts.map((jackpotPayout, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 text-sm">
+                          <td className="border-border-secondary h-12 w-[52px] border-t-2">
+                            {i + 1 < 6 ? (<div className="relative">
+                                <StarIcon className={twMerge('mx-auto size-6.5', starTierStyles[i].starColor)}/>
+                                <span className={twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor)}>
+                                  {i + 1}
+                                </span>
+                              </div>) : (i + 1)}
+                          </td>
+                          <td className="border-border-secondary h-12 border-t-2">
+                            {maskName(jackpotPayout.member.name)}
+                          </td>
+                          <td className="border-border-secondary h-12 border-t-2">
+                            {jackpotPayout.multiplier}x
+                          </td>
+                          <td className="border-border-secondary text-brand-400 h-12 border-t-2">
+                            {formatNumber(jackpotPayout.amount, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                    maxDecimalPlaces: 2,
+                })}
+                          </td>
+                        </tr>))}
+                    </>) : (<>
+                      {Array.from({ length: 10 }).map((_, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 text-sm">
+                          <td className="border-border-secondary h-12 w-[52px] border-t-2">
+                            {i + 1 < 6 ? (<div className="relative">
+                                <StarIcon className={twMerge('mx-auto size-6.5', starTierStyles[i].starColor)}/>
+                                <span className={twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor)}>
+                                  {i + 1}
+                                </span>
+                              </div>) : (i + 1)}
+                          </td>
+                          <td className="border-border-secondary h-12 border-t-2">
+                            -
+                          </td>
+                          <td className="border-border-secondary h-12 border-t-2">
+                            -
+                          </td>
+                          <td className="border-border-secondary h-12 border-t-2">
+                            -
+                          </td>
+                        </tr>))}
+                    </>)}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        {/* Paying Out Animation */}
+
+        {isPayingOut && (<div className={twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl')}></div>)}
+      </div>
+
+      {/* Game Providers */}
+
+      {Boolean(filteredGameProviders.length) && (<JackpotGameProviders gameProviders={gameProviders}/>)}
+    </div>);
+}

package/dist/components/Jackpots/JackpotItemMobile.d.ts

@@ -1,5 +1,5 @@
-import { Jackpot } from '@opexa/portal-sdk-core';
-import { GameProviderData } from '../../types';
+import type { Jackpot } from '@opexa/portal-sdk-core';
+import type { GameProviderData } from '../../types';
 export interface JackpotItemMobileProps {
     jackpot: Jackpot;
     /** @default "/jackpots" */

package/dist/components/Jackpots/JackpotItemMobile.jsx

@@ -0,0 +1,271 @@
+'use client';
+import { Progress } from '@ark-ui/react';
+import Image from 'next/image';
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, Trophy01Icon, } from '../../icons';
+import { ArrowNarrowDownIcon } from '../../icons/ArrowNarrowDownIcon';
+import { ArrowNarrowUpIcon } from '../../icons/ArrowNarrowUpIcon';
+import { StarIcon } from '../../icons/StarIcon';
+import closeChest from '../../images/close-chest.png';
+import firstPlace from '../../images/first-place.png';
+import openChest from '../../images/open-chest.png';
+import { Button } from '../../ui';
+import { formatNumber } from '../../utils';
+import { maskName } from '../JackpotCounter/JackpotCounterItem';
+import styles from '../JackpotCounter/JackpotCounterItem.module.css';
+import { JackpotGameProviders } from './JackpotGameProviders';
+import { JackpotRules } from './JackpotRules';
+import { useJackpotItemData } from './useJackpotItemData';
+export function JackpotItemMobile({ jackpot, gameProviders, }) {
+    const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, calculatePercentage, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotItemData({ jackpot, gameProviders });
+    const [isDetailsVisible, setIsDetailsVisible] = useState(false);
+    return (<div className="bg-bg-primary border-border-primary rounded-2xl border">
+      <div className={twMerge('bg-bg-tertiary relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5')}>
+        <div className="z-1 relative flex flex-1 flex-col">
+          <div className="flex h-full flex-col justify-between">
+            <div className="flex w-full justify-between">
+              <div className="flex w-full flex-col">
+                <div className="relative flex w-full justify-between">
+                  <div>
+                    {/* Badge */}
+
+                    {isPayingOut ? (<div className="border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
+                        <span className="full bg-utility-success-500 size-1.5 animate-pulse rounded"/>
+                        Paying Out
+                      </div>) : (<div className="border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
+                        <ArrowNarrowUpRightIcon className="text-utility-blue-500 size-3.5"/>
+                        Accumulating
+                      </div>)}
+
+                    <div className="text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl">
+                      {jackpot.name}
+                    </div>
+
+                    <div className="bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl">
+                      {formatNumber(jackpotAmount, {
+            currency: localeInfo.currency.code,
+            minDecimalPlaces: 2,
+            maxDecimalPlaces: 2,
+        })}
+                    </div>
+                  </div>
+                  <div className="z-1 bottom-[-60] right-0 block lg:absolute">
+                    <Image width={100} height={100} src={isPayingOut ? openChest : closeChest} alt="closeChest" quality={100} className="size-full h-auto w-[100px]"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Progress Bar */}
+
+          <div className="mt-3 lg:mt-4">
+            <div className="mb-1 flex justify-between">
+              <div className="text-text-primary-900 text-xs font-semibold">
+                {formatNumber(0, {
+            currency: localeInfo.currency.code,
+            compact: true,
+        })}
+              </div>
+
+              <div className="relative flex items-center justify-end gap-1.5">
+                {isPayingOut ? (<div className="flex w-6 items-center">
+                    <div className={twMerge('absolute left-0', styles['animate-arrow-red-flash-1'])}>
+                      <ChevronLeftIcon className="size-4.5"/>
+                    </div>
+                    <div className={twMerge('absolute left-1.5', styles['animate-arrow-red-flash-2'])}>
+                      <ChevronLeftIcon className="size-4.5"/>
+                    </div>
+                    <div className={twMerge('absolute left-3', styles['animate-arrow-red-flash-3'])}>
+                      <ChevronLeftIcon className="size-4.5"/>
+                    </div>
+                  </div>) : (<div className="flex w-6 items-center">
+                    <div className={twMerge('absolute left-0', styles['animate-arrow-green-flash-1'])}>
+                      <ChevronRightIcon className="size-4.5"/>
+                    </div>
+                    <div className={twMerge('absolute left-1.5', styles['animate-arrow-green-flash-2'])}>
+                      <ChevronRightIcon className="size-4.5"/>
+                    </div>
+                    <div className={twMerge('absolute left-3', styles['animate-arrow-green-flash-3'])}>
+                      <ChevronRightIcon className="size-4.5"/>
+                    </div>
+                  </div>)}
+
+                <div className="text-text-primary-900 text-xs font-semibold">
+                  {formatNumber(jackpot?.maximumJackpotPoolLimit, {
+            currency: localeInfo.currency.code,
+            compact: true,
+        })}
+                </div>
+              </div>
+            </div>
+
+            <Progress.Root className="bg-bg-primary h-2 w-full rounded-full lg:h-4" max={100} value={calculatePercentage(Number(jackpot.pool), Number(jackpot.maximumJackpotPoolLimit))}>
+              <Progress.Track className="bg-bg-primary h-full overflow-hidden rounded-full">
+                <Progress.Range className="bg-brand-500 relative h-full overflow-hidden rounded-full pl-1.5">
+                  <div className="pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5" aria-hidden="true">
+                    {arrowImages}
+                  </div>
+                </Progress.Range>
+              </Progress.Track>
+            </Progress.Root>
+
+            <div className="mt-1 block text-start text-2xs lg:hidden">
+              {isPayingOut
+            ? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
+                currency: localeInfo.currency.code,
+                compact: true,
+            })} Play now for your chance to win big! 🔥`
+            : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0)}
+            </div>
+          </div>
+
+          {/* Top Payout */}
+
+          {topJackpotPayout.amount ? (<div>
+              <div className="bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4">
+                <div className="border-yellow-400 relative h-18 w-18 rounded-full border">
+                  <div className="bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold">
+                    1st
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-1 text-left">
+                  <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium">
+                    <Trophy01Icon className="text-utility-brand-600 size-3.5"/>
+                    Top Payout
+                  </div>
+
+                  <div className="font-semibold">
+                    {maskName(topJackpotPayout.member.name)}
+                  </div>
+                  <div className="text-brand-400 text-2xl">
+                    {formatNumber(topJackpotPayout.amount, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}
+                  </div>
+                </div>
+              </div>
+            </div>) : (<div className="bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4">
+              <Image width={66} height={87} src={firstPlace} alt="closeChest" className="size-full h-auto w-[66px] mix-blend-luminosity"/>
+
+              <div className="flex flex-col gap-1 text-left">
+                <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium">
+                  <Trophy01Icon className="text-utility-brand-600 size-3.5"/>
+                  Top Payout
+                </div>
+
+                <div className="font-semibold">No winners yet</div>
+                <div className="text-text-secondary-700 text-xs">
+                  You could be the first to win the tournament!
+                </div>
+              </div>
+            </div>)}
+
+          <Button variant="outline" className={twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex')} onClick={() => setIsDetailsVisible(!isDetailsVisible)}>
+            <div className="flex gap-1.5">
+              See Details
+              <ArrowNarrowDownIcon className="size-5"/>
+            </div>
+          </Button>
+        </div>
+
+        {/* Paying Out Animation */}
+
+        {isPayingOut && (<div className={twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:150px]')}></div>)}
+      </div>
+
+      {isDetailsVisible && (<div>
+          {/* Leaderboard */}
+
+          <div className="z-1 flex-1">
+            <div className="flex items-center justify-between p-3">
+              <div className="flex gap-2">
+                <div className="text-text-primary-900 text-lg font-semibold">
+                  {jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!'}
+                </div>
+              </div>
+              <JackpotRules jackpotRules={jackpot.description}/>
+            </div>
+
+            <div>
+              <div className="border-gray-200 overflow-hidden">
+                <table className="w-full">
+                  <thead>
+                    <tr className="bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium">
+                      <th className="w-[52px]">#</th>
+                      <th>Player</th>
+                      <th>Multiplier</th>
+                      <th>Prize</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {jackpotPayouts.length ? (<>
+                        {jackpotPayouts.map((jackpotPayout, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 text-center text-sm">
+                            <td className="border-border-secondary h-12 w-[52px] border-t-2">
+                              {i + 1 < 6 ? (<div className="relative">
+                                  <StarIcon className={twMerge('mx-auto size-6.5', starTierStyles[i].starColor)}/>
+                                  <span className={twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor)}>
+                                    {i + 1}
+                                  </span>
+                                </div>) : (i + 1)}
+                            </td>
+                            <td className="border-border-secondary h-12 border-t-2">
+                              {maskName(jackpotPayout.member.name)}
+                            </td>
+                            <td className="border-border-secondary h-12 border-t-2">
+                              {jackpotPayout.multiplier}x
+                            </td>
+                            <td className="border-border-secondary text-brand-400 h-12 border-t-2">
+                              {formatNumber(jackpotPayout.amount, {
+                        currency: localeInfo.currency.code,
+                        minDecimalPlaces: 2,
+                        maxDecimalPlaces: 2,
+                    })}
+                            </td>
+                          </tr>))}
+                      </>) : (<>
+                        {Array.from({ length: 10 }).map((_, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 text-center text-sm">
+                            <td className="border-border-secondary h-12 w-[52px] border-t-2">
+                              {i + 1 < 6 ? (<div className="relative">
+                                  <StarIcon className={twMerge('mx-auto size-6.5', starTierStyles[i].starColor)}/>
+                                  <span className={twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor)}>
+                                    {i + 1}
+                                  </span>
+                                </div>) : (i + 1)}
+                            </td>
+                            <td className="border-border-secondary h-12 border-t-2">
+                              -
+                            </td>
+                            <td className="border-border-secondary h-12 border-t-2">
+                              -
+                            </td>
+                            <td className="border-border-secondary h-12 border-t-2">
+                              -
+                            </td>
+                          </tr>))}
+                      </>)}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          {/* Game Providers */}
+
+          {Boolean(filteredGameProviders.length) && (<JackpotGameProviders gameProviders={gameProviders}/>)}
+
+          <div className="m-3">
+            <Button variant="outline" className={twMerge('px-3.5 py-2.5 text-sm', !isDetailsVisible ? 'hidden' : 'flex')} onClick={() => setIsDetailsVisible(!isDetailsVisible)}>
+              <div className="flex gap-1.5">
+                Hide
+                <ArrowNarrowUpIcon className="size-5"/>
+              </div>
+            </Button>
+          </div>
+        </div>)}
+    </div>);
+}

package/dist/components/Jackpots/JackpotRules.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface JackpotRulesProps {
     children?: ReactNode;
     jackpotRules: string;

package/dist/components/Jackpots/JackpotRules.jsx

@@ -0,0 +1,43 @@
+'use client';
+import { Portal } from '@ark-ui/react';
+import { XIcon } from '../../icons';
+import { Flag06Icon } from '../../icons/Flag06Icon';
+import { Dialog } from '../../ui';
+export function JackpotRules(props) {
+    return (<Dialog.Root lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
+      <Dialog.Trigger asChild>
+        {props.children ?? (<button type="button" className="text-button-tertiary-fg flex text-sm font-semibold">
+            Jackpot Rules
+          </button>)}
+      </Dialog.Trigger>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content className="bg-bg-primary-alt mx-auto h-full w-full items-start lg:h-auto lg:w-[640px] lg:rounded-xl">
+            <div className="p-3xl">
+              <div className="mb-3 flex justify-between">
+                <div className="bg-bg-tertiary border-border-primary flex h-12 w-12 items-center justify-center rounded-lg border">
+                  <Flag06Icon className="text-text-tertiary-600 size-full p-3"/>
+                </div>
+
+                <Dialog.CloseTrigger>
+                  <XIcon />
+                </Dialog.CloseTrigger>
+              </div>
+
+              <div className="text-text-primary-900 text-lg font-semibold">
+                Jackpot Rules
+              </div>
+              <div className="text-text-tertiary-600 mt-1 text-sm">
+                Terms and Conditions
+              </div>
+            </div>
+
+            <div className="border-gray-800 border-t-1 pb-3">
+              <div dangerouslySetInnerHTML={{ __html: props.jackpotRules }} className="px-3xl py-3"/>
+            </div>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>);
+}

package/dist/components/Jackpots/Jackpots.d.ts

@@ -1,4 +1,4 @@
-import { GameProviderData } from '../../types';
+import type { GameProviderData } from '../../types';
 export interface JackpotsProps {
     /** @default "Promos" */
     heading?: string;

package/dist/components/Jackpots/Jackpots.jsx

@@ -0,0 +1,37 @@
+'use client';
+import { useJackpotsQuery } from '../../client/hooks';
+import { JackpotItemDesktop } from './JackpotItemDesktop';
+import { JackpotItemMobile } from './JackpotItemMobile';
+export function Jackpots(props) {
+    const jackpotsQuery = useJackpotsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+            deleted: {
+                equal: false,
+            },
+        },
+        sort: {
+            cursor: 'POOL',
+            order: 'DESC',
+        },
+    });
+    const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    if (jackpots.length <= 0)
+        return null;
+    return (<div className={props.className}>
+      <div className="mb-3 text-lg font-semibold lg:mb-4.5">
+        {props.heading ?? 'Jackpots'}
+      </div>
+
+      <div className="hidden flex-col gap-6 lg:flex">
+        {jackpots.map((jackpot) => (<JackpotItemDesktop gameProviders={props.gameProviders} key={jackpot.id} jackpot={jackpot} viewAllUrl={props.viewAllUrl}/>))}
+      </div>
+
+      <div className="flex flex-col gap-6 lg:hidden">
+        {jackpots.map((jackpot) => (<JackpotItemMobile gameProviders={props.gameProviders} key={jackpot.id} jackpot={jackpot} viewAllUrl={props.viewAllUrl}/>))}
+      </div>
+    </div>);
+}

package/dist/components/Jackpots/index.js

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

package/dist/components/Jackpots/useJackpotItemData.d.ts

@@ -1,14 +1,14 @@
-import { Jackpot } from '@opexa/portal-sdk-core';
-import { GameProviderData } from '../../types';
+import type { Jackpot } from '@opexa/portal-sdk-core';
+import type { GameProviderData } from '../../types';
 export interface JackpotItemProps {
     jackpot: Jackpot;
     gameProviders: GameProviderData[];
 }
 export declare function useJackpotItemData({ jackpot, gameProviders, }: JackpotItemProps): {
-    jackpotPayouts: import('@opexa/portal-sdk-core').JackpotPayout[];
-    topJackpotPayout: import('@opexa/portal-sdk-core').JackpotPayout;
+    jackpotPayouts: import("@opexa/portal-sdk-core").JackpotPayout[];
+    topJackpotPayout: import("@opexa/portal-sdk-core").JackpotPayout;
     filteredGameProviders: GameProviderData[];
-    localeInfo: import('../../utils').LocaleInfo;
+    localeInfo: import("../../utils").LocaleInfo;
     isPayingOut: boolean;
     jackpotAmount: string;
     arrowImages: import("react").JSX.Element[];