A debounced search and the mobile width

// apps/docs/examples/ui/hooks.tsx'use client';
import {useState} from 'react';
import {  Field,  FieldDescription,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {Input} from '@workspace/active-ui/components/primitives/input';import {useDebounce} from '@workspace/active-ui/hooks/use-debounce';import {useIsMobile} from '@workspace/active-ui/hooks/use-mobile';
/** * `useDebounce` follows the field 500 ms after you stop typing, so a search * would run once per pause. `useIsMobile` follows the window width: make the * window narrower than 768 px to see it change. */export default function HooksExample() {  const [query, setQuery] = useState('');  const debounced = useDebounce(query);  const isMobile = useIsMobile();  return (    <div className="grid w-full max-w-xs gap-6">      <Field>        <FieldLabel htmlFor="hooks-search">Search</FieldLabel>        <Input          id="hooks-search"          value={query}          onChange={(event) => setQuery(event.target.value)}        />        <FieldDescription aria-live="polite">          Searching for: <code>{debounced || "''"}</code>        </FieldDescription>      </Field>      <p className="text-sm">        <code>useIsMobile()</code>: <strong>{String(isMobile)}</strong>      </p>    </div>  );}