efc2f43Trystero P2P messaging demo (text + large binary over Nostr)Jeremy Magland 1import type {Transfer} from '../types'
2import {formatBytes} from '../util'
4type Props = {
5 transfers: Transfer[]
6}
8export function TransferList({transfers}: Props) {
9 if (transfers.length === 0) return null
11 // newest first
12 const ordered = [...transfers].reverse()
14 return (
15 <div className="panel">
16 <h2 className="panel-title">Transfers</h2>
17 <ul className="transfer-list">
18 {ordered.map(t => (
19 <li key={t.id} className="transfer">
20 <div className="transfer-head">
21 <span className="transfer-dir">{t.dir === 'out' ? '⬆' : '⬇'}</span>
22 <span className="transfer-name" title={t.fileName}>
23 {t.fileName}
24 </span>
25 <span className="transfer-meta">
26 {formatBytes(t.size)} · {t.dir === 'out' ? 'to' : 'from'}{' '}
27 {t.peerName}
28 </span>
29 <span className="transfer-pct">
30 {t.done ? '✓' : `${Math.round(t.percent * 100)}%`}
31 </span>
32 </div>
33 <div className="progress">
34 <div
35 className={`progress-bar ${t.done ? 'done' : ''}`}
36 style={{width: `${Math.round(t.percent * 100)}%`}}
37 />
38 </div>
39 </li>
40 ))}
41 </ul>
42 </div>
43 )
44}