1import { useState } from 'react';
2
3import { InlineLinkButton } from '@proton/atoms';
4import { Toggle, TotpInput } from '@proton/components';
5
6import { getTitle } from '../../helpers/title';
7import mdx from './TotpInput.mdx';
8
9export default {
10    component: TotpInput,
11    title: getTitle(__filename, false),
12    parameters: {
13        docs: {
14            page: mdx,
15        },
16    },
17};
18
19export const Basic = () => {
20    const [value, setValue] = useState('');
21
22    return <TotpInput value={value} length={6} onValue={setValue} type="number" />;
23};
24
25export const Length = () => {
26    const [value, setValue] = useState('1a2b');
27    const [centerDivider, setCenterDivider] = useState(true);
28
29    return (
30        <div>
31            <div className="mb-4">
32                <div className="flex justify-center">
33                    <div className="w-2/3">
34                        <TotpInput
35                            value={value}
36                            length={4}
37                            onValue={setValue}
38                            type="alphabet"
39                            centerDivider={centerDivider}
40                        />
41                    </div>
42                </div>
43            </div>
44            <div className="flex items-center gap-4">
45                <Toggle
46                    id="center-divider"
47                    checked={centerDivider}
48                    onChange={(e) => setCenterDivider(e.target.checked)}
49                />
50                <label htmlFor="center-divider" className="flex-1 text-sm">
51                    Enable center divider
52                </label>
53            </div>
54        </div>
55    );
56};
57
58export const Type = () => {
59    const [value, setValue] = useState('');
60    const [type, setType] = useState<'number' | 'alphabet'>('alphabet');
61
62    return (
63        <>
64            <TotpInput value={value} length={type === 'alphabet' ? 8 : 6} onValue={setValue} type={type} />
65            <InlineLinkButton
66                className="mt-4"
67                onClick={() => {
68                    setType(type === 'alphabet' ? 'number' : 'alphabet');
69                }}
70            >
71                {type === 'alphabet' ? 'Use type `number`' : 'Use type `alphabet`'}
72            </InlineLinkButton>
73        </>
74    );
75};