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> |
