Added layout to lets get started bvn #20

Merged
ameye merged 1 commits from first-homepage-layout into master 2024-03-19 12:35:48 +00:00
2 changed files with 8 additions and 12 deletions
+6 -5
View File
@@ -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 (