import * as React from "react"; import { TutorialStepperIntegrationSetupWizardLiveSummaryTwo } from "@/registry/tutorial-stepper-integration-setup-wizard-live-summary-two/tutorial-stepper-integration-setup-wizard-live-summary-two"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; import { Button } from "@/components/ui/button"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; export function TutorialStepperIntegrationSetupWizardLiveSummaryTwoDemo() { const [credentials, setCredentials] = React.useState({ apiKey: "", apiSecret: "", }); const [scopes, setScopes] = React.useState({ read: false, write: false }); const [syncSchedule, setSyncSchedule] = React.useState("hourly"); const [testResult, setTestResult] = React.useState< "idle" | "testing" | "success" | "error" >("idle"); const steps = [ { id: "credentials", title: "Credentials", isComplete: Boolean(credentials.apiKey && credentials.apiSecret), content: (

API Key setCredentials({ ...credentials, apiKey: e.target.value }) } placeholder="Enter your API key" />

API Secret setCredentials({ ...credentials, apiSecret: e.target.value }) } placeholder="Enter your API secret" />

), warnings: !credentials.apiKey || !credentials.apiSecret ? ["API credentials are required"] : [], }, { id: "scopes", title: "Permissions", isComplete: scopes.read || scopes.write, content: (

Select the permissions you want to grant

Read access setScopes({ ...scopes, read: checked }) } />

Write access setScopes({ ...scopes, write: checked }) } />

), warnings: !scopes.read && !scopes.write ? ["At least one permission scope is required"] : [], }, { id: "sync", title: "Sync Schedule", isComplete: Boolean(syncSchedule), content: (

Sync frequency

), }, { id: "test", title: "Test Connection", content: (

Verify your integration is configured correctly

{testResult === "success" && (

✓ Connection successful!

)} {testResult === "error" && (

✗ Connection failed. Please check your credentials.

)}

), }, ]; const summary = [ { label: "Credentials", value: credentials.apiKey ? `Key: ${credentials.apiKey.substring(0, 8)}...` : "Not configured", isComplete: Boolean(credentials.apiKey && credentials.apiSecret), }, { label: "Permissions", value: [scopes.read && "Read", scopes.write && "Write"] .filter(Boolean) .join(", ") || "None selected", isComplete: scopes.read || scopes.write, }, { label: "Sync Schedule", value: syncSchedule.charAt(0).toUpperCase() + syncSchedule.slice(1), isComplete: Boolean(syncSchedule), }, { label: "Status", value: testResult === "success" ? "Connected" : "Not tested", isComplete: testResult === "success", }, ]; return (

); } export default TutorialStepperIntegrationSetupWizardLiveSummaryTwoDemo;

Simple