Spaces:
Running
Running
File size: 1,793 Bytes
482b268 7d97a04 ce64f95 482b268 7d97a04 482b268 ce64f95 7d97a04 ce64f95 7d97a04 ce64f95 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | function Header({ activeCount, selectedTab, positionOptions, selectedPosition, onChangePosition }) {
const activePosition = positionOptions.find((position) => position.name === selectedPosition) || positionOptions[0]
return (
<header className="header">
<div className="header__copy">
<p className="header__eyebrow">Recruitment pipeline</p>
<div className="header__title-wrap">
<span className="header__select-label">Position</span>
<label className="sr-only" htmlFor="dashboard-position-select">
Select position
</label>
<select
id="dashboard-position-select"
className="header__title-select"
value={selectedPosition}
onChange={(event) => onChangePosition(event.target.value)}
>
{positionOptions.map((position) => (
<option key={position.id} value={position.name}>
{position.name}
</option>
))}
</select>
</div>
<div className="header__meta">
<span className="chip chip--success">Open</span>
<span className="header__dot" aria-hidden="true" />
<span>{activePosition?.name || 'Position'}</span>
<span className="header__dot" aria-hidden="true" />
<span>{activePosition?.locationType || 'Onsite'}</span>
<span className="header__dot" aria-hidden="true" />
<span>{activeCount} active candidates</span>
</div>
</div>
<div className="header__actions">
<div className="header__crumb">
<span className="header__crumb-label">Current tab</span>
<strong>{selectedTab}</strong>
</div>
</div>
</header>
)
}
export default Header
|