@opexa/portal-components 0.0.29 → 0.0.31

package/dist/components/Tournaments/TournamentItem.jsx

@@ -1,224 +0,0 @@
-'use client';
-import { pick } from 'lodash-es';
-import Image from 'next/image';
-import React, { useEffect, useMemo, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useLocaleInfo } from '../../client/hooks/index.js';
-import { Trophy01Icon } from '../../icons/index.js';
-import { Award01Icon } from '../../icons/Award01Icon';
-import { StarIcon } from '../../icons/StarIcon';
-import firstPlace from '../../images/first-place.png';
-import trophyTwo from '../../images/trophy-two.png';
-import trophy from '../../images/trophy.png';
-import { formatNumber } from '../../utils/index.js';
-import styles from '../JackpotCounter/JackpotCounterItem.module.css';
-import { TournamentGameProviders } from './TournamentGameProviders';
-import { TournamentRules } from './TournamentRules';
-export function TournamentItem({ jackpot }) {
-    const localeInfo = useLocaleInfo();
-    const [timeRemaining, setTimeRemaining] = useState({
-        days: 0,
-        hours: 0,
-        minutes: 0,
-        seconds: 0,
-        isPast: false,
-    });
-    // Temp Date
-    const activationEndDateTime = useMemo(() => {
-        const now = new Date();
-        return new Date(now.setSeconds(now.getSeconds() + 2 * 24 * 60 * 60)); // Add 2 days in seconds
-    }, []);
-    const calculateRemainingTime = React.useCallback(() => {
-        const now = new Date();
-        const diffMs = activationEndDateTime.getTime() - now.getTime();
-        if (diffMs <= 0) {
-            setTimeRemaining({
-                days: 0,
-                hours: 0,
-                minutes: 0,
-                seconds: 0,
-                isPast: true,
-            });
-            return;
-        }
-        const diffSeconds = Math.floor(diffMs / 1000);
-        const days = Math.floor(diffSeconds / (3600 * 24));
-        const hours = Math.floor((diffSeconds % (3600 * 24)) / 3600);
-        const minutes = Math.floor((diffSeconds % 3600) / 60);
-        const seconds = diffSeconds % 60;
-        const updated = pick({ days, hours, minutes, seconds, isPast: false }, [
-            'days',
-            'hours',
-            'minutes',
-            'seconds',
-            'isPast',
-        ]);
-        setTimeRemaining(updated);
-    }, [activationEndDateTime]);
-    useEffect(() => {
-        calculateRemainingTime();
-        const interval = setInterval(calculateRemainingTime, 1000); // Update every second
-        return () => clearInterval(interval);
-    }, [activationEndDateTime, calculateRemainingTime]);
-    const timeParts = [
-        { label: 'Day', value: timeRemaining.days },
-        { label: 'Hour', value: timeRemaining.hours },
-        { label: 'Min', value: timeRemaining.minutes },
-        { label: 'Sec', value: timeRemaining.seconds },
-    ];
-    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-6 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 className="w-full">
-                    <div className="flex w-full justify-between">
-                      {/* Badge */}
-
-                      <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
-                        <Award01Icon className="text-utility-brand-500 size-3.5"/>
-                        Multiplier
-                      </div>
-
-                      {/* Time */}
-
-                      <div className="flex h-fit">
-                        {timeParts.map((part, idx) => (<React.Fragment key={part.label}>
-                            <div className={twMerge('bg-bg-primary text-text-primary-900 flex h-fit w-8 flex-col items-center rounded-[4px] pb-1.5')}>
-                              <span className="text-base font-medium">
-                                {String(part.value).padStart(2, '0')}
-                              </span>
-                              <span className="text-[8px]">{part.label}</span>
-                            </div>
-
-                            {idx < timeParts.length - 1 && (<div className="flex flex-col justify-center gap-[6px] px-[6px]">
-                                <div className="bg-bg-primary h-1 w-1 rounded-full"/>
-                                <div className="bg-bg-primary h-1 w-1 rounded-full"/>
-                              </div>)}
-                          </React.Fragment>))}
-                      </div>
-                    </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(jackpot.pool, {
-            currency: localeInfo.currency.code,
-            minDecimalPlaces: 2,
-            maxDecimalPlaces: 2,
-        })}
-                    </div>
-                  </div>
-                  <div className="z-1 bottom-[-60] right-0 block lg:absolute">
-                    <div className="h-[155px] w-auto shrink-0">
-                      <Image quality={100} width={155} height={155} src={trophy} alt="trophy" className="px-6 py-2.5"/>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Top Payout */}
-
-                <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>
-        </div>
-
-        {/* Leaderboard */}
-
-        <div className="z-1 hidden flex-1 space-y-4 lg:block">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Image width={24} height={24} src={trophyTwo} quality={100} alt="leaderboardIcon" className="size-full w-6"/>
-              <div className="text-text-primary-900 text-lg font-semibold">
-                Starting soon!
-              </div>
-            </div>
-
-            <TournamentRules jackpotRules="<strong>Rules and guidelines <br> 1/20/2025 ~ 1/21/2025</strong><br><br>
-            <p>1. The contest prize pool closely depends on the bankroll — the more players bet, the bigger it grows.</p>"/>
-          </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>
-                  {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>) : ('-')}
-                      </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>
-      </div>
-
-      {/* Game Providers */}
-
-      <TournamentGameProviders />
-    </div>);
-}
-const starTierStyles = [
-    {
-        starColor: 'text-yellow-400',
-        numberColor: 'text-bg-primary',
-    },
-    {
-        starColor: 'text-utility-gray-700',
-        numberColor: 'text-bg-primary',
-    },
-    {
-        starColor: 'text-yellow-700',
-        numberColor: 'text-bg-primary',
-    },
-    {
-        starColor: 'text-bg-quaternary',
-        numberColor: 'text-text-primary-900',
-    },
-    {
-        starColor: 'text-bg-quaternary',
-        numberColor: 'text-text-primary-900',
-    },
-];

