39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
import { useAuthStore } from "../../../stores/authStore";
|
|
import { useUIStore } from "../../../stores/uiStore";
|
|
// @ts-ignore
|
|
import CheckIcon from "../../../assets/fontawesome/svg/circle-check.svg?react";
|
|
// @ts-ignore
|
|
import SpinnerIcon from "../../../assets/fontawesome/svg/rotate.svg?react";
|
|
// @ts-ignore
|
|
import WarningIcon from "../../../assets/fontawesome/svg/circle-exclamation.svg?react";
|
|
|
|
export const StatusIndicator = () => {
|
|
const { encryptionKey } = useAuthStore();
|
|
const { updating, setShowModal } = useUIStore();
|
|
return (
|
|
<div
|
|
className="fixed bottom-2 right-3 bg-ctp-surface0 border border-ctp-surface2 rounded-sm px-2 py-0.5 flex items-center gap-2.5 shadow-lg backdrop-blur-sm"
|
|
onClick={() => {
|
|
if (!encryptionKey) {
|
|
setShowModal(true);
|
|
}
|
|
}}
|
|
>
|
|
{!encryptionKey ? (
|
|
<WarningIcon className="h-4 w-4 my-1 [&_.fa-primary]:fill-ctp-yellow [&_.fa-secondary]:fill-ctp-orange" />
|
|
) : updating ? (
|
|
<>
|
|
<SpinnerIcon className="animate-spin h-4 w-4 [&_.fa-primary]:fill-ctp-blue [&_.fa-secondary]:fill-ctp-sapphire" />
|
|
<span className="text-sm text-ctp-subtext0 font-medium">
|
|
Saving...
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<CheckIcon className="h-4 w-4 [&_.fa-primary]:fill-ctp-green [&_.fa-secondary]:fill-ctp-teal" />
|
|
<span className="text-sm text-ctp-subtext0 font-medium">Saved</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|