TanStack Query

npm install insightcn

import { useMutation } from "@tanstack/react-query";
import { captureRegistryEvent } from "@insightcn/sdk";

export function InstallButton({ registryUrl }: { registryUrl: string }) {
  const mutation = useMutation({
    mutationFn: async () => {
      const request = new Request(registryUrl, {
        method: "GET",
        headers: { "user-agent": "node-fetch" },
      });

      await captureRegistryEvent(request, "your-api-key", "installed");
    },
  });

  return (
    <button onClick={() => mutation.mutate()} disabled={mutation.isPending}>
      {mutation.isPending ? "Installing..." : "Install"}
    </button>
  );
}

// hooks/useRegistryTracker.ts
import { useMutation, useQuery } from "@tanstack/react-query";
import { captureRegistryEvent, generateRegistryRssFeed } from "@insightcn/sdk";

export function useRegistryTracker(apiKey: string) {
  const trackEvent = useMutation({
    mutationFn: async ({
      registryUrl,
      type = "installed",
    }: {
      registryUrl: string;
      type?: "installed" | "viewed" | "downloaded";
    }) => {
      const request = new Request(registryUrl, {
        method: "GET",
        headers: { "user-agent": "node-fetch" },
      });

      await captureRegistryEvent(request, apiKey, type);
    },
  });

  const generateRss = useMutation({
    mutationFn: async (
      options: Parameters<typeof generateRegistryRssFeed>[0]
    ) => {
      return generateRegistryRssFeed(options);
    },
  });

  return { trackEvent, generateRss };
}

import { useRegistryTracker } from "@/hooks/useRegistryTracker";

export function RegistryTracker() {
  const { trackEvent, generateRss } = useRegistryTracker("your-api-key");

  return (
    <div>
      <button
        onClick={() =>
          trackEvent.mutate({
            registryUrl: "https://your-registry.com/r/ui/button.json",
          })
        }
      >
        Install Button
      </button>
      <button
        onClick={() =>
          generateRss.mutate({
            baseUrl: "https://your-registry.com",
            rss: {
              title: "My Shadcn Registry",
              description: "Custom components for shadcn/ui",
            },
          })
        }
      >
        Generate RSS
      </button>
    </div>
  );
}