import * as React from "react"; import { TutorialStepperSupportTroubleshootingDecisionFive } from "@/registry/tutorial-stepper-support-troubleshooting-decision-five/tutorial-stepper-support-troubleshooting-decision-five"; import { useToast } from "@/hooks/use-toast"; 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 TutorialStepperSupportTroubleshootingDecisionFiveDemo() { const { toast } = useToast(); const steps = [ { id: "check-connection", title: "Check Connection", severity: "high" as const, question: "Is your device connected to the internet?", instructions: (

Please verify your network connection:

Check if Wi-Fi or Ethernet is enabled
Try opening a different website
Restart your router if necessary

), resources: [ { title: "Network Troubleshooting Guide", description: "Step-by-step guide for connectivity issues", link: "https://docs.example.com/network", }, ], }, { id: "clear-cache", title: "Clear Browser Cache", severity: "medium" as const, question: "Have you tried clearing your browser cache?", instructions: (

Clear your browser cache and cookies:

Open browser settings
Navigate to Privacy & Security
Click "Clear browsing data"
Select "Cached images and files"
Restart your browser

), resources: [ { title: "How to Clear Cache", description: "Instructions for all major browsers", link: "https://docs.example.com/cache", }, ], }, { id: "check-credentials", title: "Verify Credentials", severity: "high" as const, question: "Are you using the correct login credentials?", instructions: (

Verify your account credentials:

Check if Caps Lock is off
Try resetting your password
Check if your account is active

), resources: [ { title: "Password Reset Guide", description: "How to reset your password securely", link: "https://docs.example.com/password-reset", }, { title: "Account Status Check", description: "Verify your account is active", link: "https://docs.example.com/account-status", }, ], }, { id: "browser-compatibility", title: "Check Browser", severity: "low" as const, question: "Are you using a supported browser?", instructions: (

We support the latest versions of:

Chrome (recommended)
Firefox
Safari
Edge

Try updating your browser to the latest version.

), resources: [ { title: "Supported Browsers", description: "List of compatible browsers and versions", link: "https://docs.example.com/browsers", }, ], }, ]; const supportContacts = [ { type: "chat" as const, label: "Chat with Support", action: () => toast({ title: "Opening chat...", description: "Connecting you with an agent", }), }, { type: "email" as const, label: "Email Support", action: () => toast({ title: "Opening email...", description: "Composing support ticket", }), }, { type: "phone" as const, label: "Call Support", action: () => toast({ title: "Call Support", description: "1-800-EXAMPLE" }), }, ]; return (

Troubleshooting Wizard

Follow these steps to resolve your issue

toast({ title: "Issue Resolved", description: `Great! Step ${stepId} resolved.`, }) } onNotResolved={(stepId) => toast({ title: "Still Having Issues?", description: "Please contact support for help", }) } />

); } export default TutorialStepperSupportTroubleshootingDecisionFiveDemo;

Simple