day2

src/App.js

@@ -3,13 +3,14 @@ import "./App.css";
 import Header from "./Header";
 import Content from "./Content";
 import Footer from "./Footer";
+import { Menu } from "./Menu";
+import { Button } from "./Button";
 
 function App() {
+  const menu = ["Uvod", "O nas", "Kontakt", "test"];
   return (
     <>
-      <Header />
+      <Menu menu={menu} nadpis="ReactGirls" />
-      <Content />
-      <Footer />
     </>
   );
 }

src/Button.js

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const Button = ({ children, onClick }) => {
+  //   const handleClick = () => {
+  //     console.log("klikl jsi");
+  //   };
+  return <button onClick={onClick}>{children}</button>;
+};

src/Content.js

@@ -1,4 +1,5 @@
 const Content = () => {
+  //JSX code
   return <div>Content 1</div>;
 };
 export default Content;

src/Menu.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { Button } from "./Button";
+
+export const Menu = (props) => {
+  const menu = props.menu;
+  const nadpis = props.nadpis;
+
+  // const {menu, nadpis} = props;
+
+  //const menu = ["Uvod", "O nas", "Kontakt"];
+  //const menu = [];
+  //   if (menu.length === 0) {
+  //     return <p>Menu je prazdne</p>;
+  //   }
+
+  const handleAddMenu = () => {
+    console.log("pridal jsi menu");
+  };
+
+  const handleDeleteMenu = () => {
+    console.log("smazal jsi menu");
+  };
+
+  return (
+    <nav>
+      <h1>{nadpis}</h1>
+      {menu.length === 0 ? (
+        <p>Menu je prazdne</p>
+      ) : (
+        <ul>
+          {menu.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+      )}
+
+      <Button onClick={handleDeleteMenu}>Delete</Button>
+      <Button onClick={handleAddMenu}>Add</Button>
+    </nav>
+  );
+};