File size: 2,838 Bytes
6111b2b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | "use client";
import Link from "next/link";
import { useEffect, useState } from "react";
const AUTO_ROUTING_DISMISSED_KEY = "auto-routing-banner-dismissed";
export default function AutoRoutingBanner() {
const [isDismissed, setIsDismissed] = useState(false);
useEffect(() => {
try {
const dismissed = localStorage.getItem(AUTO_ROUTING_DISMISSED_KEY);
if (dismissed === "true") {
// eslint-disable-next-line react-hooks/set-state-in-effect
setIsDismissed(true);
}
} catch {
// localStorage unavailable (SSR or private mode) — do nothing
}
}, []);
const handleDismiss = () => {
try {
localStorage.setItem(AUTO_ROUTING_DISMISSED_KEY, "true");
} catch {
// ignore localStorage errors (private mode, quotas)
}
setIsDismissed(true);
};
if (isDismissed) return null;
return (
<div
role="banner"
aria-label="Auto-routing mode active"
className="relative overflow-hidden rounded-lg border-l-4 border-blue-500 bg-blue-50/50 p-4 my-4 dark:bg-blue-950/30 transition-colors"
>
<div className="flex items-start gap-3">
<div className="flex items-center gap-2">
<span className="inline-flex h-2 w-2 animate-pulse rounded-full bg-blue-500" />
<span className="font-semibold text-sm text-blue-700 dark:text-blue-300">
Auto-Routing Active
</span>
</div>
<div className="text-sm leading-relaxed text-text-muted">
OmniRoute is automatically routing requests using combo-based strategies.
<span className="block sm:inline sm:ml-1">
View or change your routing configuration on the{" "}
<Link
href="/dashboard/combos"
className="text-blue-600 hover:text-blue-800 underline dark:text-blue-400 dark:hover:text-blue-300"
>
Combos page
</Link>
.
</span>
</div>
<button
type="button"
onClick={handleDismiss}
aria-label="Dismiss auto-routing banner"
className="ml-auto flex-shrink-0 rounded-md p-1 text-text-muted hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900/50 dark:hover:text-blue-300 transition-colors"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="h-5 w-5"
aria-hidden="true"
>
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
);
}
|