18+ page

src/pages/layout.tsx

@@ -3,12 +3,13 @@ import "./layout.css";
 import {
   EventPublisher,
 } from "@snort/system";
-import { Outlet, useNavigate, useLocation } from "react-router-dom";
+import { Outlet, useNavigate, useLocation, Link } from "react-router-dom";
 import AsyncButton from "element/async-button";
 import { Login } from "index";
 import { useLogin } from "hooks/login";
 import { Profile } from "element/profile";
 import { NewStreamDialog } from "element/new-stream";
+import { useState } from "react";
 
 export function LayoutPage() {
   const navigate = useNavigate();
@@ -51,15 +52,16 @@ export function LayoutPage() {
       </>
     );
   }
+  const isNsfw = window.location.pathname === "/nsfw";
 
   return (
     <div
       className={
-        location.pathname === "/" || location.pathname.startsWith("/p/") || location.pathname.startsWith("/providers")
+        location.pathname === "/" || location.pathname.startsWith("/p/") || location.pathname.startsWith("/providers") || location.pathname === "/nsfw"
           ? "page only-content"
           : location.pathname.startsWith("/chat/")
-          ? "page chat"
-          : "page"
+            ? "page chat"
+            : "page"
       }
     >
       <header>
@@ -68,12 +70,43 @@ export function LayoutPage() {
           <input className="search-input" type="text" placeholder="Search" />
           <Icon name="search" size={15} />
         </div>
+        <Link to={"/nsfw"}>
+          <div className={`btn-header${isNsfw ? " active" : ""}`}>
+            Adult (18+)
+          </div>
+        </Link>
+
         <div className="header-right">
           {loggedIn()}
           {loggedOut()}
         </div>
       </header>
       <Outlet />
+      {isNsfw && <ContentWarningOverlay />}
     </div>
   );
 }
+
+function ContentWarningOverlay() {
+  const navigate = useNavigate();
+  const [is18Plus, setIs18Plus] = useState(Boolean(window.localStorage.getItem("accepted-content-warning")));
+  if (is18Plus) return null;
+
+  function grownUp() {
+    window.localStorage.setItem("accepted-content-warning", "true");
+    setIs18Plus(true);
+  }
+
+  return <div className="fullscreen-exclusive age-check">
+    <h1>Sexually explicit material ahead!</h1>
+    <h2>Confirm your age</h2>
+    <div className="flex g24">
+      <button className="btn btn-warning" onClick={grownUp}>
+        Yes, I am over 18
+      </button>
+      <button className="btn" onClick={() => navigate("/")}>
+        No, I am under 18
+      </button>
+    </div>
+  </div>
+}