演示:
源代码:
============= layout.tsx <themeprovider attribute="class" defaulttheme="dark"> {children} <devtoaster></devtoaster> </themeprovider> ============= dev-toaster.tsx export function TemplateToaster() { const [isVisibile, setIsVisible] = useState(true); const [notificationStatus, setNotificationStatus] = useState<string null>(null); const path = usePathname(); const [hydrated, setHydrated] = useState(false); // Run this effect only once to set hydrated to true useEffect(() => { setHydrated(true); }, []); // Run this effect only on client side useEffect(() => { if (hydrated) { // Remove the saved notification status to reset it localStorage.removeItem("behindui-notification"); // Check localStorage after clearing setNotificationStatus(localStorage.getItem("behindui-notification")); } }, [hydrated]); if (!hydrated) { return null; } const templates = path.includes("templates"); const isIframe = isInIframe(); if (isIframe || notificationStatus === "off") { return <div></div>; } return ( isVisibile && !templates && ( <section classname="relative z-50"> <div classname="font-geist fixed bottom-4 right-4"> <card classname='{cn("' w- bg-background> <cardheader> <div classname="font-mono font-bold uppercase tracking-tight"> ?Website Under Development ? <br> </div> <carddescription classname="mt-4 text-black/90 dark:text-white/70">This website is currently in active development. Some features may be incomplete or not working as expected</carddescription> </cardheader> <cardfooter classname="flex justify-end gap-4"> <button size="sm" onclick="{()"> { localStorage.setItem("behindui-notification", "off"); setIsVisible(false); }} > Understand </button> </cardfooter> </card> </div> </section> ) ); } function isInIframe() { try { return window.self !== window.top; } catch (e) { return true; } } </string><script> // Detect dark theme var iframe = document.getElementById('tweet-1874817943860834535-693'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1874817943860834535&theme=dark" } </script>
以上是处理烤面包机通知的本地存储的详细内容。更多信息请关注PHP中文网其他相关文章!