35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { Database } from "lucide-react";
|
|
|
|
const NotAvailableBanner = () => {
|
|
return (
|
|
<div className="h-base flex items-center justify-center p-4">
|
|
<div className="w-full max-w-md">
|
|
<Alert className="border-destructive/50 text-destructive/50 dark:text-destructive/70 dark:border-destructive/70 [&>svg]:text-destructive dark:bg-card bg-red-50">
|
|
<AlertTitle className="flex items-center gap-2">
|
|
<Database className="dark:text-destructive/70 text-destructive/50 h-4 w-4" />
|
|
Config store setup is missing.
|
|
</AlertTitle>
|
|
<AlertDescription className="mt-2 space-y-2 text-xs">
|
|
<div>The UI requires a database connection to store configuration data, but no database is currently configured.</div>
|
|
<div className="text-muted-foreground">
|
|
To enable the UI, please add the database settings to your config.json (see{" "}
|
|
<a
|
|
href="https://www.getmaxim.ai/bifrost/docs/quickstart/gateway/setting-up#two-configuration-modes"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="font-medium underline underline-offset-2"
|
|
data-testid="config-store-documentation-link"
|
|
>
|
|
documentation
|
|
</a>
|
|
).
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotAvailableBanner; |