38 lines
2.6 KiB
TypeScript
38 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslation } from "@/components/i18n/locale-provider";
|
|
import { Text } from "@/components/i18n/text";
|
|
import { AlertCircleIcon, CheckIcon, ClockIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import type { AutosaveState } from "@/hooks/use-autosave";
|
|
|
|
export function AutosaveStatus({ state, issues = [], onSave }: { state: AutosaveState; issues?: readonly string[]; onSave?: () => void }) {
|
|
const { t } = useTranslation();
|
|
const [showIssues, setShowIssues] = useState(false);
|
|
|
|
if (state === "saving") return <Badge variant="secondary"><Spinner data-icon="inline-start" /><Text message="Saving…" /></Badge>;
|
|
if (state === "unsaved") return <Badge variant="outline"><ClockIcon data-icon="inline-start" /><Text message="Waiting to save…" /></Badge>;
|
|
if (state === "incomplete") return <div className="flex flex-col items-end gap-2">
|
|
<Button type="button" variant="outline" size="sm" onClick={() => setShowIssues((current) => !current)} aria-expanded={showIssues}>
|
|
<AlertCircleIcon data-icon="inline-start" />{t(showIssues ? "ซ่อนรายการ" : "ตรวจสอบข้อมูลที่ยังไม่ครบ")}
|
|
</Button>
|
|
{showIssues ? <Alert variant="destructive" className="max-w-md">
|
|
<AlertCircleIcon aria-hidden="true" />
|
|
<AlertTitle><Text message="กรุณากรอกข้อมูลให้ครบ" /></AlertTitle>
|
|
<AlertDescription>
|
|
<div className="flex flex-col gap-2">
|
|
<p><Text message="แก้ไขรายการด้านล่าง แล้วระบบจะบันทึกให้อัตโนมัติ ข้อมูลที่กรอกไว้ยังไม่หาย" /></p>
|
|
{issues.length ? <ul className="flex flex-col gap-1">{issues.map((issue, index) => <li key={`${issue}-${index}`}>{t(issue)}</li>)}</ul> : null}
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert> : null}
|
|
</div>;
|
|
if (state === "error") return <div className="flex items-center gap-2"><Badge variant="destructive"><AlertCircleIcon data-icon="inline-start" /><Text message="Autosave failed" /></Badge>{onSave ? <Button type="button" variant="outline" size="sm" onClick={onSave}><Text message="Save now" /></Button> : null}</div>;
|
|
return <Badge variant="secondary"><CheckIcon data-icon="inline-start" /><Text message="Saved" /></Badge>;
|
|
}
|