PuzzlePro/progressBar.js at main · Aman-S-Rajput/PuzzlePro · GitHub

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
49
50
import * as React from "react"

const ProgressBar = ({ done, total = 101 }) => {
  const safeDone = Math.max(0, Math.min(done, total))
  const percent = Math.round((safeDone / total) * 100)

  return (
    <div style={{ width: "100%", maxWidth: 700, marginBottom: "1rem" }}>
      <div
        aria-label="progress"
        style={{
          background: "#f0f4f8",
          borderRadius: 6,
          overflow: "hidden",
          position: "relative",
          height: 22,
        }}
      >
        <div
          style={{
            width: `${percent}%`,
            background: `linear-gradient(135deg, #22c55e, #4ade80)`,
            height: "100%",
            transition: "width .25s ease",
          }}
        />
        <div
          style={{
            position: "absolute",
            inset: 0,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: 12,
            fontWeight: 600,
            color: "#f34009ff",
            pointerEvents: "none",
          }}
        >
          {safeDone} / {total} ({percent}%)
        </div>
      </div>
      <div style={{ marginTop: 4, fontSize: 12, color: "#4b5563" }}>
        {percent === 100 ? "All done 🎉" : `Remaining: ${total - safeDone}`}
      </div>
    </div>
  )
}

export default ProgressBar