import { useIsNarrow } from '../hooks/useIsNarrow';

/**
 * 只在窄屏渲染子元素。
 *
 * 不用 Tailwind 的 `md:hidden`：那只是视觉隐藏，元素仍在 DOM 与 tab 序列里，
 * 宽屏用户按 Tab 会聚焦到一个看不见的返回按钮上。
 */
export default function NarrowOnly({ children }: { children: React.ReactNode }) {
  return useIsNarrow() ? <>{children}</> : null;
}