actaeon/src/components/prompt-access-code.tsx
2024-04-02 01:31:25 -04:00

25 lines
1.0 KiB
TypeScript

import { generateAccessCode } from '@/helpers/access-code';
import { PromptCallback } from './prompt-modal';
import { Button, Input, Tooltip } from '@nextui-org/react';
import { ArrowPathIcon } from '@heroicons/react/24/outline';
export const promptAccessCode = (prompt: PromptCallback, message: string, onConfirm: (val: string) => void) => {
prompt({
size: '2xl',
title: 'Enter Access Code', content: (val, setVal) => <>
{message}
<div className="flex overflow-hidden rounded-lg">
<Input label="Access Code" inputMode="numeric" size="sm" type="text" maxLength={24} radius="none"
classNames={{ input: `[font-feature-settings:"fwid"] text-xs sm:text-sm` }}
value={val.match(/.{1,4}/g)?.join('-') ?? ''}
onValueChange={v => setVal(v.replace(/\D/g, ''))} />
<Tooltip content="Generate Random Code">
<Button isIconOnly color="primary" size="lg" radius="none" onPress={() => setVal(generateAccessCode())}>
<ArrowPathIcon className="h-7" />
</Button>
</Tooltip>
</div>
</>
}, v => onConfirm(v.replace(/\D/g, '')));
};