feat: add CopycatWarningToast component for user warnings

Introduced a new CopycatWarningToast component that displays a warning about copycat sites. The toast appears at the top-center of the screen and can be dismissed, with the dismissal state stored in local storage to prevent reappearing. Integrated the component into the RootLayout for global visibility.
This commit is contained in:
Bram Suurd
2026-03-09 23:07:31 +01:00
parent 3ec9eba736
commit 0d00908ff3
2 changed files with 26 additions and 0 deletions

View File

@@ -5,6 +5,7 @@ import { Inter } from "next/font/google";
import Script from "next/script";
import React from "react";
import { CopycatWarningToast } from "@/components/copycat-warning-toast";
import { ThemeProvider } from "@/components/theme-provider";
import { analytics, basePath } from "@/config/site-config";
import QueryProvider from "@/components/query-provider";
@@ -116,6 +117,7 @@ export default function RootLayout({
<div className="w-full max-w-[1440px] ">
{children}
<Toaster richColors />
<CopycatWarningToast />
</div>
</div>
<Footer />

View File

@@ -0,0 +1,24 @@
"use client";
import { useEffect } from "react";
import { toast } from "sonner";
const STORAGE_KEY = "copycat-warning-dismissed";
export function CopycatWarningToast() {
useEffect(() => {
if (typeof window === "undefined")
return;
if (localStorage.getItem(STORAGE_KEY) === "true")
return;
toast.warning("Beware of copycat sites. Always verify the URL is correct before trusting or running scripts.", {
position: "top-center",
duration: Number.POSITIVE_INFINITY,
closeButton: true,
onDismiss: () => localStorage.setItem(STORAGE_KEY, "true"),
});
}, []);
return null;
}