处理烤面包机通知的本地存储

演示：

源代码：

============= 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中文网其他相关文章！