digifi-www/src/components/Header/TopHeader.tsx

import { top_header_data } from "../../utils/data";
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 py-[0.4rem] text-[13px] font-light">
          {["Open An Account", "Internet Banking", "Contact Us"].map((text) => (
            <li key={text}>
              <a href="#" className={`p-[10px] cursor-pointer text-white`}>
                {text}
              </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]">
            {top_header_data.map(({ id, name }) => (
              <li key={id}>
                <a href="#" className={`py-[11px] px-[15px]`}>
                  {name}
                </a>
              </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;