set ZOO

package.json

@@ -3,9 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^2.6.1",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "framer-motion": "^10.12.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/Animal.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { useState } from "react";
+import { Button } from "./Button";
+
+export const Animal = (props) => {
+  //  const [animal = props.animal, addAnimal] = useState(false);
+  const animal = props.animal;
+  const nadpis = props.nadpis;
+  const emptyZoo = !props.animal.length;
+
+  //   let emptyZoo = () => {
+  //     if (animal.length === 0) return true;
+  //     else return false;
+  //   };
+
+  ///const [setAnimal] = useState(animal);
+
+  //if (animal.length === 0) emptyZoo = true;
+  //else emptyZoo = false;
+
+  const handleAddAnimal = () => {
+    //const arr = ['zirafa', 'mroz'];
+    //setAnimal(current => [...current, ...arr]);
+    //emptyZoo = false;
+    console.log("pridal jsi...");
+  };
+
+  const handleDeleteAnimal = () => {
+    //emptyZoo = true;
+    console.log("smazal jsi...");
+  };
+
+  return (
+    <nav>
+      <h1>{nadpis}</h1>
+      {emptyZoo ? (
+        <p>Zoo je prazdne</p>
+      ) : (
+        <ul>
+          {animal.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+      )}
+
+      <Button className="primary" isDisabled={emptyZoo} onClick={handleDeleteAnimal}>
+        Delete
+      </Button>
+      <Button className="secondary" onClick={handleAddAnimal}>Add</Button>
+    </nav>
+  );
+};

src/App.css

@@ -36,3 +36,67 @@
     transform: rotate(360deg);
   }
 }
+
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+nav {
+  height: 100px;
+  background-color: darkslategrey;
+  color: antiquewhite;
+  font-size: 1.2rem;
+  font-weight: 400;
+  padding: 0 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+}
+
+h1 {
+  font-size: 2.2rem;
+  font-weight: 500;
+}
+
+ul {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 2rem;
+  list-style: none;
+}
+
+li:hover {
+  opacity: 80%;
+  cursor: pointer;
+}
+
+button {
+  padding: 0.75rem 1.2rem;
+  border-radius: 0.75rem;
+  border: none;
+  cursor: pointer;
+}
+
+button:hover {
+  opacity: 80%;
+}
+
+.primary {
+  background-color: antiquewhite;
+  font-weight: bold;
+}
+
+.secondary {
+  background-color: darkslategrey;
+  color: antiquewhite;
+  border: 1px solid antiquewhite;
+}
+
+.buttons-wrapper {
+  display: flex;
+  gap: 0.75rem;
+}

src/App.js

@@ -1,16 +1,26 @@
 import logo from "./logo.svg";
 import "./App.css";
+// import `ChakraProvider` component
+//import { ChakraProvider } from "@chakra-ui/react";
 import Header from "./Header";
 import Content from "./Content";
 import Footer from "./Footer";
 import { Menu } from "./Menu";
-import { Button } from "./Button";
+import { Animal } from "./Animal";
+//import { Button } from "./Button";
+//import { Button, ButtonGroup } from "@chakra-ui/react";
 
 function App() {
-  const menu = ["Uvod", "O nas", "Kontakt", "test"];
+  
+  //const animal = [];
+  const animal = ["Lev", "Lachtan", "Varan", "Slon"];
+  
   return (
     <>
-      <Menu menu={menu} nadpis="ReactGirls" />
+      <Animal animal={animal} nadpis="Super ZOO" />
+      {/* <ChakraProvider>
+        <Button colorScheme="teal">Chakra button</Button>
+      </ChakraProvider> */}
     </>
   );
 }

src/Button.js

@@ -1,8 +1,17 @@
+import { propNames } from "@chakra-ui/react";
 import React from "react";
+import { useState } from 'react'
 
-export const Button = ({ children, onClick }) => {
+
+
+
+export const Button = ({ children, onClick, isDisabled, className}) => {
+  //const [disabled, setDisabled] = useState(false)
   //   const handleClick = () => {
   //     console.log("klikl jsi");
   //   };
-  return <button onClick={onClick}>{children}</button>;
+  
+
+
+  return <button className={className} disabled={isDisabled} onClick={onClick}>{children}</button>;
 };

src/Menu.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Button } from "./Button";
 
+
 export const Menu = (props) => {
   const menu = props.menu;
   const nadpis = props.nadpis;