@opexa/portal-components 0.0.29 → 0.0.30

package/dist/components/Account/Account.jsx

@@ -1,313 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useShallow } from 'zustand/shallow';
-import { useAccountQuery, useGlobalStore, useLocaleInfo, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronLeftIcon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, CreditCard02Icon, FileCheck02Icon, Gift01Icon, Lock01Icon, Logout01Icon, Settings02Icon, User01Icon, XIcon, } from '../../icons/index.js';
-import avatarPlaceholder from '../../images/placeholder-avatar.png';
-import { Badge, Button, Drawer, IconButton, Popover, Presence } from '../../ui/index.js';
-import { formatNumber, parseDecimal } from '../../utils/index.js';
-import { accountRecipe } from './account.recipe.js';
-const recipe = accountRecipe();
-export function Account(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        account: ctx.account,
-        account__mobile: ctx.account__mobile,
-        accountSettings: ctx.accountSettings,
-    })));
-    return (<>
-      <Drawer.Root open={globalStore.account__mobile.open} onOpenChange={(details) => {
-            globalStore.account__mobile.setOpen(details.open);
-            globalStore.accountSettings.setCollapsed(true);
-        }} lazyMount unmountOnExit>
-        <Drawer.Trigger asChild className="lg:hidden">
-          {props.children ?? (<IconButton size="sm" colorScheme="gray">
-              {globalStore.account__mobile.open ? (<XIcon />) : (<Image src={avatarPlaceholder} alt="" width={100} height={100} className="size-10"/>)}
-            </IconButton>)}
-        </Drawer.Trigger>
-        <Portal>
-          <Drawer.Positioner>
-            <Drawer.Content className="relative top-[var(--top,0px)] flex h-[calc(100%-var(--top,0px))] w-full flex-col px-xl py-6" style={{
-            ['--top']: props.offsetTop ?? '0px',
-        }}>
-              <Profile />
-              <Wallet />
-              <Links rewardsUrl={props.rewardsUrl} betRecordsUrl={props.betRecordsUrl} transactionsUrl={props.transactionsUrl}/>
-              <AccountSettingsMenu accountInfoUrl={props.accountInfoUrl} accountSecurityUrl={props.accountSecurityUrl} accountVerificationUrl={props.accountVerificationUrl} accountPaymentMethodsUrl={props.accountPaymentMethodsUrl}/>
-            </Drawer.Content>
-          </Drawer.Positioner>
-        </Portal>
-      </Drawer.Root>
-
-      <Popover.Root open={globalStore.account.open} onOpenChange={(details) => {
-            globalStore.account.setOpen(details.open);
-            globalStore.accountSettings.setCollapsed(true);
-        }} lazyMount unmountOnExit positioning={{
-            placement: 'bottom',
-            strategy: 'fixed',
-        }}>
-        <Popover.Trigger className="hidden lg:flex" asChild>
-          {props.children ?? (<IconButton size="sm" colorScheme="gray">
-              <Image src={avatarPlaceholder} alt="" width={48} height={48} className="size-10"/>
-            </IconButton>)}
-        </Popover.Trigger>
-        <Portal>
-          <Popover.Positioner>
-            <Popover.Content className="border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out">
-              <Profile />
-              <Wallet />
-              <Links rewardsUrl={props.rewardsUrl} betRecordsUrl={props.betRecordsUrl} transactionsUrl={props.transactionsUrl}/>
-              <AccountSettingsMenu accountInfoUrl={props.accountInfoUrl} accountSecurityUrl={props.accountSecurityUrl} accountVerificationUrl={props.accountVerificationUrl} accountPaymentMethodsUrl={props.accountPaymentMethodsUrl}/>
-            </Popover.Content>
-          </Popover.Positioner>
-        </Portal>
-      </Popover.Root>
-    </>);
-}
-function Profile() {
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    return (<div className="flex shrink-0 items-center gap-lg">
-      <Image src={avatarPlaceholder} alt="" width={48} height={48} className="size-12"/>
-      <div className="grow">
-        <p className="text-text-secondary-700 font-semibold leading-tight">
-          {account?.name}
-        </p>
-        <p className="text-text-tertiary-600 leading-tight">
-          {account?.nickName ?? account?.emailAddress ?? account?.realName}
-        </p>
-      </div>
-
-      <Badge.Root colorScheme={account?.verified ? 'success' : 'danger'} className="self-start">
-        <Badge.Indicator />
-        <Badge.Label>
-          {account?.verified ? 'Verified' : 'Unverified'}
-        </Badge.Label>
-      </Badge.Root>
-    </div>);
-}
-function Wallet() {
-    const localeInfo = useLocaleInfo();
-    const walletQuery = useWalletQuery({
-        refetchInterval: 1000,
-    });
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        profile: ctx.account,
-        mobileProfile: ctx.account__mobile,
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const depositBalance = parseDecimal(walletQuery.data?.balance, 0);
-    const bonusBalance = parseDecimal(walletQuery.data?.bonus, 0);
-    const totalBalance = depositBalance + bonusBalance;
-    return (<div className="border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl">
-      <div className="text-text-secondary-700 text-sm">Total Balance</div>
-      <div className="text-3xl font-bold">
-        {formatNumber(totalBalance, {
-            currency: localeInfo?.currency.code,
-            minDecimalPlaces: 2,
-        })}
-      </div>
-      <div className="mt-1.5 flex gap-7xl">
-        <div>
-          <p className="text-text-secondary-700 text-2xs">Deposit Balance</p>
-          <p className="text-medium text-text-primary-brand">
-            {formatNumber(depositBalance, {
-            currency: localeInfo?.currency.code,
-            minDecimalPlaces: 2,
-        })}
-          </p>
-        </div>
-        <div>
-          <p className="text-text-secondary-700 text-2xs">Bonus Balance</p>
-          <p className="text-medium text-text-primary-brand">
-            {formatNumber(bonusBalance, {
-            currency: localeInfo?.currency.code,
-            minDecimalPlaces: 2,
-        })}
-          </p>
-        </div>
-      </div>
-
-      <div className="mt-3 flex gap-lg">
-        <Button size="xs" variant="outline" onClick={() => {
-            globalStore.depositWithdrawal.setOpen(true);
-            globalStore.depositWithdrawal.setTab('WITHDRAWAL');
-            globalStore.profile.setOpen(false);
-            globalStore.mobileProfile.setOpen(false);
-        }}>
-          Withdraw
-        </Button>
-        <Button size="xs" onClick={() => {
-            globalStore.depositWithdrawal.setOpen(true);
-            globalStore.depositWithdrawal.setTab('DEPOSIT');
-            globalStore.profile.setOpen(false);
-            globalStore.mobileProfile.setOpen(false);
-        }}>
-          Deposit
-        </Button>
-      </div>
-    </div>);
-}
-function Links(props) {
-    const signOutMutation = useSignOutMutation();
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        account: ctx.account,
-        account__mobile: ctx.account__mobile,
-        accountSettings: ctx.accountSettings,
-        messages: ctx.messages,
-    })));
-    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
-    return (<nav className={recipe.nav({ className: 'mt-xl' })}>
-      <ul>
-        <li className={recipe.navItemRoot()}>
-          <button type="button" className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-            globalStore.messages.setOpen(true);
-        }}>
-            <Logout01Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Notifications</span>
-            <span className={recipe.navItemBadge()} data-type="warning">
-              {unreadMessagesCountQuery.data ?? 0}
-            </span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </button>
-        </li>
-        <li className={recipe.navItemRoot()}>
-          <Link href={props.rewardsUrl ?? '/rewards'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-        }}>
-            <Gift01Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Rewards</span>
-            <span className={recipe.navItemBadge()} data-type="warning">
-              0
-            </span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </Link>
-        </li>
-      </ul>
-
-      <ul>
-        <li className={recipe.navItemRoot()}>
-          <button type="button" className={recipe.navItemLink()} onClick={() => {
-            globalStore.accountSettings.setCollapsed(false);
-        }}>
-            <Settings02Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Settings</span>
-            <span className={recipe.navItemBadge()} data-type="error">
-              <AlertCircleIcon />
-            </span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </button>
-        </li>
-      </ul>
-
-      <ul>
-        <li className={recipe.navItemRoot()}>
-          <Link href={props.betRecordsUrl ?? '/bet-records'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-        }}>
-            <CoinsStacked02Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Bet Records</span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </Link>
-        </li>
-        <li className={recipe.navItemRoot()}>
-          <Link href={props.transactionsUrl ?? '/transactions'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-        }}>
-            <CoinsSwap02Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Transactions</span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </Link>
-        </li>
-      </ul>
-
-      <ul>
-        <li className={recipe.navItemRoot()}>
-          <button type="button" className={recipe.navItemLink()} disabled={signOutMutation.isPending} onClick={() => {
-            signOutMutation.mutate();
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-        }}>
-            <Logout01Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Log Out</span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </button>
-        </li>
-      </ul>
-    </nav>);
-}
-function AccountSettingsMenu(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        account: ctx.account,
-        account__mobile: ctx.account__mobile,
-        accountSettings: ctx.accountSettings,
-    })));
-    return (<Presence present={!globalStore.accountSettings.collapsed} lazyMount className="bg-bg-primary ui-open:animate-slide-in-right ui-closed:animate-slide-out-right absolute left-0 top-0 size-full overflow-y-auto">
-      <div className="bg-bg-primary-alt flex items-center gap-xl px-xl py-md">
-        <IconButton size="2xs" variant="outline" colorScheme="gray" onClick={() => {
-            globalStore.accountSettings.setCollapsed(true);
-        }}>
-          <ChevronLeftIcon />
-        </IconButton>
-        <h2 className="text-text-primary-900 text-lg font-semibold">
-          Settings
-        </h2>
-      </div>
-      <nav className={recipe.nav({ className: 'p-4' })}>
-        <ul>
-          <li className={recipe.navItemRoot()}>
-            <Link href={props.accountInfoUrl ?? '/account'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-            globalStore.accountSettings.setCollapsed(true);
-        }}>
-              <User01Icon className={recipe.navItemIcon()}/>
-              <span className={recipe.navItemLabel()}>Account Info</span>
-              <ChevronRightIcon className={recipe.navItemIndicator()}/>
-            </Link>
-          </li>
-          <li className={recipe.navItemRoot()}>
-            <Link href={props.accountSecurityUrl ?? '/account/security'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-            globalStore.accountSettings.setCollapsed(true);
-        }}>
-              <Lock01Icon className={recipe.navItemIcon()}/>
-              <span className={recipe.navItemLabel()}>Security</span>
-              <ChevronRightIcon className={recipe.navItemIndicator()}/>
-            </Link>
-          </li>
-          <li className={recipe.navItemRoot()}>
-            <Link href={props.accountVerificationUrl ?? '/account/verification'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-            globalStore.accountSettings.setCollapsed(true);
-        }}>
-              <FileCheck02Icon className={recipe.navItemIcon()}/>
-              <span className={recipe.navItemLabel()}>
-                Personal Verification
-              </span>
-              <ChevronRightIcon className={recipe.navItemIndicator()}/>
-            </Link>
-          </li>
-          <li className={recipe.navItemRoot()}>
-            <Link href={props.accountPaymentMethodsUrl ?? '/account/payment-methods'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-            globalStore.accountSettings.setCollapsed(true);
-        }}>
-              <CreditCard02Icon className={recipe.navItemIcon()}/>
-              <span className={recipe.navItemLabel()}>Payment Methods</span>
-              <ChevronRightIcon className={recipe.navItemIndicator()}/>
-            </Link>
-          </li>
-        </ul>
-      </nav>
-    </Presence>);
-}

