Added layout to lets get started bvn #20
@@ -3,10 +3,9 @@ import { LowerMenuItem } from "./Header";
|
|||||||
|
|
||||||
interface MenuItemProps {
|
interface MenuItemProps {
|
||||||
item: LowerMenuItem;
|
item: LowerMenuItem;
|
||||||
subItemClass: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const HeaderMenuItem: React.FC<MenuItemProps> = ({ item, subItemClass }) => {
|
const HeaderMenuItem: React.FC<MenuItemProps> = ({ item }) => {
|
||||||
const [showSubMenu, setShowSubMenu] = useState<boolean>(false);
|
const [showSubMenu, setShowSubMenu] = useState<boolean>(false);
|
||||||
|
|
||||||
const toggleSubMenu = () => {
|
const toggleSubMenu = () => {
|
||||||
@@ -15,15 +14,17 @@ const HeaderMenuItem: React.FC<MenuItemProps> = ({ item, subItemClass }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
className={`cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt] ${subItemClass && "flex gap-4"}`}
|
className={`cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]`}
|
||||||
onMouseEnter={toggleSubMenu}
|
onMouseEnter={toggleSubMenu}
|
||||||
onMouseLeave={toggleSubMenu}
|
onMouseLeave={toggleSubMenu}
|
||||||
>
|
>
|
||||||
<a href={item.linkPath}>{item.name}</a>
|
<a href={item.linkPath}>{item.name}</a>
|
||||||
{showSubMenu && item.subItems && (
|
{showSubMenu && item.subItems && (
|
||||||
<ul className={`absolute bg-white shadow-md p-4 z-20 ${setShowSubMenu && subItemClass}`}>
|
<ul
|
||||||
|
className={`absolute bg-white shadow-md p-4 z-20 `}
|
||||||
|
>
|
||||||
{item.subItems.map((subItem, index) => (
|
{item.subItems.map((subItem, index) => (
|
||||||
<HeaderMenuItem key={index} item={subItem} subItemClass="relative" />
|
<HeaderMenuItem key={index} item={subItem} />
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -11,17 +11,13 @@ const LetsGetStarted: React.FC = () => {
|
|||||||
const inputRef = React.useRef<HTMLInputElement>(null);
|
const inputRef = React.useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
let {
|
let { name, value } = e.target as HTMLInputElement;
|
||||||
target: { name, value },
|
|
||||||
} = e;
|
|
||||||
|
|
||||||
setPinValues((prev) => ({ ...prev, [name]: value }));
|
setPinValues((prev) => ({ ...prev, [name]: value }));
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
|
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
|
||||||
let {
|
let { name, value } = e.target as HTMLInputElement;
|
||||||
target: { name, value },
|
|
||||||
} = e;
|
|
||||||
|
|
||||||
if (name === "bvn") {
|
if (name === "bvn") {
|
||||||
const regex = /^[0-9]+$/;
|
const regex = /^[0-9]+$/;
|
||||||
@@ -34,7 +30,6 @@ const LetsGetStarted: React.FC = () => {
|
|||||||
console.log("object not found");
|
console.log("object not found");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(e.target.value.length);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user