#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"
            ? "对查找可见：用浏览器 Ctrl+F 搜本段文字，浏览器会自动定位并显示"
            : "当前可见"}
        </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)}>取消隐藏</Button>
      </div>
    </div>
  );
}

export default App;