package/dist/components/AccountInfo/AccountInfo.jsx

@@ -1,113 +0,0 @@
-'use client';
-import { format } from 'date-fns';
-import { noop } from 'lodash-es';
-import Image from 'next/image';
-import { useAccountQuery, useLocaleInfo, useMobileNumberParser, } from '../../client/hooks/index.js';
-import { FacebookIcon, GoogleIcon } from '../../icons/index.js';
-import avatar from '../../images/placeholder-avatar.png';
-import { Button, Field, IconButton } from '../../ui/index.js';
-export function AccountInfo(props) {
-    const localeInfo = useLocaleInfo();
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    const mobileNumberParser = useMobileNumberParser();
-    return (<div className={props.className}>
-      <h2 className="text-text-secondary-700 text-sm font-semibold">
-        Profile Info
-      </h2>
-      <div className="bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border">
-        <div className="border-border-secondary border-b px-4 py-5">
-          <div className="flex items-center gap-xl">
-            <Image src={avatar} alt="" width={80} height={80} className="size-14 shrink-0 rounded-md object-cover"/>
-            <div>
-              <h3 className="text-text-secondary-700 text-lg font-semibold leading-tight">
-                {account?.name}
-              </h3>
-              <p className="text-text-tertiary-600 leading-tight">
-                {account?.emailAddress ?? account?.nickName}
-              </p>
-            </div>
-          </div>
-        </div>
-        <div className="flex justify-end px-xl py-lg">
-          <Button size="sm" variant="outline" fullWidth={false}>
-            Upload New Avatar
-          </Button>
-        </div>
-      </div>
-
-      <h2 className="text-text-secondary-700 mt-6 text-sm font-semibold">
-        Contact Info
-      </h2>
-
-      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
-        <Field.Root>
-          <Field.Label>Mobile Number</Field.Label>
-          <div className="relative">
-            <localeInfo.country.flag className="pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2"/>
-            <Field.Input className="pl-10.5" value={account?.mobileNumber
-            ? mobileNumberParser.format(account?.mobileNumber)
-            : ''} readOnly onChange={noop}/>
-          </div>
-        </Field.Root>
-
-        <Field.Root className="mt-6">
-          <Field.Label>Email address</Field.Label>
-          <Field.Input defaultValue={account?.emailAddress ?? ''}/>
-        </Field.Root>
-      </div>
-
-      <h2 className="text-text-secondary-700 mt-6 text-sm font-semibold">
-        Personal Data
-      </h2>
-
-      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
-        <Field.Root>
-          <Field.Label>Real name</Field.Label>
-          <Field.Input value={account?.realName ?? ''} onChange={noop} readOnly/>
-        </Field.Root>
-
-        <Field.Root className="mt-6">
-          <Field.Label>Date of birth</Field.Label>
-          <Field.Input type="date" value={account?.birthDay ? format(account.birthDay, 'yyyy-MM-dd') : ''} readOnly/>
-        </Field.Root>
-      </div>
-
-      <h2 className="text-text-secondary-700 mt-6 text-sm font-semibold">
-        Account Connections
-      </h2>
-
-      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
-        <div className="flex items-center">
-          <div className="flex grow items-center gap-sm">
-            <IconButton variant="outline" colorScheme="gray">
-              <GoogleIcon className="size-6"/>
-            </IconButton>
-            <div>
-              <p className="text-sm font-medium leading-tight">Google</p>
-              <p className="text-text-secondary-700 mt-xs text-xs leading-tight">
-                Not Connected
-              </p>
-            </div>
-          </div>
-          <Button fullWidth={false}>Connect</Button>
-        </div>
-        <div className="mt-6 flex items-center">
-          <div className="flex grow items-center gap-sm">
-            <IconButton variant="outline" colorScheme="gray">
-              <FacebookIcon className="size-6"/>
-            </IconButton>
-            <div>
-              <p className="text-sm font-medium leading-tight">Facebook</p>
-              <p className="text-text-success-primary-600 mt-xs text-xs leading-tight">
-                Connected
-              </p>
-            </div>
-          </div>
-          <button className="text-button-tertiary-error-fg text-sm font-semibold">
-            Disconnect
-          </button>
-        </div>
-      </div>
-    </div>);
-}

package/dist/components/AccountSecurity/AccountSecurity.jsx

@@ -1,142 +0,0 @@
-'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/Banner/Banner.jsx

@@ -1,51 +0,0 @@
-'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>);
-}