Add family acc
This commit is contained in:
Ebube
@@ -0,0 +1,54 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
const CustomPopUp = ({ name, btn_class, title, children }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleOpen = () => {
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={handleOpen} className={btn_class}>
|
||||
{name}
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className={`fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50 transition-opacity ${isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
|
||||
<div className="bg-white rounded-md p-6 shadow-lg transform transition-all duration-300 ease-in-out lg:max-w-[400px] lg:min-h-[300px] max-w-[300px] min-h-[200px] w-full">
|
||||
<div className="w-full flex justify-end">
|
||||
<button onClick={handleClose}>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
</div>
|
||||
{title && <h2 className="text-xl font-bold mb-2">{title}</h2>}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomPopUp;
|
||||
|
||||
const CloseIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -12,76 +12,153 @@ export default function InputCom({
|
||||
inputHandler,
|
||||
value,
|
||||
forgotPassword,
|
||||
parentClass,
|
||||
labelClass,
|
||||
inputClass,
|
||||
fieldClass,
|
||||
onClick,
|
||||
disable,
|
||||
blurHandler
|
||||
blurHandler,
|
||||
}) {
|
||||
const inputRef = useRef(null)
|
||||
const inputRef = useRef(null);
|
||||
// Entry Validation
|
||||
// for Min Length:
|
||||
const minLengthValidation = () => {
|
||||
if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
|
||||
return 7
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
|
||||
return 3
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
|
||||
return 3
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
|
||||
return 5
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
|
||||
return 8
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
|
||||
return 3
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
|
||||
return 3
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
|
||||
return 3
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
|
||||
return 1
|
||||
if (inputRef && inputRef?.current && inputRef?.current?.name === "email") {
|
||||
return 7;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "first_name"
|
||||
) {
|
||||
return 3;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "last_name"
|
||||
) {
|
||||
return 3;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "address"
|
||||
) {
|
||||
return 5;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "password"
|
||||
) {
|
||||
return 8;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "state"
|
||||
) {
|
||||
return 3;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "province"
|
||||
) {
|
||||
return 3;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "city"
|
||||
) {
|
||||
return 3;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "amount"
|
||||
) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// for MaxLength
|
||||
const maxLengthValidation = () => {
|
||||
if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
|
||||
return 35
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
|
||||
return 25
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
|
||||
return 25
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
|
||||
return 49
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
|
||||
return 15
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
|
||||
return 25
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
|
||||
return 25
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
|
||||
return 25
|
||||
} else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
|
||||
return 9
|
||||
if (inputRef && inputRef?.current && inputRef?.current?.name === "email") {
|
||||
return 35;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "first_name"
|
||||
) {
|
||||
return 25;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "last_name"
|
||||
) {
|
||||
return 25;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "address"
|
||||
) {
|
||||
return 49;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "password"
|
||||
) {
|
||||
return 15;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "state"
|
||||
) {
|
||||
return 25;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "province"
|
||||
) {
|
||||
return 25;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "city"
|
||||
) {
|
||||
return 25;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "amount"
|
||||
) {
|
||||
return 9;
|
||||
}
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="input-com">
|
||||
<div className="flex items-center justify-between">
|
||||
{label && (
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block mb-2.5"
|
||||
htmlFor={name}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
{forgotPassword && <Link to="/forgot-password" className="text-[13.975px] leading-[20.9625px] text-[#019ef7] hover:text-[#009ef7]">Forgot Password?</Link>}
|
||||
<div className={`input-com ${parentClass}`}>
|
||||
<div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
|
||||
{label && (
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
|
||||
htmlFor={name}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
{forgotPassword && (
|
||||
<Link
|
||||
to="/forgot-password"
|
||||
className="text-[13.975px] leading-[20.9625px] text-[#019ef7] hover:text-[#009ef7]"
|
||||
>
|
||||
Forgot Password?
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
|
||||
<div
|
||||
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
|
||||
>
|
||||
<input
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={inputHandler}
|
||||
className="input-field placeholder:text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
|
||||
className={`input-field placeholder:text-base text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
|
||||
type={type}
|
||||
id={name}
|
||||
name={name}
|
||||
@@ -97,7 +174,10 @@ export default function InputCom({
|
||||
</div>
|
||||
)}
|
||||
{passIcon && (
|
||||
<div className="absolute right-6 bottom-[10px] z-10" onClick={onClick}>
|
||||
<div
|
||||
className="absolute right-6 bottom-[10px] z-10"
|
||||
onClick={onClick}
|
||||
>
|
||||
<Icons name={passIcon} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user