48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { useAuthReady } from "@/lib/api/use-auth-ready"
|
|
|
|
export function SettingsSyncBanner({
|
|
isFetching,
|
|
isError,
|
|
onRetry,
|
|
}: {
|
|
isFetching?: boolean
|
|
isError?: boolean
|
|
onRetry?: () => void
|
|
}) {
|
|
const { ready, authenticated } = useAuthReady()
|
|
|
|
if (!ready || isFetching) {
|
|
return null
|
|
}
|
|
|
|
if (!authenticated) {
|
|
return (
|
|
<p className="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200">
|
|
Connectez-vous pour synchroniser avec le serveur. Les réglages locaux restent
|
|
disponibles hors ligne.
|
|
</p>
|
|
)
|
|
}
|
|
|
|
if (isError) {
|
|
return <SyncErrorBanner onRetry={onRetry} />
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
function SyncErrorBanner({ onRetry }: { onRetry?: () => void }) {
|
|
return (
|
|
<div className="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
|
|
<span>Échec de synchronisation avec le serveur.</span>
|
|
{onRetry ? (
|
|
<Button type="button" variant="outline" size="sm" className="h-7" onClick={onRetry}>
|
|
Réessayer
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
)
|
|
} |