Initial commit

2025-10-11 11:55:25 +08:00
parent 467dad8449
commit 8107dee8d3
2879 changed files with 610575 additions and 0 deletions
--- a/src/components/PinInput/PinInput.js
+++ b/src/components/PinInput/PinInput.js
@@ -0,0 +1,91 @@
+/*!
+
+=========================================================
+* 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_@./#&+-]*$/}
+        />
+      )}
+    </>
+  );
+}