#Layout

import { useState } from "react";
import { Button, Layout } from "ooui-react";

function App() {
  const [hidden, setHidden] = useState<boolean | "until-found">(false);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <Layout hidden={hidden}>
        <p>
          {hidden === "until-found"
            ? "Reachable by search: find this text with the browser's Ctrl+F and it is revealed"
            : "Currently visible"}
        </p>
      </Layout>
      <div style={{ display: "flex", gap: 8 }}>
        <Button onClick={() => setHidden(true)}>hidden</Button>
        <Button onClick={() => setHidden("until-found")}>until-found</Button>
        <Button onClick={() => setHidden(false)}>Unhide</Button>
      </div>
    </div>
  );
}

export default App;