What only the browser knows

// apps/docs/examples/ui/client-only.tsx'use client';
import {ClientOnly} from '@workspace/active-ui/components/composed/client-only';
/** * Reads browser APIs while it renders. As its own component it renders only * inside `ClientOnly`: an expression such as `{window.innerWidth}` written * directly as a child would run on the server too. */function BrowserFacts() {  return (    <>      <strong>{Intl.DateTimeFormat().resolvedOptions().timeZone}</strong>,      window width {window.innerWidth} px    </>  );}
/** * Content that only the browser knows: your time zone and window width. The * server renders the fallback, and the browser replaces it after hydration, * without a mismatch. */export default function ClientOnlyExample() {  return (    <p className="text-sm">      Your browser&apos;s time zone:{' '}      <ClientOnly fallback={<span className="text-muted-foreground">-</span>}>        <BrowserFacts />      </ClientOnly>    </p>  );}