Appunti React

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "./components/Card";

const title = "My Profile";

function doSomething() {
  console.log("do something");
}

const doSomething2 = () => {
  console.log("do something");
};

const doSometing3 = () => {};

doSomething2();

export default function App() {
  function openUrl(url) {
    window.open(url);
  }

  function alertMe() {
    alert("alert me");
    // window.alert(props.url)
  }

  return (
    <div>

      <Alert icon="fa fa-linkedin" iconClick={doSomething}>
        bla bla
      </Alert>

      <Card title="my Stats" icon="fa fa-bluetooth" iconClick={alertMe}>
        chart!
      </Card>

      <Card
        title="My FB"
        icon="fa fa-facebook"
        iconClick={() => openUrl("https://www.facebook.com")}
      >
        bla bla
      </Card>

      <Card
        title="My Linkedin"
        icon="fa fa-linkedin"
        iconClick={function () {
          openUrl("https://www.linkedin.com");
        }}
      >
        bla bla
      </Card>

    </div>
  );
}




// ===========================


export function Card(props) {
  return (
    <div className="card">
      <div className="card-header">
        {props.title}
        <div className="pull-right">
          <i className={props.icon}
           onClick={props.iconClick} />
        </div>
      </div>
      <div className="card-body">{props.children}</div>
    </div>
  );
}