Function CommandMenuExampleScene

components/docs/examples/command-menu-example.tsx:20–55

(_p: CommandMenuExampleProps = {})

export type CommandMenuExampleProps = Record<string, never>;

export const CommandMenuExampleScene = (_p: CommandMenuExampleProps = {}) => {
  const frame = useCurrentFrame();

  // Panel: closed → opened at frame 16, then closed again at frame 108.
  const panelStyle = useCommandMenuTransition([
    { at: 16, state: "opened", duration: 16 },
    { at: 108, state: "closed", duration: 12 },
  ]);

  // Reveal query characters from TYPE_START onward.
  const revealed = revealCount(
    Math.max(0, frame - TYPE_START),
    FPS,
    QUERY.length,
    CPS,
  );

  // The filtered list shrinks as more characters are revealed. We animate the
  // first row of the filtered list (which becomes "Settings" once "set" is typed).
  const itemStyle = useCommandMenuItemTransition([
    { at: 84, state: "hover", duration: 8 },
    { at: 92, state: "press", duration: 6 },
    { at: 100, state: "selected", duration: 8 },
  ]);

  return (
    <div style={{ position: "relative", width: "100%", height: "100%" }}>
      <CommandMenu
        style={panelStyle}
        query={QUERY}
        revealCount={revealed}
        itemStyles={[itemStyle]}
      />
    </div>
  );
};

export const commandMenuExampleCode = (
  _values: Record<string, unknown> = {},