Paul Trowbridge
cf391286a2
Replace Bootstrap fill icons with Feather-style stroke SVGs (sun with rays + crescent moon) in StatusBar toggle. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
72 lines
3.0 KiB
JavaScript
72 lines
3.0 KiB
JavaScript
import useTheme from '../theme.jsx'
|
|
|
|
export default function StatusBar({ view, sources = [], sourceId, setSourceId, versions = [], versionId, setVersionId }) {
|
|
const { dark, setDark } = useTheme()
|
|
const showVersion = view === 'baseline' || view === 'forecast'
|
|
const selectedVersion = versions.find(v => String(v.id) === String(versionId))
|
|
|
|
return (
|
|
<div className="bg-white border-b border-gray-200 px-3 h-9 flex items-center gap-3 shrink-0 text-xs">
|
|
<span className="text-gray-400">Source</span>
|
|
<select
|
|
value={sourceId || ''}
|
|
onChange={e => setSourceId(e.target.value)}
|
|
disabled={sources.length === 0}
|
|
className="border border-gray-200 rounded px-2 py-0.5 bg-white"
|
|
>
|
|
{sources.length === 0
|
|
? <option value="">— no sources —</option>
|
|
: sources.map(s => <option key={s.id} value={s.id}>{s.tname}</option>)}
|
|
</select>
|
|
|
|
{showVersion && (
|
|
<>
|
|
<span className="text-gray-200">|</span>
|
|
<span className="text-gray-400">Version</span>
|
|
<select
|
|
value={versionId || ''}
|
|
onChange={e => setVersionId(e.target.value)}
|
|
disabled={versions.length === 0}
|
|
className="border border-gray-200 rounded px-2 py-0.5 bg-white"
|
|
>
|
|
{versions.length === 0
|
|
? <option value="">— no versions —</option>
|
|
: versions.map(v => <option key={v.id} value={v.id}>{v.name}</option>)}
|
|
</select>
|
|
{selectedVersion && (
|
|
<span className={`font-medium ${selectedVersion.status === 'open' ? 'text-green-600' : 'text-gray-400'}`}>
|
|
{selectedVersion.status}
|
|
</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 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="4"/>
|
|
<line x1="12" y1="2" x2="12" y2="5"/>
|
|
<line x1="12" y1="19" x2="12" y2="22"/>
|
|
<line x1="4.93" y1="4.93" x2="7.05" y2="7.05"/>
|
|
<line x1="16.95" y1="16.95" x2="19.07" y2="19.07"/>
|
|
<line x1="2" y1="12" x2="5" y2="12"/>
|
|
<line x1="19" y1="12" x2="22" y2="12"/>
|
|
<line x1="4.93" y1="19.07" x2="7.05" y2="16.95"/>
|
|
<line x1="16.95" y1="7.05" x2="19.07" y2="4.93"/>
|
|
</svg>
|
|
) : (
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|