@opexa/portal-components 0.0.27 → 0.0.29

package/dist/components/AccountSecurity/AccountSecurity.jsx

@@ -0,0 +1,142 @@
+'use client';
+import { ark, createListCollection, Portal } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { useProfileCompletionQuery } from '../../client/hooks/index.js';
+import { AlertCircleIcon, CheckIcon, CheckVerified02Icon, ChevronDownIcon, EyeIcon, EyeOffIcon, } from '../../icons/index.js';
+import { Field, PasswordInput, Select } from '../../ui/index.js';
+export function AccountSecurity(props) {
+    const profileCompletionQuery = useProfileCompletionQuery();
+    const profileCompletion = profileCompletionQuery.data;
+    return (<div className={props.className}>
+      <div className="flex items-center">
+        <div className="grow">
+          <h2 className="text-text-secondary-700 text-sm font-semibold">
+            Log in password
+          </h2>
+          <p className="text-text-tertiary-600 text-sm">
+            Access your account by logging in with your name and password.
+          </p>
+        </div>
+
+        <ark.svg asChild className={twMerge('size-6', profileCompletion?.accountPassword
+            ? 'text-text-success-primary'
+            : 'text-text-warning-primary')}>
+          {profileCompletion?.accountPassword ? (<CheckVerified02Icon />) : (<AlertCircleIcon />)}
+        </ark.svg>
+      </div>
+
+      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
+        <Field.Root>
+          <PasswordInput.Root>
+            <PasswordInput.Label>Password</PasswordInput.Label>
+            <PasswordInput.Control>
+              <PasswordInput.Input />
+              <PasswordInput.VisibilityTrigger>
+                <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
+                  <EyeIcon />
+                </PasswordInput.Indicator>
+              </PasswordInput.VisibilityTrigger>
+            </PasswordInput.Control>
+          </PasswordInput.Root>
+        </Field.Root>
+
+        <Field.Root className="mt-6">
+          <Select.Root collection={secretQuestionCollection} lazyMount positioning={{
+            sameWidth: true,
+        }}>
+            <Select.Label>Security Question</Select.Label>
+            <Select.Trigger>
+              <Select.ValueText placeholder="Game Vendor"/>
+              <Select.Indicator asChild>
+                <ChevronDownIcon />
+              </Select.Indicator>
+            </Select.Trigger>
+            <Portal>
+              <Select.Positioner>
+                <Select.Content>
+                  <Select.ItemGroup>
+                    {secretQuestionCollection.items.map((provider) => (<Select.Item key={provider} item={provider}>
+                        <Select.ItemText>
+                          {secretQuestionCollection.stringifyItem(provider)}
+                        </Select.ItemText>
+                        <Select.ItemIndicator asChild>
+                          <CheckIcon />
+                        </Select.ItemIndicator>
+                      </Select.Item>))}
+                  </Select.ItemGroup>
+                </Select.Content>
+              </Select.Positioner>
+            </Portal>
+          </Select.Root>
+        </Field.Root>
+
+        <Field.Root className="mt-6">
+          <Field.Label>Answer</Field.Label>
+          <Field.Input />
+        </Field.Root>
+      </div>
+
+      <div className="mt-6 flex items-center">
+        <div className="grow">
+          <h2 className="text-text-secondary-700 text-sm font-semibold">
+            Transaction password
+          </h2>
+          <p className="text-text-tertiary-600 text-sm">
+            The transaction password secures and confirms your wallet
+            withdrawals.
+          </p>
+        </div>
+
+        <ark.svg asChild className={twMerge('size-6', profileCompletion?.accountPassword
+            ? 'text-text-success-primary'
+            : 'text-text-warning-primary')}>
+          {profileCompletion?.accountPassword ? (<CheckVerified02Icon />) : (<AlertCircleIcon />)}
+        </ark.svg>
+      </div>
+
+      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
+        <Field.Root>
+          <PasswordInput.Root>
+            <PasswordInput.Label>Password</PasswordInput.Label>
+            <PasswordInput.Control>
+              <PasswordInput.Input />
+              <PasswordInput.VisibilityTrigger>
+                <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
+                  <EyeIcon />
+                </PasswordInput.Indicator>
+              </PasswordInput.VisibilityTrigger>
+            </PasswordInput.Control>
+          </PasswordInput.Root>
+        </Field.Root>
+      </div>
+    </div>);
+}
+const SECRET_QUESTIONS = [
+    'BEST_CHILDHOOD_FRIEND',
+    'BIRTH_PLACE',
+    'FAVORITE_BOOK',
+    'FAVORITE_MOVIE',
+    'FAVORITE_TEACHER',
+    'FIRST_CAR',
+    'FIRST_PET',
+    'FIRST_SCHOOL',
+    'MOTHERS_MAIDEN_NAME',
+    'PARENTS_MET_CITY',
+];
+const SECRET_QUESIONS_MAP = {
+    BEST_CHILDHOOD_FRIEND: 'Who is your best childhood friend?',
+    BIRTH_PLACE: 'Where were you born?',
+    FAVORITE_BOOK: 'What is your favorite book?',
+    FAVORITE_MOVIE: 'What is your favorite movie?',
+    FAVORITE_TEACHER: 'Who was your favorite teacher?',
+    FIRST_CAR: 'What was your first car?',
+    FIRST_PET: 'What was your first pet?',
+    FIRST_SCHOOL: 'What was the name of your first school?',
+    MOTHERS_MAIDEN_NAME: "What is your mother's maiden name?",
+    PARENTS_MET_CITY: 'In which city did your parents meet?',
+};
+const secretQuestionCollection = createListCollection({
+    items: SECRET_QUESTIONS,
+    itemToValue: (item) => item,
+    itemToString: (item) => SECRET_QUESIONS_MAP[item],
+});

package/dist/components/AccountSecurity/index.js

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

package/dist/components/AccountVerification/AccountVerification.jsx

@@ -0,0 +1,3 @@
+export function AccountVerification() {
+    return null;
+}

package/dist/components/AccountVerification/index.js

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

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

@@ -1,4 +1,4 @@
-import { ImageProps } from 'next/image';
+import type { ImageProps } from 'next/image';
 interface Banner {
     src: ImageProps['src'];
     redirectUrl?: string;

package/dist/components/Banner/Banner.jsx

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

package/dist/components/Banner/index.js

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

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

@@ -1,4 +1,4 @@
-import { GameProvider, GameType } from '@opexa/portal-sdk-core';
+import type { GameProvider, GameType } from '@opexa/portal-sdk-core';
 export interface BetRecordsProps {
     gameTypes: GameType[];
     gameProviders: GameProvider[];