| 1 |
import React, { useState, useEffect, useCallback } from "react"; |
| 2 |
import { __ } from "@wordpress/i18n"; |
| 3 |
import { Logo, IconSun, IconMoon } from "../../icons"; |
| 4 |
import { setDarkMode as persistDarkMode, getInitialDarkMode } from "../utils/darkMode"; |
| 5 |
|
| 6 |
/* Quick Setup top bar — same design as the dashboard betterdocs-dashboard-header-top: |
| 7 |
BetterDocs logo on the left, dark-mode switcher on the right. |
| 8 |
Uses the SAME switcher as the dashboard (utils/darkMode): the choice is stored |
| 9 |
in the `betterdocs_admin_dark_mode` cookie — never the database — so toggling |
| 10 |
here carries to every other admin screen and never creates `betterdocs_settings` |
| 11 |
(which would hide the Quick Setup menu). */ |
| 12 |
|
| 13 |
const QuickSetupHeader = () => { |
| 14 |
const [darkMode, setDarkMode] = useState(getInitialDarkMode); |
| 15 |
|
| 16 |
useEffect(() => { |
| 17 |
persistDarkMode(darkMode); |
| 18 |
}, [darkMode]); |
| 19 |
|
| 20 |
const handleToggle = useCallback(() => { |
| 21 |
setDarkMode((mode) => !mode); |
| 22 |
}, []); |
| 23 |
|
| 24 |
return ( |
| 25 |
<div className="betterdocs-dashboard-header-top betterdocs-quick-setup-header-top"> |
| 26 |
<div className="betterdocs-dashboard-container"> |
| 27 |
<div className="betterdocs-row betterdocs-logo-action"> |
| 28 |
<div className="betterdocs-dashboard-header-left betterdocs-dashboard-header-items"> |
| 29 |
<div className="betterdocs-dashboard-logo"> |
| 30 |
<Logo /> |
| 31 |
</div> |
| 32 |
</div> |
| 33 |
<div className="betterdocs-dashboard-header-right betterdocs-dashboard-header-items"> |
| 34 |
<ul className="betterdocs-dashboard-header-action-list betterdocs-text-align-right"> |
| 35 |
<li> |
| 36 |
<button |
| 37 |
type="button" |
| 38 |
onClick={handleToggle} |
| 39 |
className="betterdocs-dashboard-header-action betterdocs-dashboard-header-action-mode" |
| 40 |
aria-label={__("Toggle dark mode", "betterdocs")} |
| 41 |
> |
| 42 |
{darkMode ? <IconMoon /> : <IconSun />} |
| 43 |
</button> |
| 44 |
</li> |
| 45 |
</ul> |
| 46 |
</div> |
| 47 |
</div> |
| 48 |
</div> |
| 49 |
</div> |
| 50 |
); |
| 51 |
}; |
| 52 |
|
| 53 |
export default QuickSetupHeader; |
| 54 |
|
