import React, { useContext, useState } from 'react';
import { ThemeContext } from './App';
export default function Header() {
const theme = useContext(ThemeContext);
const [showPicker, setShowPicker] = useState(false);
function handleChangeColor(color) {
theme.primaryColor = color;
setShowPicker(false);
}
return (
<header style={{ backgroundColor: theme.primaryColor }}>
<h1>My App</h1>
<button onClick={() => setShowPicker(true)}>Change color</button>
{showPicker && (
<ColorPicker initialColor={theme.primaryColor} onChange={handleChangeColor} />
)}
</header>
);
}