feat: OTP verify status and status messages added

src/components/Toast.tsx

@@ -0,0 +1,23 @@
+import { Alert, Snackbar, type AlertColor } from '@mui/material';
+import React, { type PropsWithChildren } from 'react';
+
+export interface ToastProps extends PropsWithChildren {
+  color: AlertColor | undefined;
+  open: boolean;
+  onClose: () => void;
+}
+
+export const Toast = ({ color, open, onClose, children }: ToastProps) => {
+  return (
+    <Snackbar sx={{ minWidth: '396px' }} open={open} onClose={onClose}>
+      <Alert
+        onClose={onClose}
+        severity={color}
+        variant="filled"
+        sx={{ width: '100%' }}
+      >
+        {children}
+      </Alert>
+    </Snackbar>
+  );
+};

src/components/components/DigitsInput.tsx

@@ -9,10 +9,16 @@ import React, {
 import { TextField, Stack } from '@mui/material';
 
 interface DigitInputProps {
+  error: boolean;
+  success: boolean;
   onChange: Dispatch<SetStateAction<string[]>>;
 }
 
-const DigitInput: React.FC<DigitInputProps> = ({ onChange }) => {
+const DigitInput: React.FC<DigitInputProps> = ({
+  onChange,
+  error,
+  success,
+}) => {
   const [code, setCode] = useState<string[]>(['', '', '', '']);
   const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
 
@@ -74,6 +80,8 @@ const DigitInput: React.FC<DigitInputProps> = ({ onChange }) => {
     >
       {code.map((digit, index) => (
         <TextField
+          error={error}
+          color={success ? 'success' : 'primary'}
           key={index}
           inputRef={(el) => (inputRefs.current[index] = el)}
           value={digit}
@@ -85,6 +93,11 @@ const DigitInput: React.FC<DigitInputProps> = ({ onChange }) => {
               maxLength: 1,
               sx: {
                 height: '72px',
+                color: error
+                  ? 'error.main'
+                  : success
+                    ? 'success.main'
+                    : 'text.primary',
               },
               style: {
                 textAlign: 'center',