1
import { Download, Layers3 } from "lucide-react";
2
 
3
export type Progress = {
4
  state: "receiving" | "compacting";
5
  startedAt?: number;
6
  expiresAt?: number;
7
} | null;
8
 
9
type ProgressBannerProps = {
10
  progress?: Progress;
11
};
12
 
13
export function ProgressBanner({ progress }: ProgressBannerProps) {
14
  if (!progress) {
15
    return null;
16
  }
17
 
18
  if (progress.state === "receiving") {
19
    return (
20
      <div className="mb-6 rounded-xl border border-amber-500/20 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
21
        <Download
22
          className="mr-2 inline h-4 w-4 align-[-2px] text-amber-600 dark:text-amber-400"
23
          aria-hidden="true"
24
        />
25
        Receiving push...
26
      </div>
27
    );
28
  }
29
 
30
  return (
31
    <div className="mb-6 rounded-xl border border-accent-500/20 bg-accent-500/10 p-4 text-sm text-accent-700 dark:text-accent-400">
32
      <Layers3
33
        className="mr-2 inline h-4 w-4 align-[-2px] text-zinc-600 dark:text-zinc-300"
34
        aria-hidden="true"
35
      />
36
      Compacting packs...
37
    </div>
38
  );
39
}