"use client"; import { useEffect, useRef, useState } from "react"; import type { HTMLAttributes, ReactNode } from "react"; export type SetupStep = { title: string; description?: ReactNode; code?: string; language?: string; codeLabel?: string; }; export type SetupStepsProps = Omit, "children"> & { steps: SetupStep[]; onCopy?: (code: string, index: number) => void; }; const ring = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4E79] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-[#8CB6E0] dark:focus-visible:ring-offset-[#121A22]"; export function SetupSteps({ steps, onCopy, className = "", ...props }: SetupStepsProps) { const [copied, setCopied] = useState<{ index: number; ok: boolean } | null>(null); const timer = useRef(undefined); useEffect(() => () => window.clearTimeout(timer.current), []); const copy = async (code: string, index: number) => { let ok = false; try { await navigator.clipboard.writeText(code); ok = true; onCopy?.(code, index); } catch { ok = false; } setCopied({ index, ok }); window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setCopied(null), 2000); }; return ( <>

{index < steps.length - 1 ? (
) : null} {index + 1}
{step.title}
{step.description ?
{step.description}
: null} {step.code ? (
{step.codeLabel ?? step.language ?? "Terminal"}
```
                      {step.code}
                    
```
) : null}

{copied ? (copied.ok ? "Copied step " + (copied.index + 1) + " to the clipboard" : "Couldn't copy. Select the code and copy it manually.") : ""}

); }

Install the SDK

Create an API key

Request your first route

Install the SDK

Create an API key

Request your first route