54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { isSupabaseConfigured } from "@/lib/supabase";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Database, ExternalLink, Info } from "lucide-react";
|
|
|
|
export default function SupabaseStatus() {
|
|
// Only show if Supabase is not configured (demo mode)
|
|
if (isSupabaseConfigured) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed bottom-4 right-4 z-50 max-w-md" data-supabase-status>
|
|
<Alert className="border-blue-500/50 bg-blue-500/10 text-blue-300">
|
|
<Info className="h-4 w-4" />
|
|
<AlertDescription className="space-y-3">
|
|
<div>
|
|
<strong>Demo Mode:</strong> Full functionality with simulated data.
|
|
All features are available for testing!
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-blue-500/50 text-blue-300 hover:bg-blue-500/20"
|
|
onClick={() => {
|
|
// Hide the status notification
|
|
const notification = document.querySelector(
|
|
"[data-supabase-status]",
|
|
);
|
|
if (notification) {
|
|
notification.style.display = "none";
|
|
}
|
|
}}
|
|
>
|
|
<Info className="h-3 w-3 mr-1" />
|
|
Got it!
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-blue-500/50 text-blue-300 hover:bg-blue-500/20"
|
|
onClick={() => window.open("/login", "_self")}
|
|
>
|
|
<ExternalLink className="h-3 w-3 mr-1" />
|
|
Try Login
|
|
</Button>
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
);
|
|
}
|