@opexa/portal-components 0.0.18 → 0.0.20

package/dist/components/TournamentCounter/TournamentCounter.mjs

@@ -1,127 +1,33 @@
-"use client";
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import x from "embla-carousel-react";
-import b from "next/link";
-import { useCallback as n, useState as a, useEffect as S } from "react";
+import { jsx as t } from "react/jsx-runtime";
 import "@opexa/portal-sdk-core";
-import "@tanstack/react-query";
-import "tiny-invariant";
 import "../../constants/index.mjs";
 import "../../utils/capitalize.mjs";
 import "../../utils/parseDecimal.mjs";
 import "../../utils/getLocaleInfo.mjs";
 import "../../utils/getQueryClient.mjs";
 import "../../utils/isMobile.mjs";
-import "lodash-es";
-import "@opexa/portal-sdk-core/object-id";
-import "../../client/hooks/useGlobalStore.mjs";
-import "../../client/hooks/useInfiniteQueryHelper.mjs";
-import "usehooks-ts";
-import { useTournamentsQuery as C } from "../../client/hooks/useTournamentsQuery.mjs";
-import { ArrowLeftIcon as w } from "../../icons/ArrowLeftIcon.mjs";
-import { ArrowRightIcon as y } from "../../icons/ArrowRightIcon.mjs";
-import { ChevronRightIcon as A } from "../../icons/ChevronRightIcon.mjs";
-import "../../ui/AlertDialog/AlertDialog.mjs";
-import "../../ui/Avatar/Avatar.mjs";
-import "../../ui/Badge/Badge.mjs";
-import { Button as c } from "../../ui/Button/Button.mjs";
-import "../../ui/Checkbox/Checkbox.mjs";
-import "../../ui/Clipboard/Clipboard.mjs";
-import "../../ui/Collapsible/Collapsible.mjs";
-import "../../ui/DatePicker/DatePicker.mjs";
-import "../../ui/Dialog/Dialog.mjs";
-import "../../ui/Drawer/Drawer.mjs";
-import "../../ui/Field/Field.mjs";
-import "@ark-ui/react";
-import "../../ui/IconButton/iconButton.recipe.mjs";
-import "../../ui/NumberInput/NumberInput.mjs";
-import "../../ui/PasswordInput/PasswordInput.mjs";
-import "../../ui/PinInput/PinInput.mjs";
-import "../../ui/Popover/Popover.mjs";
-import "tailwind-merge";
-import "../../ui/Progress/Progress.mjs";
-import "../../ui/SegmentGroup/SegmentGroup.mjs";
-import "../../ui/Select/Select.mjs";
-import "../../ui/Table/Table.mjs";
-import "../../ui/Tabs/Tabs.mjs";
-import { TournamentCounterItem as I } from "./TournamentCounterItem.mjs";
-function be(l) {
-  var s;
-  const [p, e] = x({
-    align: "start",
-    slidesToScroll: 1
-  }), d = n(() => {
-    e && e.scrollPrev();
-  }, [e]), f = n(() => {
-    e && e.scrollNext();
-  }, [e]), [u, h] = a(!1), [N, v] = a(!1), o = n(() => {
-    e && (h(e.canScrollPrev()), v(e.canScrollNext()));
-  }, [e]);
-  S(() => {
-    e && (o(), e.on("select", o), e.on("reInit", o));
-  }, [e, o]);
-  const m = ((s = C({
+import "../../server/services/getSession.mjs";
+import "date-fns";
+import "next/headers";
+import { prefetchJackpotsQuery as o } from "../../server/utils/prefetchJackpotsQuery.mjs";
+import { TournamentCounter__client as e } from "./TournamentCounter.client.mjs";
+async function q(r) {
+  return await o({
     first: 100,
     filter: {
       status: {
         equal: "ACTIVE"
+      },
+      deleted: {
+        equal: !1
       }
+    },
+    sort: {
+      cursor: "POOL",
+      order: "DESC"
     }
-  }).data) == null ? void 0 : s.pages[0].edges.map((i) => i.node)) ?? [];
-  return m.length <= 0 ? null : /* @__PURE__ */ t("div", { className: l.className, children: [
-    /* @__PURE__ */ t("div", { className: "mb-3 flex items-center justify-between md:mb-4", children: [
-      /* @__PURE__ */ r("div", { className: "text-lg font-semibold", children: l.heading ?? "Tournaments" }),
-      /* @__PURE__ */ t("div", { className: "flex items-center md:gap-3xl", children: [
-        /* @__PURE__ */ t(
-          b,
-          {
-            href: l.viewAllUrl ?? "/tournaments",
-            className: "flex gap-sm text-sm font-semibold",
-            children: [
-              "See All",
-              /* @__PURE__ */ r(A, { className: "size-5 lg:hidden" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ t("div", { className: "hidden lg:flex", children: [
-          /* @__PURE__ */ r(
-            c,
-            {
-              disabled: !u,
-              onClick: d,
-              variant: "outline",
-              colorScheme: "gray",
-              className: "rounded-r-none border-r-0",
-              "aria-label": "Previous",
-              children: /* @__PURE__ */ r(w, { className: "size-5" })
-            }
-          ),
-          /* @__PURE__ */ r(
-            c,
-            {
-              disabled: !N,
-              onClick: f,
-              variant: "outline",
-              colorScheme: "gray",
-              className: "rounded-l-none",
-              "aria-label": "Next",
-              children: /* @__PURE__ */ r(y, { className: "size-5" })
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "w-full overflow-hidden", ref: p, children: /* @__PURE__ */ r("div", { className: "flex gap-2.5", children: m.map((i, g) => /* @__PURE__ */ r(
-      I,
-      {
-        index: g,
-        tournament: i,
-        className: m.length < 2 ? "w-full" : "w-full lg:w-[calc((100%-0.75rem)/2)]"
-      },
-      i.id
-    )) }) })
-  ] });
+  }), /* @__PURE__ */ t(e, { ...r });
 }
 export {
-  be as TournamentCounter
+  q as TournamentCounter
 };

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

@@ -1,8 +1,10 @@
-import { Tournament } from '@opexa/portal-sdk-core';
+import { Jackpot } from '@opexa/portal-sdk-core';
 import { default as React } from 'react';
-export interface JackpotCounterCardProps {
-    tournament: Tournament;
+export interface TournamentCounterItemProps {
+    jackpot: Jackpot;
+    /** @default "/jackpots" */
     className?: string;
-    index: number;
+    /** @default "/tournaments" */
+    viewAllUrl?: string;
 }
-export declare function TournamentCounterItem({ tournament, className, index, }: JackpotCounterCardProps): React.JSX.Element;
+export declare function TournamentCounterItem({ jackpot, className, viewAllUrl, }: TournamentCounterItemProps): React.JSX.Element;

package/dist/components/TournamentCounter/TournamentCounterItem.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("lodash-es"),w=require("next/image"),t=require("react"),m=require("tailwind-merge");require("@opexa/portal-sdk-core");require("@tanstack/react-query");require("tiny-invariant");require("../../constants/index.js");require("../../utils/capitalize.js");const N=require("../../utils/formatNumber.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../utils/parseDecimal.js");require("@opexa/portal-sdk-core/object-id");require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");const p=require("../../client/hooks/useLocaleInfo.js");require("usehooks-ts");const M=require("../../icons/Award02Icon.js"),I=require("../../images/ball.png.js"),T=require("../../images/card.png.js"),P=require("../../images/trophy.png.js");function D({tournament:r,className:f,index:x}){const h=p.useLocaleInfo(),g=o.sum(o.map(r.rewardSettings,Number)),[i,u]=t.useState({days:0,hours:0,minutes:0,isPast:!1}),l=t.useMemo(()=>new Date(r.activationEndDateTime),[r.activationEndDateTime]),n=t.useCallback(()=>{const s=new Date,a=l.getTime()-s.getTime();if(a<=0){u({days:0,hours:0,minutes:0,isPast:!0});return}const c=Math.floor(a/1e3),y=Math.floor(c/(3600*24)),j=Math.floor(c%(3600*24)/3600),v=Math.floor(c%3600/60),q=o.pick({days:y,hours:j,minutes:v,isPast:!1},["days","hours","minutes","isPast"]);u(q)},[l]);t.useEffect(()=>{n();const s=setInterval(n,60*1e3);return()=>clearInterval(s)},[l,n]);const d=[{label:"Day",value:i.days},{label:"Hour",value:i.hours},{label:"Min",value:i.minutes}],b=[{image:P},{image:T},{image:I}];return e.jsxs("div",{className:m.twMerge("bg-gray-50 border-gray-200 flex shrink-0 flex-col space-y-2 rounded-sm border p-3 text-center",f),children:[e.jsxs("div",{className:"flex h-full w-full justify-between",children:[e.jsxs("div",{className:"border-gray-700 bg-gray-300 flex h-fit w-fit items-center rounded-full border px-2 py-0.5 text-xs font-medium",children:[e.jsx(M.Award02Icon,{className:"size-3.5"}),"Multiplier"]}),e.jsx("div",{className:"flex h-fit",children:d.map((s,a)=>e.jsxs(t.Fragment,{children:[e.jsxs("div",{className:m.twMerge("rounded-xs bg-gray-600 text-gray-50 flex h-fit w-8 flex-col items-center pb-1.5"),children:[e.jsx("span",{className:"text-base font-medium",children:String(s.value).padStart(2,"0")}),e.jsx("span",{className:"text-[8px]",children:s.label})]}),a<d.length-1&&e.jsxs("div",{className:"flex flex-col justify-center gap-[6px] px-[6px]",children:[e.jsx("div",{className:"h-1 w-1 rounded-full bg-[#09232E]"}),e.jsx("div",{className:"h-1 w-1 rounded-full bg-[#09232E]"})]})]},s.label))})]}),e.jsxs("div",{className:"flex justify-between",children:[e.jsxs("div",{className:"flex h-fit flex-col justify-between text-left",children:[e.jsxs("div",{children:[e.jsx("div",{className:"text-lg font-semibold",children:r.name}),e.jsx("div",{className:"bg-gray-950 text-gray-300 w-fit rounded-md px-2 py-1 text-2xl font-bold",children:N.formatNumber(g,{currency:h.currency.code,minDecimalPlaces:2,maxDecimalPlaces:2})})]}),e.jsx("div",{className:"mt-4 text-base font-medium",children:"Play and Win!"})]}),e.jsx("div",{className:"flex h-full items-end",children:e.jsx("div",{className:"h-24 w-auto shrink-0",children:e.jsx(w,{quality:100,width:100,height:100,src:b[x%3].image,alt:"",className:"h-full w-auto"})})})]})]})}exports.TournamentCounterItem=D;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("lodash-es"),n=require("next/image"),s=require("react"),l=require("tailwind-merge");require("@opexa/portal-sdk-core");require("@tanstack/react-query");require("tiny-invariant");require("../../constants/index.js");require("../../utils/capitalize.js");const q=require("../../utils/formatNumber.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../utils/parseDecimal.js");require("../../client/services/getSession.js");require("@opexa/portal-sdk-core/object-id");require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");const C=require("../../client/hooks/useLocaleInfo.js");require("usehooks-ts");const I=require("../../icons/ChevronRightIcon.js"),M=require("../../icons/StarIcon.js"),S=require("../../icons/Trophy01Icon.js"),P=require("../../icons/Award01Icon.js"),T=require("../../images/first-place.png.js"),z=require("../../images/trophy-two.png.js"),u=require("../../images/trophy.png.js"),k=require("next/link"),D=require("../JackpotCounter/JackpotCounterItem.module.css.js");function R({jackpot:d,className:f,viewAllUrl:b}){const y=C.useLocaleInfo(),[a,x]=s.useState({days:0,hours:0,minutes:0,seconds:0,isPast:!1}),o=s.useMemo(()=>{const t=new Date;return new Date(t.setSeconds(t.getSeconds()+2*24*60*60))},[]),c=s.useCallback(()=>{const t=new Date,r=o.getTime()-t.getTime();if(r<=0){x({days:0,hours:0,minutes:0,seconds:0,isPast:!0});return}const i=Math.floor(r/1e3),g=Math.floor(i/(3600*24)),j=Math.floor(i%(3600*24)/3600),p=Math.floor(i%3600/60),N=i%60,v=w.pick({days:g,hours:j,minutes:p,seconds:N,isPast:!1},["days","hours","minutes","seconds","isPast"]);x(v)},[o]);s.useEffect(()=>{c();const t=setInterval(c,1e3);return()=>clearInterval(t)},[o,c]);const m=[{label:"Day",value:a.days},{label:"Hour",value:a.hours},{label:"Min",value:a.minutes},{label:"Sec",value:a.seconds}];return e.jsxs("div",{className:l.twMerge("bg-bg-tertiary border-border-primary relative flex shrink-0 rounded-2xl border p-3 text-center lg:gap-6 lg:p-5",f),children:[e.jsx("div",{className:"z-1 relative flex flex-1 flex-col",children:e.jsx("div",{className:"flex h-full flex-col justify-between",children:e.jsx("div",{className:"flex w-full justify-between",children:e.jsxs("div",{className:"flex w-full flex-col",children:[e.jsxs("div",{className:"relative flex w-full justify-between",children:[e.jsxs("div",{className:"w-full",children:[e.jsxs("div",{className:"flex w-full justify-between",children:[e.jsxs("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",children:[e.jsx(P.Award01Icon,{className:"text-utility-brand-500 size-3.5"}),"Multiplier"]}),e.jsx("div",{className:"flex h-fit",children:m.map((t,r)=>e.jsxs(s.Fragment,{children:[e.jsxs("div",{className:l.twMerge("bg-bg-primary text-text-primary-900 flex h-fit w-8 flex-col items-center rounded-[4px] pb-1.5"),children:[e.jsx("span",{className:"text-base font-medium",children:String(t.value).padStart(2,"0")}),e.jsx("span",{className:"text-[8px]",children:t.label})]}),r<m.length-1&&e.jsxs("div",{className:"flex flex-col justify-center gap-[6px] px-[6px]",children:[e.jsx("div",{className:"bg-bg-primary h-1 w-1 rounded-full"}),e.jsx("div",{className:"bg-bg-primary h-1 w-1 rounded-full"})]})]},t.label))})]}),e.jsxs("div",{className:"flex justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"text-text-primary-900 mt-2.5 text-left text-lg font-medium lg:mt-5 lg:text-2xl",children:d.name}),e.jsx("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",children:q.formatNumber(d.pool,{currency:y.currency.code,minDecimalPlaces:2,maxDecimalPlaces:2})}),e.jsx("div",{className:"text-text-primary-900 mt-4 block text-left text-base lg:hidden",children:"Play and Win!"})]}),e.jsx("div",{className:"flex items-end lg:hidden",children:e.jsx(n,{src:u,alt:"trophy",quality:100,width:155,height:155,className:"h-23 w-auto"})})]})]}),e.jsx("div",{className:"z-1 absolute -bottom-16 right-0 hidden lg:block",children:e.jsx(n,{quality:100,width:155,height:155,src:u,alt:"trophy",className:"px-6 py-2.5"})})]}),e.jsxs("div",{className:"bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex",children:[e.jsx(n,{width:66,height:87,src:T,alt:"closeChest",className:"size-full h-auto w-[66px] mix-blend-luminosity"}),e.jsxs("div",{className:"flex flex-col gap-1 text-left",children:[e.jsxs("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",children:[e.jsx(S.Trophy01Icon,{className:"text-utility-brand-600 size-3.5"}),"Top Payout"]}),e.jsx("div",{className:"font-semibold",children:"No winners yet"}),e.jsx("div",{className:"text-text-secondary-700 text-xs",children:"You could be the first to win the tournament!"})]})]})]})})})}),e.jsxs("div",{className:"z-1 hidden flex-1 space-y-4 lg:block",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(n,{width:24,height:24,src:z,quality:100,alt:"leaderboardIcon",className:"size-full w-6"}),e.jsx("div",{className:"text-text-primary-900 text-lg font-semibold",children:"Starting soon!"})]}),e.jsxs(k,{className:"text-button-tertiary-fg flex text-sm font-semibold",href:b??"/tournaments",children:["See details",e.jsx(I.ChevronRightIcon,{className:"size-5"})]})]}),e.jsx("div",{className:l.twMerge("max-h-[272px] overflow-y-scroll",D.default.scrollArea),children:e.jsx("div",{className:"border-gray-200 overflow-hidden rounded-xl",children:e.jsxs("table",{className:"w-full",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium",children:[e.jsx("th",{className:"w-[52px]",children:"#"}),e.jsx("th",{children:"Player"}),e.jsx("th",{children:"Multiplier"}),e.jsx("th",{children:"Prize"})]})}),e.jsx("tbody",{children:Array.from({length:10}).map((t,r)=>e.jsxs("tr",{className:"bg-bg-primary text-text-secondary-700 text-sm",children:[e.jsx("td",{className:"border-border-secondary h-12 w-[52px] border-t-2",children:r+1<6?e.jsxs("div",{className:"relative",children:[e.jsx(M.StarIcon,{className:l.twMerge("mx-auto size-6.5",h[r].starColor)}),e.jsx("span",{className:l.twMerge("absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold",h[r].numberColor),children:r+1})]}):"-"}),e.jsx("td",{className:"border-border-secondary h-12 border-t-2",children:"-"}),e.jsx("td",{className:"border-border-secondary h-12 border-t-2",children:"-"}),e.jsx("td",{className:"border-border-secondary h-12 border-t-2",children:"-"})]},r))})]})})})]})]})}const h=[{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"}];exports.TournamentCounterItem=R;

package/dist/components/TournamentCounter/TournamentCounterItem.mjs

@@ -1,135 +1,276 @@
 "use client";
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { sum as w, map as M, pick as D } from "lodash-es";
-import I from "next/image";
-import d, { useState as P, useMemo as T, useEffect as j } from "react";
-import { twMerge as f } from "tailwind-merge";
+import { pick as P } from "lodash-es";
+import o from "next/image";
+import f, { useState as I, useMemo as S, useEffect as z } from "react";
+import { twMerge as a } from "tailwind-merge";
 import "@opexa/portal-sdk-core";
 import "@tanstack/react-query";
 import "tiny-invariant";
 import "../../constants/index.mjs";
 import "../../utils/capitalize.mjs";
-import { formatNumber as E } from "../../utils/formatNumber.mjs";
+import { formatNumber as M } from "../../utils/formatNumber.mjs";
 import "../../utils/getLocaleInfo.mjs";
 import "../../utils/getQueryClient.mjs";
 import "../../utils/isMobile.mjs";
 import "../../utils/parseDecimal.mjs";
+import "../../client/services/getSession.mjs";
 import "@opexa/portal-sdk-core/object-id";
 import "../../client/hooks/useGlobalStore.mjs";
 import "../../client/hooks/useInfiniteQueryHelper.mjs";
-import { useLocaleInfo as R } from "../../client/hooks/useLocaleInfo.mjs";
+import { useLocaleInfo as T } from "../../client/hooks/useLocaleInfo.mjs";
 import "usehooks-ts";
-import { Award02Icon as S } from "../../icons/Award02Icon.mjs";
-import k from "../../images/ball.png.mjs";
-import C from "../../images/card.png.mjs";
-import _ from "../../images/trophy.png.mjs";
-function le({
-  tournament: i,
-  className: u,
-  index: p
+import { ChevronRightIcon as j } from "../../icons/ChevronRightIcon.mjs";
+import { StarIcon as D } from "../../icons/StarIcon.mjs";
+import { Trophy01Icon as k } from "../../icons/Trophy01Icon.mjs";
+import { Award01Icon as q } from "../../icons/Award01Icon.mjs";
+import R from "../../images/first-place.png.mjs";
+import A from "../../images/trophy-two.png.mjs";
+import x from "../../images/trophy.png.mjs";
+import _ from "next/link";
+import E from "../JackpotCounter/JackpotCounterItem.module.css.mjs";
+function xe({
+  jackpot: m,
+  className: b,
+  viewAllUrl: p
 }) {
-  const h = R(), x = w(M(i.rewardSettings, Number)), [l, n] = P({
+  const y = T(), [i, c] = I({
     days: 0,
     hours: 0,
     minutes: 0,
+    seconds: 0,
     isPast: !1
-  }), s = T(
-    () => new Date(i.activationEndDateTime),
-    [i.activationEndDateTime]
-  ), m = d.useCallback(() => {
-    const a = /* @__PURE__ */ new Date(), r = s.getTime() - a.getTime();
-    if (r <= 0) {
-      n({ days: 0, hours: 0, minutes: 0, isPast: !0 });
+  }), n = S(() => {
+    const r = /* @__PURE__ */ new Date();
+    return new Date(r.setSeconds(r.getSeconds() + 2 * 24 * 60 * 60));
+  }, []), d = f.useCallback(() => {
+    const r = /* @__PURE__ */ new Date(), l = n.getTime() - r.getTime();
+    if (l <= 0) {
+      c({
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+        isPast: !0
+      });
       return;
     }
-    const o = Math.floor(r / 1e3), b = Math.floor(o / (3600 * 24)), v = Math.floor(o % (3600 * 24) / 3600), y = Math.floor(o % 3600 / 60), N = D({ days: b, hours: v, minutes: y, isPast: !1 }, [
+    const s = Math.floor(l / 1e3), g = Math.floor(s / (3600 * 24)), N = Math.floor(s % (3600 * 24) / 3600), v = Math.floor(s % 3600 / 60), w = s % 60, C = P({ days: g, hours: N, minutes: v, seconds: w, isPast: !1 }, [
       "days",
       "hours",
       "minutes",
+      "seconds",
       "isPast"
     ]);
-    n(N);
-  }, [s]);
-  j(() => {
-    m();
-    const a = setInterval(m, 60 * 1e3);
-    return () => clearInterval(a);
-  }, [s, m]);
-  const c = [
-    { label: "Day", value: l.days },
-    { label: "Hour", value: l.hours },
-    { label: "Min", value: l.minutes }
-  ], g = [
-    {
-      image: _
-    },
-    {
-      image: C
-    },
-    {
-      image: k
-    }
+    c(C);
+  }, [n]);
+  z(() => {
+    d();
+    const r = setInterval(d, 1e3);
+    return () => clearInterval(r);
+  }, [n, d]);
+  const h = [
+    { label: "Day", value: i.days },
+    { label: "Hour", value: i.hours },
+    { label: "Min", value: i.minutes },
+    { label: "Sec", value: i.seconds }
   ];
   return /* @__PURE__ */ t(
     "div",
     {
-      className: f(
-        "bg-gray-50 border-gray-200 flex shrink-0 flex-col space-y-2 rounded-sm border p-3 text-center",
-        u
+      className: a(
+        "bg-bg-tertiary border-border-primary relative flex shrink-0 rounded-2xl border p-3 text-center lg:gap-6 lg:p-5",
+        b
       ),
       children: [
-        /* @__PURE__ */ t("div", { className: "flex h-full w-full justify-between", children: [
-          /* @__PURE__ */ t("div", { className: "border-gray-700 bg-gray-300 flex h-fit w-fit items-center rounded-full border px-2 py-0.5 text-xs font-medium", children: [
-            /* @__PURE__ */ e(S, { className: "size-3.5" }),
-            "Multiplier"
+        /* @__PURE__ */ e("div", { className: "z-1 relative flex flex-1 flex-col", children: /* @__PURE__ */ e("div", { className: "flex h-full flex-col justify-between", children: /* @__PURE__ */ e("div", { className: "flex w-full justify-between", children: /* @__PURE__ */ t("div", { className: "flex w-full flex-col", children: [
+          /* @__PURE__ */ t("div", { className: "relative flex w-full justify-between", children: [
+            /* @__PURE__ */ t("div", { className: "w-full", children: [
+              /* @__PURE__ */ t("div", { className: "flex w-full justify-between", children: [
+                /* @__PURE__ */ t("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", children: [
+                  /* @__PURE__ */ e(q, { className: "text-utility-brand-500 size-3.5" }),
+                  "Multiplier"
+                ] }),
+                /* @__PURE__ */ e("div", { className: "flex h-fit", children: h.map((r, l) => /* @__PURE__ */ t(f.Fragment, { children: [
+                  /* @__PURE__ */ t(
+                    "div",
+                    {
+                      className: a(
+                        "bg-bg-primary text-text-primary-900 flex h-fit w-8 flex-col items-center rounded-[4px] pb-1.5"
+                      ),
+                      children: [
+                        /* @__PURE__ */ e("span", { className: "text-base font-medium", children: String(r.value).padStart(2, "0") }),
+                        /* @__PURE__ */ e("span", { className: "text-[8px]", children: r.label })
+                      ]
+                    }
+                  ),
+                  l < h.length - 1 && /* @__PURE__ */ t("div", { className: "flex flex-col justify-center gap-[6px] px-[6px]", children: [
+                    /* @__PURE__ */ e("div", { className: "bg-bg-primary h-1 w-1 rounded-full" }),
+                    /* @__PURE__ */ e("div", { className: "bg-bg-primary h-1 w-1 rounded-full" })
+                  ] })
+                ] }, r.label)) })
+              ] }),
+              /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ t("div", { children: [
+                  /* @__PURE__ */ e("div", { className: "text-text-primary-900 mt-2.5 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: m.name }),
+                  /* @__PURE__ */ e("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", children: M(m.pool, {
+                    currency: y.currency.code,
+                    minDecimalPlaces: 2,
+                    maxDecimalPlaces: 2
+                  }) }),
+                  /* @__PURE__ */ e("div", { className: "text-text-primary-900 mt-4 block text-left text-base lg:hidden", children: "Play and Win!" })
+                ] }),
+                /* @__PURE__ */ e("div", { className: "flex items-end lg:hidden", children: /* @__PURE__ */ e(
+                  o,
+                  {
+                    src: x,
+                    alt: "trophy",
+                    quality: 100,
+                    width: 155,
+                    height: 155,
+                    className: "h-23 w-auto"
+                  }
+                ) })
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "z-1 absolute -bottom-16 right-0 hidden lg:block", children: /* @__PURE__ */ e(
+              o,
+              {
+                quality: 100,
+                width: 155,
+                height: 155,
+                src: x,
+                alt: "trophy",
+                className: "px-6 py-2.5"
+              }
+            ) })
           ] }),
-          /* @__PURE__ */ e("div", { className: "flex h-fit", children: c.map((a, r) => /* @__PURE__ */ t(d.Fragment, { children: [
-            /* @__PURE__ */ t(
-              "div",
+          /* @__PURE__ */ t("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [
+            /* @__PURE__ */ e(
+              o,
               {
-                className: f(
-                  "rounded-xs bg-gray-600 text-gray-50 flex h-fit w-8 flex-col items-center pb-1.5"
-                ),
-                children: [
-                  /* @__PURE__ */ e("span", { className: "text-base font-medium", children: String(a.value).padStart(2, "0") }),
-                  /* @__PURE__ */ e("span", { className: "text-[8px]", children: a.label })
-                ]
+                width: 66,
+                height: 87,
+                src: R,
+                alt: "closeChest",
+                className: "size-full h-auto w-[66px] mix-blend-luminosity"
               }
             ),
-            r < c.length - 1 && /* @__PURE__ */ t("div", { className: "flex flex-col justify-center gap-[6px] px-[6px]", children: [
-              /* @__PURE__ */ e("div", { className: "h-1 w-1 rounded-full bg-[#09232E]" }),
-              /* @__PURE__ */ e("div", { className: "h-1 w-1 rounded-full bg-[#09232E]" })
+            /* @__PURE__ */ t("div", { className: "flex flex-col gap-1 text-left", children: [
+              /* @__PURE__ */ t("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", children: [
+                /* @__PURE__ */ e(k, { className: "text-utility-brand-600 size-3.5" }),
+                "Top Payout"
+              ] }),
+              /* @__PURE__ */ e("div", { className: "font-semibold", children: "No winners yet" }),
+              /* @__PURE__ */ e("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })
             ] })
-          ] }, a.label)) })
-        ] }),
-        /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ t("div", { className: "flex h-fit flex-col justify-between text-left", children: [
-            /* @__PURE__ */ t("div", { children: [
-              /* @__PURE__ */ e("div", { className: "text-lg font-semibold", children: i.name }),
-              /* @__PURE__ */ e("div", { className: "bg-gray-950 text-gray-300 w-fit rounded-md px-2 py-1 text-2xl font-bold", children: E(x, {
-                currency: h.currency.code,
-                minDecimalPlaces: 2,
-                maxDecimalPlaces: 2
-              }) })
+          ] })
+        ] }) }) }) }),
+        /* @__PURE__ */ t("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [
+          /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(
+                o,
+                {
+                  width: 24,
+                  height: 24,
+                  src: A,
+                  quality: 100,
+                  alt: "leaderboardIcon",
+                  className: "size-full w-6"
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Starting soon!" })
             ] }),
-            /* @__PURE__ */ e("div", { className: "mt-4 text-base font-medium", children: "Play and Win!" })
+            /* @__PURE__ */ t(
+              _,
+              {
+                className: "text-button-tertiary-fg flex text-sm font-semibold",
+                href: p ?? "/tournaments",
+                children: [
+                  "See details",
+                  /* @__PURE__ */ e(j, { className: "size-5" })
+                ]
+              }
+            )
           ] }),
-          /* @__PURE__ */ e("div", { className: "flex h-full items-end", children: /* @__PURE__ */ e("div", { className: "h-24 w-auto shrink-0", children: /* @__PURE__ */ e(
-            I,
+          /* @__PURE__ */ e(
+            "div",
             {
-              quality: 100,
-              width: 100,
-              height: 100,
-              src: g[p % 3].image,
-              alt: "",
-              className: "h-full w-auto"
+              className: a(
+                "max-h-[272px] overflow-y-scroll",
+                E.scrollArea
+              ),
+              children: /* @__PURE__ */ e("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: /* @__PURE__ */ t("table", { className: "w-full", children: [
+                /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [
+                  /* @__PURE__ */ e("th", { className: "w-[52px]", children: "#" }),
+                  /* @__PURE__ */ e("th", { children: "Player" }),
+                  /* @__PURE__ */ e("th", { children: "Multiplier" }),
+                  /* @__PURE__ */ e("th", { children: "Prize" })
+                ] }) }),
+                /* @__PURE__ */ e("tbody", { children: Array.from({ length: 10 }).map((r, l) => /* @__PURE__ */ t(
+                  "tr",
+                  {
+                    className: "bg-bg-primary text-text-secondary-700 text-sm",
+                    children: [
+                      /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: l + 1 < 6 ? /* @__PURE__ */ t("div", { className: "relative", children: [
+                        /* @__PURE__ */ e(
+                          D,
+                          {
+                            className: a(
+                              "mx-auto size-6.5",
+                              u[l].starColor
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ e(
+                          "span",
+                          {
+                            className: a(
+                              "absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold",
+                              u[l].numberColor
+                            ),
+                            children: l + 1
+                          }
+                        )
+                      ] }) : "-" }),
+                      /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }),
+                      /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }),
+                      /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })
+                    ]
+                  },
+                  l
+                )) })
+              ] }) })
             }
-          ) }) })
+          )
         ] })
       ]
     }
   );
 }
+const u = [
+  {
+    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"
+  }
+];
 export {
-  le as TournamentCounterItem
+  xe as TournamentCounterItem
 };

package/dist/components/Tournaments/TournamentGameProviders.d.ts

@@ -0,0 +1 @@
+export declare function TournamentGameProviders(): import("react").JSX.Element;

package/dist/components/Tournaments/TournamentGameProviders.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),q=require("embla-carousel-react"),x=require("next/image"),s=require("react"),f=require("../../icons/ArrowLeftIcon.js"),v=require("../../icons/ArrowRightIcon.js"),N=require("../../images/fantasma-games.png.js"),b=require("../../images/hacksaw-gaming.png.js");require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");const a=require("../../ui/Button/Button.js");require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");require("../../ui/Collapsible/Collapsible.js");require("../../ui/Combobox/Combobox.js");require("../../ui/DatePicker/DatePicker.js");require("../../ui/Dialog/Dialog.js");require("../../ui/Drawer/Drawer.js");require("../../ui/Field/Field.js");require("@ark-ui/react");require("../../utils/capitalize.js");require("../../utils/parseDecimal.js");require("../../constants/index.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../ui/IconButton/iconButton.recipe.js");require("../../ui/NumberInput/NumberInput.js");require("../../ui/PasswordInput/PasswordInput.js");require("../../ui/PinInput/PinInput.js");require("../../ui/Popover/Popover.js");require("tailwind-merge");require("../../ui/Progress/Progress.js");require("../../ui/SegmentGroup/SegmentGroup.js");require("../../ui/Select/Select.js");require("../../ui/Table/Table.js");require("../../ui/Tabs/Tabs.js");function g(){const[n,e]=q({align:"start",slidesToScroll:1}),t=s.useCallback(()=>{e&&e.scrollPrev()},[e]),c=s.useCallback(()=>{e&&e.scrollNext()},[e]),[o,u]=s.useState(!1),[d,m]=s.useState(!1),i=s.useCallback(()=>{e&&(u(e.canScrollPrev()),m(e.canScrollNext()))},[e]);return s.useEffect(()=>{e&&(i(),e.on("select",i),e.on("reInit",i))},[e,i]),r.jsxs("div",{className:"p-4 pb-8",children:[r.jsxs("div",{className:"flex items-center justify-between",children:[r.jsx("div",{className:"text-text-primary-900 text-lg font-semibold",children:"Tournament Game Providers"}),r.jsxs("div",{className:"hidden lg:flex",children:[r.jsx(a.Button,{disabled:!o,onClick:t,variant:"outline",colorScheme:"gray",className:"rounded-r-none border-r-0","aria-label":"Previous",children:r.jsx(f.ArrowLeftIcon,{className:"size-5"})}),r.jsxs(a.Button,{disabled:!d,onClick:c,variant:"outline",colorScheme:"gray",className:"rounded-l-none","aria-label":"Next",children:[r.jsx("span",{className:"sr-only",children:"Next"}),r.jsx(v.ArrowRightIcon,{className:"size-5"})]})]})]}),r.jsx("div",{className:"relative mt-3 overflow-hidden",ref:n,children:r.jsx("div",{className:"flex gap-3.5",children:Array.from({length:12},(h,l)=>r.jsx("div",{className:"bg-gray-800 lg:bg-bg-primary-900 min-w-27.5 rounded-md",children:r.jsx(x,{src:l%2?b:N,alt:"provider",className:"size-full"})},l))})})]})}exports.TournamentGameProviders=g;