<repo_name>kostenk0/CookBook<file_sep>/README.md
cd CookBook\client
<br/>
npm i
<br/>
npm run all
<file_sep>/client/src/Components/Header.js
import React from 'react';
import { Link } from 'react-router-dom';
import { Navbar, Nav, Form } from 'react-bootstrap'

const Header = () => {
    return (
        <Navbar bg="light" variant="light" sticky="top">
            <Navbar.Brand href="#home">Книга рецептів</Navbar.Brand>
            <Nav className="mr-auto">

            </Nav>
            <Form inline>
                <Nav.Link ><Link to="/search" style={{ color: 'grey' }}>Пошук</Link></Nav.Link>
                <Nav.Link ><Link to="/add" style={{ color: 'grey' }}>Додати</Link></Nav.Link>
            </Form>
        </Navbar>
    );
}

export default Header;<file_sep>/client/src/Components/RecipeShort.js
import React from 'react';
import { Link } from 'react-router-dom';
import { Card, Button } from 'react-bootstrap'

const RecipeShort = (props) => {
    if (props.Recipes !== null) {
        return (
            props.Recipes.map(Recipe => {
                return (

                    <Card border="info" style={{ margin: '20px' }}>
                        <Card.Body>
                            <Card.Title>{Recipe.title}</Card.Title>
                            <Card.Subtitle className="mb-2 text-muted">
                                {Recipe.ingredients.map((el, index) => {
                                    return <li key={el.name + el.amount}>
                                        {el.name + " " + el.amount}
                                    </li>
                                })}
                            </Card.Subtitle>
                            <Card.Text>
                                {Recipe.description.slice(0, 100)}...
                      </Card.Text>
                            <Link to="/details"><Button variant="light" onClick={() => props.clickRecipe(Recipe.id)}>Детальніше</Button></Link>
                        </Card.Body>
                    </Card>
                );
            })
        );
    }

    return (
        <p>Відсутні рецепти</p>
    )
}

export default RecipeShort;