38 lines
1.9 KiB
JavaScript
38 lines
1.9 KiB
JavaScript
import useTheme from '../theme.jsx'
|
|
|
|
export default function StatusBar() {
|
|
const { dark, setDark } = useTheme()
|
|
|
|
return (
|
|
<div className="bg-white border-b border-gray-200 px-4 h-8 flex items-center gap-4 shrink-0 text-xs">
|
|
<span className="text-gray-400">Source</span>
|
|
<span className="font-medium text-gray-700">sales_orders</span>
|
|
<span className="text-gray-200">|</span>
|
|
<span className="text-gray-400">Version</span>
|
|
<span className="font-medium text-gray-700">FY2026 Plan</span>
|
|
<span className="text-gray-200">|</span>
|
|
<span className="text-gray-400">Baseline</span>
|
|
<span className="font-medium text-gray-700">44,313 rows</span>
|
|
<span className="text-gray-200">|</span>
|
|
<span className="text-gray-400">Status</span>
|
|
<span className="text-green-600 font-medium">open</span>
|
|
<div className="ml-auto">
|
|
<button
|
|
onClick={() => setDark(d => !d)}
|
|
className="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100"
|
|
title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
|
|
>
|
|
{dark ? (
|
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8z"/>
|
|
</svg>
|
|
) : (
|
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M6 .278a.768.768 0 0 1 1.065.02A.75.75 0 0 1 5.792 15.5a.75.75 0 0 1-1.498-.075.768.768 0 0 1-.02-1.05A8 8 0 1 0 6.278 14.72a.768.768 0 0 1-1.055-.02A.75.75 0 0 1 2.5 13.75a.75.75 0 0 1 1.498.075A8 8 0 1 0 6 .278z"/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |