|
@@ -1,39 +0,0 @@
|
|
|
-import React from 'react';
|
|
|
-import ReactDOM from "react-dom";
|
|
|
-import styled from 'styled-components';
|
|
|
-
|
|
|
-function Welcome(props) {
|
|
|
- return <h1>Hello, {props.name}</h1>;
|
|
|
-}
|
|
|
-
|
|
|
-function MenuButton(props) {
|
|
|
- const { item } = props
|
|
|
- return (
|
|
|
- <MenuItem title={item.title}>
|
|
|
- {item.title}
|
|
|
- </MenuItem>
|
|
|
- )
|
|
|
-}
|
|
|
-
|
|
|
-const MenuItem = styled.div`
|
|
|
- color: black;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 24px auto;
|
|
|
- align-items: center;
|
|
|
- padding: 10px;
|
|
|
- transition: 0.5s ease-out;
|
|
|
- border-radius: 10px;
|
|
|
-
|
|
|
- :hover {
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
- box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1),
|
|
|
- inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.2);
|
|
|
- }
|
|
|
-`
|
|
|
-const array = [{ title: "Emil"}, { title: "Mihai"}, { title: "Paul"}]
|
|
|
-const value = JSON.parse(document.getElementById('count').textContent);
|
|
|
-const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
|
-const element = <MenuButton item={ { title: "Emil"} } />;
|
|
|
-const element2 = array.map( (title) => <MenuButton item={title} />)
|
|
|
-root.render(element2);
|
|
|
-alert(value);
|