This commit is contained in:
Tomas Krejci 2023-05-26 16:52:31 +02:00
parent 2c9043428c
commit fc53a5c7cb
7 changed files with 1786 additions and 5 deletions

1641
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",

52
src/Animal.js Normal file
View File

@ -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>
);
};

View File

@ -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;
}

View File

@ -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> */}
</>
);
}

View File

@ -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>;
};

View File

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