package/dist/components/Tournaments/TournamentItemMobile.jsx

@@ -1,242 +0,0 @@
-'use client';
-import { pick } from 'lodash-es';
-import Image from 'next/image';
-import React, { useEffect, useMemo, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useLocaleInfo } from '../../client/hooks/index.js';
-import { Trophy01Icon } from '../../icons/index.js';
-import { ArrowNarrowDownIcon } from '../../icons/ArrowNarrowDownIcon';
-import { ArrowNarrowUpIcon } from '../../icons/ArrowNarrowUpIcon';
-import { Award01Icon } from '../../icons/Award01Icon';
-import { StarIcon } from '../../icons/StarIcon';
-import firstPlace from '../../images/first-place.png';
-import trophy from '../../images/trophy.png';
-import { Button } from '../../ui/index.js';
-import { formatNumber } from '../../utils/index.js';
-import { TournamentGameProviders } from './TournamentGameProviders';
-import { TournamentRules } from './TournamentRules';
-export function TournamentItemMobile({ jackpot }) {
-    const localeInfo = useLocaleInfo();
-    const [isDetailsVisible, setIsDetailsVisible] = useState(false);
-    const [timeRemaining, setTimeRemaining] = useState({
-        days: 0,
-        hours: 0,
-        minutes: 0,
-        seconds: 0,
-        isPast: false,
-    });
-    // Temp Date
-    const activationEndDateTime = useMemo(() => {
-        const now = new Date();
-        return new Date(now.setSeconds(now.getSeconds() + 2 * 24 * 60 * 60)); // Add 2 days in seconds
-    }, []);
-    const calculateRemainingTime = React.useCallback(() => {
-        const now = new Date();
-        const diffMs = activationEndDateTime.getTime() - now.getTime();
-        if (diffMs <= 0) {
-            setTimeRemaining({
-                days: 0,
-                hours: 0,
-                minutes: 0,
-                seconds: 0,
-                isPast: true,
-            });
-            return;
-        }
-        const diffSeconds = Math.floor(diffMs / 1000);
-        const days = Math.floor(diffSeconds / (3600 * 24));
-        const hours = Math.floor((diffSeconds % (3600 * 24)) / 3600);
-        const minutes = Math.floor((diffSeconds % 3600) / 60);
-        const seconds = diffSeconds % 60;
-        const updated = pick({ days, hours, minutes, seconds, isPast: false }, [
-            'days',
-            'hours',
-            'minutes',
-            'seconds',
-            'isPast',
-        ]);
-        setTimeRemaining(updated);
-    }, [activationEndDateTime]);
-    useEffect(() => {
-        calculateRemainingTime();
-        const interval = setInterval(calculateRemainingTime, 1000); // Update every second
-        return () => clearInterval(interval);
-    }, [activationEndDateTime, calculateRemainingTime]);
-    const timeParts = [
-        { label: 'Day', value: timeRemaining.days },
-        { label: 'Hour', value: timeRemaining.hours },
-        { label: 'Min', value: timeRemaining.minutes },
-        { label: 'Sec', value: timeRemaining.seconds },
-    ];
-    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 className="w-full">
-                    <div className="flex w-full justify-between">
-                      {/* Badge */}
-
-                      <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
-                        <Award01Icon className="text-utility-brand-500 size-3.5"/>
-                        Multiplier
-                      </div>
-
-                      {/* Time */}
-
-                      <div className="flex h-fit">
-                        {timeParts.map((part, idx) => (<React.Fragment key={part.label}>
-                            <div className={twMerge('bg-bg-primary text-text-primary-900 flex h-fit w-8 flex-col items-center rounded-[4px] pb-1.5')}>
-                              <span className="text-base font-medium">
-                                {String(part.value).padStart(2, '0')}
-                              </span>
-                              <span className="text-[8px]">{part.label}</span>
-                            </div>
-
-                            {idx < timeParts.length - 1 && (<div className="flex flex-col justify-center gap-[6px] px-[6px]">
-                                <div className="bg-bg-primary h-1 w-1 rounded-full"/>
-                                <div className="bg-bg-primary h-1 w-1 rounded-full"/>
-                              </div>)}
-                          </React.Fragment>))}
-                      </div>
-                    </div>
-
-                    <div className="text-text-primary-900 mt-2.5 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(jackpot.pool, {
-            currency: localeInfo.currency.code,
-            minDecimalPlaces: 2,
-            maxDecimalPlaces: 2,
-        })}
-                    </div>
-                  </div>
-                  <div className="z-1 absolute bottom-[-60] right-0">
-                    <Image width={72.94} height={93} src={trophy} alt="trophy" quality={100} className="size-full"/>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Top Payout */}
-
-          <div className="bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4 lg:hidden">
-            <div className="h-[87px] min-w-[66px]">
-              <Image width={66} height={87} src={firstPlace} alt="closeChest" className="size-full mix-blend-luminosity"/>
-            </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">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>
-      </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">
-                  Starting soon!
-                </div>
-              </div>
-              <TournamentRules jackpotRules="<strong>Rules and guidelines <br> 1/20/2025 ~ 1/21/2025</strong><br><br>
-                      <p>1. The contest prize pool closely depends on the bankroll — the more players bet, the bigger it grows.</p>"/>
-            </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>
-                    {Array.from({ length: 5 }).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>) : ('-')}
-                        </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 */}
-
-          <TournamentGameProviders />
-
-          <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>);
-}
-const starTierStyles = [
-    {
-        starColor: 'text-yellow-400',
-        numberColor: 'text-bg-primary',
-    },
-    {
-        starColor: 'text-utility-gray-700',
-        numberColor: 'text-bg-primary',
-    },
-    {
-        starColor: 'text-yellow-700',
-        numberColor: 'text-bg-primary',
-    },
-    {
-        starColor: 'text-bg-quaternary',
-        numberColor: 'text-text-primary-900',
-    },
-    {
-        starColor: 'text-bg-quaternary',
-        numberColor: 'text-text-primary-900',
-    },
-];

package/dist/components/Tournaments/TournamentRules.jsx

@@ -1,43 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../icons/index.js';
-import { Flag06Icon } from '../../icons/Flag06Icon';
-import { Dialog } from '../../ui/index.js';
-export function TournamentRules(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">
-            Tournament 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">
-                Tournament 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/Tournaments/Tournaments.jsx

@@ -1,37 +0,0 @@
-'use client';
-import { useJackpotsQuery } from '../../client/hooks/index.js';
-import { TournamentItem } from './TournamentItem';
-import { TournamentItemMobile } from './TournamentItemMobile';
-export function Tournaments(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 ?? 'Tournaments'}
-      </div>
-
-      <div className="hidden flex-col gap-6 lg:flex">
-        {jackpots.map((jackpot) => (<TournamentItem key={jackpot.id} jackpot={jackpot}/>))}
-      </div>
-
-      <div className="flex flex-col gap-6 lg:hidden">
-        {jackpots.map((jackpot) => (<TournamentItemMobile key={jackpot.id} jackpot={jackpot}/>))}
-      </div>
-    </div>);
-}