Ebube
55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import { top_header_data } from "../../utils/data";
|
|
import { Link } from "react-router-dom";
|
|
import styles from "./header.module.css";
|
|
|
|
const TopHeader = () => {
|
|
return (
|
|
<>
|
|
<div className="flex flex-col sm:hidden bg-[#5c2684]">
|
|
<ul className="flex flex-col justify-center items-center pt-[0.4rem] text-[13px] font-light">
|
|
{["Open An Account", "Internet Banking", "Contact Us"].map((text) => (
|
|
<li key={text} className="w-full">
|
|
<a
|
|
href="#"
|
|
className={`p-2 cursor-pointer text-white w-full items-center justify-center flex`}
|
|
>
|
|
{text}
|
|
</a>
|
|
</li>
|
|
))}
|
|
<li className="w-full flex items-center justify-center">
|
|
<a
|
|
href="#"
|
|
className={`p-2 mt-2 flex gap-2 bg-[#74449E] cursor-pointer text-white w-full items-center justify-center`}
|
|
>
|
|
<p className="uppercase">Today's Share price:</p>
|
|
<span className="text-[#F8B51F] text-base md:text-lg">
|
|
$ 4.00
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className={styles.top_header}>
|
|
<div className="containerMode flex justify-between w-full text-white font-medium text-[11px] md:text-[13px]">
|
|
<ul className="flex items-center py-[0.4rem] flex-wrap">
|
|
{top_header_data.map(({ id, name, href }) => (
|
|
<li key={id}>
|
|
<Link to={href} className={`py-[11px] px-[15px]`}>
|
|
{name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="hidden sm:flex gap-2 items-center bg-[#74449E] px-2 text-[11px] md:text-[13px]">
|
|
<p className="uppercase">Today's Share price:</p>
|
|
<span className="text-[#F8B51F] text-base md:text-lg">$ 4.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TopHeader;
|