Command Menu

Copyimport { CommandMenu } from "@/components/ui/command-menu";

Copy<div style={{ position: "relative", width: "100%", height: "100%" }}>
  <CommandMenu state="opened" query="set" />
</div>

Copyimport { useCurrentFrame, revealCount } from "@/lib/framecn-ui";
import { CommandMenu } from "@/components/framecn/command-menu";
import { useCommandMenuTransition } from "@/components/framecn/use-command-menu-transition";
import { useCommandMenuItemTransition } from "@/components/framecn/use-command-menu-item-transition";
 
const QUERY = "settings";
const TYPE_START = 20;
 
export const Scene = () => {
  const frame = useCurrentFrame();
 
  const panelStyle = useCommandMenuTransition([
    { at: 16, state: "opened", duration: 16 },
    { at: 108, state: "closed", duration: 12 },
  ]);
 
  const revealed = revealCount(
    Math.max(0, frame - TYPE_START),
    30,
    QUERY.length,
    4
  );
 
  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>
  );
};