92 lines
2.4 KiB
JavaScript
Executable File
92 lines
2.4 KiB
JavaScript
Executable File
/*!
|
|
|
|
=========================================================
|
|
* Argon Dashboard Chakra PRO - v1.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
|
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
|
|
|
* Designed and Coded by Simmmple & Creative Tim
|
|
|
|
=========================================================
|
|
|
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
|
|
*/
|
|
|
|
import { useColorMode } from '@chakra-ui/react';
|
|
import { PinInput } from 'react-input-pin-code';
|
|
|
|
export function PinInputLight(props) {
|
|
const { variant, children, ...rest } = props;
|
|
const { colorMode } = useColorMode();
|
|
return (
|
|
<>
|
|
{colorMode == 'light' ? (
|
|
<PinInput
|
|
length={4}
|
|
values={[]}
|
|
initialValue=''
|
|
inputStyle={{ background: 'white' }}
|
|
onChange={() => {}}
|
|
type={'number'}
|
|
inputMode='number'
|
|
style={{ padding: '10px' }}
|
|
autoSelect={true}
|
|
regexCriteria={/^[ A-Za-z0-9_@./#&+-]*$/}
|
|
/>
|
|
) : (
|
|
<PinInput
|
|
length={4}
|
|
values={[]}
|
|
initialValue=''
|
|
inputStyle={{ background: '#1B254B' }}
|
|
onChange={() => {}}
|
|
type={'number'}
|
|
inputMode='number'
|
|
style={{ padding: '10px' }}
|
|
autoSelect={true}
|
|
regexCriteria={/^[ A-Za-z0-9_@./#&+-]*$/}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function PinInputDark(props) {
|
|
const { variant, children, ...rest } = props;
|
|
const { colorMode } = useColorMode();
|
|
return (
|
|
<>
|
|
{colorMode === 'light' ? (
|
|
<PinInput
|
|
length={4}
|
|
values={[]}
|
|
initialValue={''}
|
|
inputStyle={{ background: 'white' }}
|
|
onChange={() => {}}
|
|
type={'number'}
|
|
inputMode='number'
|
|
style={{ padding: '10px' }}
|
|
autoSelect={true}
|
|
regexCriteria={/^[ A-Za-z0-9_@./#&+-]*$/}
|
|
/>
|
|
) : (
|
|
<PinInput
|
|
length={4}
|
|
initialValue=''
|
|
values={[]}
|
|
inputStyle={{ background: '#111C44' }}
|
|
onChange={() => {}}
|
|
type={'number'}
|
|
inputMode='number'
|
|
style={{ padding: '10px' }}
|
|
autoSelect={true}
|
|
regexCriteria={/^[ A-Za-z0-9_@./#&+-]*$/}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|