54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { AlertTriangle } from "lucide-react";
|
|
|
|
export const HwidErrorDialog = () => {
|
|
const { t } = useTranslation();
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const handleShowHwidError = (event: Event) => {
|
|
const customEvent = event as CustomEvent<string>;
|
|
setErrorMessage(customEvent.detail);
|
|
};
|
|
|
|
window.addEventListener('show-hwid-error', handleShowHwidError);
|
|
|
|
return () => {
|
|
window.removeEventListener('show-hwid-error', handleShowHwidError);
|
|
};
|
|
}, []);
|
|
|
|
if (!errorMessage) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Dialog open={!!errorMessage} onOpenChange={() => setErrorMessage(null)}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<AlertTriangle className="h-5 w-5 text-destructive" />
|
|
{t("Device Limit Reached")}
|
|
</DialogTitle>
|
|
<DialogDescription className="pt-4 text-left">
|
|
{errorMessage}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button onClick={() => setErrorMessage(null)}>{t("OK")}</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|