start

src/components/SyncProgress.tsx

@@ -0,0 +1,25 @@
+type SyncProgressProps = {
+  value: number
+}
+
+export function SyncProgress(props: SyncProgressProps) {
+  const width = 30
+  let filled = (props.value / 100) * width
+  filled = filled >= 0 ? filled : 0
+  filled = filled <= width ? filled : width
+  filled = filled | 0
+  if (filled < 0) filled = 0
+  if (filled > width) filled = width
+
+  let bar = ""
+  for (let i = 0; i < width; i += 1) {
+    bar += i < filled ? "#" : "-"
+  }
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <text>{bar}</text>
+      <text>{props.value}%</text>
+    </box>
+  )
+}