darkwave/components/header/toolbar.tsx

"use client";
import Link from "next/link";
import { FaGlobe, FaEnvelope, FaRss } from "react-icons/fa";

export default function Toolbar() {
  return (
    <div className="flex h-16 justify-between items-center dark:border-white border-black border-t border-b">
      <div className="flex items-baseline">
        <p>
          <Link href="#">Science</Link> |{" "}
          <Link href="#">Software</Link> |{" "}
          <Link href="#">Hardware</Link>
        </p>
      </div>
      <div className="flex items-baseline">
        <ul className="inline-flex items-center gap-4">
          <li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
            <Link href="#">
              <FaGlobe size={24} />
            </Link>
          </li>
          <li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
            <Link href="emailto:konstantin@aderk.org">
              <FaEnvelope size={24} />
            </Link>
          </li>
          <li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
            <Link href="#">
              <FaRss size={24} />
            </Link>
          </li>
        </ul>
      </div>
    </div>
  );
}