<repo_name>junyao-d/jr-project-one-react<file_sep>/src/components/Header/components/Navbar/components/Item/Item.jsx
import React from "react";
import "./Item.css";

const Item = ({ href, name }) => (
  <a className="item" href={href}>
    {name}
  </a>
);

export default Item;
<file_sep>/src/components/Header/components/Logo/Logo.jsx
import React from "react";
import "./Logo.css";

const Logo = () => (
  <div>
    <span className="logo">Logo Components</span>
  </div>
);

export default Logo;
<file_sep>/src/components/Header/Header.jsx
import React from "react";
import "./Header.css";
import Logo from "./components/Logo";
import NavBar from "./components/Navbar";

const Header = () => (
  <div className="header">
    Header Component
    <div className="header__logo">
      <Logo />
    </div>
    <div className="header__navbar">
      <NavBar />
    </div>
  </div>
);

export default Header;
<file_sep>/src/components/Header/components/Navbar/Navbar.jsx
import React from "react";
import "./Navbar.css";

const Navbar = () => (
  <div className="navbar">
    <div className="navbar__item">Item1</div>
    <div className="navbar__item">Item2</div>
  </div>
);

export default Navbar;
