Custom Components (HTML inherit)

import React, { useState } from 'react';

export default function App() {
  console.log('App: render')

  return (
     <div className="container mt-2">
       <Panel title="hello" style={{ width: 200}}>
         <input type="text"/>
         <input type="text"/>
         <input type="text"/>
       </Panel>

       <Panel title="main">
         <GMap city="Trieste" width={300} style={{ border: '2px solid blue'}} alt="Trieste"/>

         <MyButton style={{ backgroundColor: 'red'}} disabled={true} onClick={() => console.log('ciao')}>CLICK ME</MyButton>
       </Panel>
     </div>
  );
}

const MyButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = ({  children, style, className, ...rest }) => {
  const styles = {
    backgroundColor: 'black', color: 'white', padding: 20,
    ...style
  }
  return <button style={styles} {...rest}>{children}</button>
}

// GMAP
interface GMapProps {
  city: string;
}

const GMap: React.FC<GMapProps & React.ImgHTMLAttributes<HTMLImageElement>> = props => {
  const url = `https://maps.googleapis.com/maps/api/staticmap?center=${props.city}&zoom=5&size=200x100&key=AIzaSyDSBmiSWV4-AfzaTPNSJhu-awtfBNi9o2k`
  const { city, ...rest} = props;
  return <img src={url} {...rest} />
}



// PANEL COMPONENT
interface PanelProps {
  title: string;
}

const Panel: React.FC<PanelProps & React.HTMLProps<HTMLDivElement>> = props => {
  const { children, title, ...rest} = props;
  const [opened, setOpened] = useState<boolean>(true);

  return (
    <div className={'card'} {...rest}>
      <div className={'card-header'} onClick={() => setOpened(!opened)}>{props.title}</div>
      { opened && <div className="card-body">{props.children} </div>}
    </div>
  )
}