import './App.css';
function Alert(props) {
	return (
		<div className="alert">
			<h2>{props.title}</h2>
			<p>{props.content}</p>
		</div>
	)
}
function Card(props) {
	return (
		<div className="card">
			<h2>{props.title}</h2>
			<p>{props.content}</p>
		</div>
	)
}
function App() {
	const queryParams = new URLSearchParams(
		window.location.search);
	const flag = queryParams.get('flag') == 'true';
	return (
		<div className='App'>
			<h1>React sample</h1>
			<header className="container">
				{flag ?
					<Alert title="アラート" content="1つ目のメッセージです。" />
					:
					<Card title="カード" content="別のメッセージを表示します。" />
				}
			</header>
		</div>
	);
}
export default App;