64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
/**
|
|
* تب دکترها با نشانگر underline — بازسازی تبهای بالای صفحهٔ نوبتهای طرح tauri
|
|
* (`index.jsx`): فعال #5559ce با خط زیرین، بقیه خاکستری.
|
|
*/
|
|
export interface DoctorTab {
|
|
uuid: string;
|
|
name: string;
|
|
/** برچسب کوچکِ کنار نام — مثلاً «بدون ساعت کاری». */
|
|
note?: string;
|
|
}
|
|
|
|
export default function DoctorTabs({
|
|
doctors, selected, onSelect, showAll = true,
|
|
}: {
|
|
doctors: DoctorTab[];
|
|
/** '' یعنی «همه». */
|
|
selected: string;
|
|
onSelect: (uuid: string) => void;
|
|
showAll?: boolean;
|
|
}) {
|
|
const tabs: DoctorTab[] = showAll ? [{ uuid: '', name: 'همه' }, ...doctors] : doctors;
|
|
return (
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', gap: 24, padding: '8px 16px 0',
|
|
borderBottom: '1px solid var(--border)', overflowX: 'auto',
|
|
}}>
|
|
{tabs.map((d) => {
|
|
const active = selected === d.uuid;
|
|
return (
|
|
<button
|
|
key={d.uuid || 'all'}
|
|
type="button"
|
|
onClick={() => onSelect(d.uuid)}
|
|
style={{
|
|
position: 'relative', background: 'none', border: 'none', cursor: 'pointer',
|
|
fontFamily: 'inherit', fontSize: 15, fontWeight: 500, padding: '8px 2px 12px',
|
|
color: active ? 'var(--primary)' : 'var(--text-2)', whiteSpace: 'nowrap',
|
|
// برچسبهای کوتاه («همه») بدون این، عرضشان زیر ۴۴px میماند (WCAG 2.5.5)
|
|
minWidth: 44,
|
|
}}
|
|
>
|
|
{d.name}
|
|
{d.note && (
|
|
<span style={{
|
|
marginRight: 6, fontSize: 10.5, fontWeight: 500, padding: '2px 6px',
|
|
borderRadius: 'var(--r-pill)', background: 'var(--warning-bg)', color: 'var(--warning)',
|
|
verticalAlign: 'middle',
|
|
}}>
|
|
{d.note}
|
|
</span>
|
|
)}
|
|
{active && (
|
|
<span style={{
|
|
position: 'absolute', bottom: -1, left: 0, right: 0, height: 3,
|
|
background: 'var(--primary)', borderRadius: '3px 3px 0 0',
|
|
}} />
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|