ReactKomponenty

Kolorwanie:
Status:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" type="width=width-device, initial-scale=1">
    <title>Kontakty</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <script type="text/babel">
            function AppHeader() {
            return (
                <header className="ui fixed menu">
                    <nav className="ui container">
                        <a href="#" className="header item">
                            <img className="logo" src="https://typeofweb.com/wp-content/uploads/2017/08/cropped-typeofweb_logo-04-white-smaller-1-e1504359870362.png" alt="logo" />
                            lista kontaktow
                        </a>
                        <div className="header item">
                            <button className="ui button">Dodaj</button>
                        </div>
                    </nav>
            </header>
        );
    }

    function ContatLogo({urlName}) {
        const imgUrl = `https://api.adorable.io/avatars/55${urlName}.png`
        return (
            <img src={urlName} className="ui mini rounded image"/>
        );
    }


    function ContactItem({login, name, dapartment}) {
        const imgUrl = `https://api.adorable.io/avatars/55${login}.png`
        return (
            <li className="item">
                <ContantLogin urlName={login}/>  
                <div className="content">
                    <h4 className="header">{name}</h4>
                    <div className="description">{dapartment}</div>
                </div>
            </li>
        );
    }

    function AppContatsList() {
        return (
            <ul className="ui relaxed divided list selection">
            <ContactItem
                login="typeofweb1"
                name="Lena"
                department="JavaScript Developer"
            />
            <ContactItem
                login="typeofweb2"
                name="Brian"
                dapartment="Human Resources" 
            />
            <ContactItem
                login="typeofweb3"
                name="Rick"
                dapartment="QA"
            />
            </ul>
        );
    }



    function App() {
        return (
            <div>
            <AppHeader />
                <main className="ui main text container">
                <AppContatsList />  
                </main>
            </div>
        );
    }
</script>
</body>
</html>

Copyrights 2014-2021 © Wklejaj.pl Wszelkie prawa zastrzeżone.