State Inspector

1"use client";
2
3import { useState } from "react";
4import { StateInspector } from "@/registry/ui";
5import { useStateInspector } from "@/registry/ui/state-inspector/use-state-inspector";
6import { Button } from "@/components/ui/button";
7
8export function StateInspectorDefaultExample() {
9  const { track, clear } = useStateInspector();
10  const [counter, setCounter] = useState(0);
11  const [user, setUser] = useState({ name: "Ada Lovelace", plan: "pro" });
12
13  const trackCounterIncrement = () => {
14    const previous = { counter, user };
15    const nextCounter = counter + 1;
16    const next = { counter: nextCounter, user };
17    setCounter(nextCounter);
18    track("counter.increment", previous, next);
19  };
20
21  const trackPlanToggle = () => {
22    const previous = { counter, user };
23    const nextUser = {
24      ...user,
25      plan: user.plan === "pro" ? "enterprise" : "pro",
26    };
27    const next = { counter, user: nextUser };
28    setUser(nextUser);
29    track("user.plan.toggle", previous, next);
30  };
31
32  const trackUserRename = () => {
33    const previous = { counter, user };
34    const nextUser = {
35      ...user,
36      name: user.name === "Ada Lovelace" ? "Grace Hopper" : "Ada Lovelace",
37    };
38    const next = { counter, user: nextUser };
39    setUser(nextUser);
40    track("user.rename", previous, next);
41  };
42
43  return (
44    <div className="mx-auto w-full max-w-4xl">
45      <div className="mb-4 flex flex-wrap items-center gap-2">
46        <Button variant="outline" onClick={trackCounterIncrement}>
47          Increment Counter
48        </Button>
49        <Button variant="outline" onClick={trackPlanToggle}>
50          Toggle Plan
51        </Button>
52        <Button variant="outline" onClick={trackUserRename}>
53          Rename User
54        </Button>
55        <Button variant="destructive" onClick={clear}>
56          Clear
57        </Button>
58      </div>
59      <StateInspector />
60    </div>
61  );
62}