32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
|
import type { BackupDevice } from '../../types';
|
||
|
|
import { DataIcon } from '../icons/DataIcon';
|
||
|
|
|
||
|
|
const STATUS_CLASSES: Record<BackupDevice['status'], string> = {
|
||
|
|
'up-to-date': 'bg-success/16 text-success',
|
||
|
|
syncing: 'bg-violet/16 text-violet',
|
||
|
|
late: 'bg-danger/16 text-danger',
|
||
|
|
};
|
||
|
|
|
||
|
|
const ICON_TONE: Record<BackupDevice['status'], string> = {
|
||
|
|
'up-to-date': 'bg-selected text-brand-soft',
|
||
|
|
syncing: 'bg-violet/16 text-violet',
|
||
|
|
late: 'bg-danger/16 text-danger',
|
||
|
|
};
|
||
|
|
|
||
|
|
export function BackupRow({ backup }: { backup: BackupDevice }) {
|
||
|
|
return (
|
||
|
|
<div className="flex flex-wrap items-center gap-4 rounded-2xl border border-line bg-panel p-[18px]">
|
||
|
|
<span className={`flex h-10 w-10 flex-none items-center justify-center rounded-xl ${ICON_TONE[backup.status]}`}>
|
||
|
|
<DataIcon name={backup.icon} size={19} />
|
||
|
|
</span>
|
||
|
|
<div className="min-w-0 flex-1 basis-[200px]">
|
||
|
|
<p className="m-0 mb-[3px] text-[14.5px] font-bold text-ink">{backup.device}</p>
|
||
|
|
<p className="m-0 text-[12.5px] text-ink-soft">{backup.detail}</p>
|
||
|
|
</div>
|
||
|
|
<span className={`flex-none rounded-full px-3 py-1.5 text-[11.5px] font-bold ${STATUS_CLASSES[backup.status]}`}>
|
||
|
|
{backup.statusLabel}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|