monorepo/apps/web/src/app/_components/header/index.tsx

import Image from "next/image";
import Link from "next/link";

import { HeaderNav } from "./headerNav";
import { HeaderTools } from "./headerTools";

export const Header = () => {
  return (
    <header className="  tw-bg-slate-50 dark:tw-bg-white-900 tw-shadow-md tw-py-5 lg:tw-px-40 ">
      <div className="tw-flex tw-justify-between tw-items-center ">
        <div className=" tw-flex-1 tw-flex  tw-flex-row tw-ml-8 ">
          <Link href={"/"}>
            <Image
              src={"/logo.png"}
              alt="logo"
              width={174}
              height={40}
              className="tw-max-w-none"
            ></Image>
          </Link>
        </div>
        <div className=" tw-flex tw-flex-auto tw-flex-col tw-w-3/5 tw-justify-center tw-items-center ">
          <HeaderNav></HeaderNav>
        </div>
        <div className=" tw-flex-1 tw-flex  tw-flex-row-reverse tw-mr-8 ">
          <HeaderTools></HeaderTools>
        </div>
      </div>
    </header>
  );
};