42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
"use client";
|
|
// @/components/main/settingsPageComponents/modals/ProgressModal.tsx
|
|
import React from "react";
|
|
|
|
type Props = {
|
|
visible: boolean;
|
|
progress: number;
|
|
slot?: number;
|
|
};
|
|
|
|
const ProgressModal: React.FC<Props> = ({ visible, progress, slot }) => {
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 ">
|
|
<div className="p-6 rounded shadow-sm text-center w-80 bg-[var(--color-surface)] dark:bg-[var(--color-surface)] text-[var(--color-fg)] border border-[var(--color-border)]">
|
|
{/*
|
|
<h2 className="text-lg font-bold mb-4">
|
|
Firmwareupdate
|
|
{typeof slot === "number" ? ` KÜ ${slot}` : ""} läuft ...
|
|
</h2>
|
|
*/}
|
|
<h2 className="text-lg font-bold mb-4">
|
|
Firmwareupdate läuft ...
|
|
{typeof slot === "number" ? ` ` : ""}
|
|
</h2>
|
|
Bitte Fenster nicht schließen
|
|
<h2></h2>
|
|
<div className="w-full h-4 rounded-full bg-[var(--color-surface-alt)]/80 dark:bg-[var(--color-surface-alt)]/30 border border-[var(--color-border)] overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full transition-all duration-200 bg-[var(--color-accent)]"
|
|
style={{ width: `${progress}%` }}
|
|
></div>
|
|
</div>
|
|
<p className="mt-4 text-sm">{Math.round(progress)}% abgeschlossen</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProgressModal;
|