"use strict";

const React = require("react");
const ReactDOM = require("react-dom");

// the below would be 'library code' ///////////////////////////////////

let TitleContext = React.createContext();

function PanelTitle({ children }) {
	let setTitle = React.useContext(TitleContext);
	setTitle(children);

	return null;
}

function Panel({ view }) {
	let [ title, setTitle ] = React.useState("Default title");

	let View = view;

	return (
		<div className="panel">
			<h1>{ title }</h1>
			<hr/>
			<TitleContext.Provider value={setTitle}>
				<View />
			</TitleContext.Provider>
		</div>
	);
}

// end-user code goes below ///////////////////////////////////////

function SomeView() {
	return (<>
		<PanelTitle>Hello world!</PanelTitle>
		<p>Some text goes here.</p>
		<p>More text goes here.</p>
	</>);
}

function App() {
	return (
		<Panel view={SomeView} />
	);
}

ReactDOM.render(<App />, document.getElementById("app"));