navbar4.js

import React from "react";

import PropTypes from "prop-types";

import "./navbar4.css";

const Navbar4 = (props) => {
  return (
    <div className={`navbar4-container ${props.rootClassName} `}>
      <header data-thq="thq-navbar" className="navbar4-navbar-interactive">
        <img
          alt={props.logoAlt}
          src="/external/whatsapp%20bild%202024-03-19%20um%2017.00.17_eac967f9-1500h.jpg"
          className="navbar4-image1"
        />
        <div data-thq="thq-navbar-nav" className="navbar4-desktop-menu">
          <nav className="navbar4-links">
            <span
              className="thq-link thq-body-small"
              onClick={() => (window.location.href = "/")}
            >
              {props.link1}
            </span>
            <span className="thq-link thq-body-small"
            onClick={() => (window.location.href = "/about")}>{props.link2}</span>
            <span className="thq-link thq-body-small"
            onClick={() => (window.location.href = "/contact")}>{props.link3}</span>
            <span
              className="thq-link thq-body-small"
              onClick={() => (window.location.href = "/data")}
            >
              {props.link4}
            </span>
            <span className="thq-link thq-body-small"
            onClick={() => (window.location.href = "/historicalweather")}>{props.link5}</span>
          </nav>
          <div className="navbar4-buttons">
            <button className="thq-button-filled">{props.action1}</button>
            <button className="thq-button-outline">{props.action2}</button>
          </div>
        </div>
      </header>
    </div>
  );
};

Navbar4.defaultProps = {
  link5: "Historical weather",
  link4: "Current Weather",
  link3: "Contact",
  link2: "About",
  link1: "Home",
  logoAlt: "Weather App",
  logoSrc:
    "https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/fac575ac-7a41-484f-b7ac-875042de11f8?org_if_sml=1&force_format=original",
  action2: "/about",
  action1: "/",
  imageSrc: "23887698-7562-4cff-bf5f-d07a1767f79b",
  imageAlt: "image",
  imageSrc1: "23887698-7562-4cff-bf5f-d07a1767f79b",
  imageAlt1: "image",
  image1Src:
    "https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/fac575ac-7a41-484f-b7ac-875042de11f8?org_if_sml=1&force_format=original",
  rootClassName: "",
};

Navbar4.propTypes = {
  link5: PropTypes.string,
  link4: PropTypes.string,
  link3: PropTypes.string,
  link2: PropTypes.string,
  link1: PropTypes.string,
  logoAlt: PropTypes.string,
  logoSrc: PropTypes.string,
  action2: PropTypes.string,
  action1: PropTypes.string,
  imageSrc: PropTypes.string,
  imageAlt: PropTypes.string,
  imageSrc1: PropTypes.string,
  imageAlt1: PropTypes.string,
  image1Src: PropTypes.string,
  rootClassName: PropTypes.string,
};

export default Navbar4;