import * as React from "react"; import { TabNavSettingsThree } from "@/registry/tab-nav-settings-three/tab-nav-settings-three"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { Switch } from "@/components/ui/switch"; import { 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"; Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; type ComponentProps = React.ComponentPropsWithoutRef< typeof TabNavSettingsThree >; type StepItem = ComponentProps["steps"][number]; const DEMO_STEPS: StepItem[] = [ { id: "profile", label: "Profile Information", title: "Set up your profile", description: "Tell us about yourself and your organization", helpText: "Your profile information helps us personalize your experience. All fields marked with * are required.", content: ( Basic Information This information will be visible to your team members

First Name *

Last Name *

Email *

Company

Role

), isComplete: true, }, { id: "billing", label: "Billing Details", title: "Configure billing", description: "Set up your payment method and billing preferences", helpText: "Your billing information is encrypted and secure. We support all major credit cards and PayPal.", content: ( Payment Method Add a payment method for your subscription

Card Number

Expiry Date

CVC

Billing Address

</div>
        </CardContent>
      </Card>
    ),
  },
  {
    id: "notifications",
    label: "Notifications",
    title: "Notification preferences",
    description: "Choose how and when you want to be notified",
    helpText:
      "You can always change these settings later. We recommend keeping important notifications enabled.",
    content: (
      <Card>
        <CardHeader>
          <CardTitle>Email Notifications</CardTitle>
          <CardDescription>
            Select which notifications you'd like to receive via email
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Product Updates</Label>
              <p className="text-sm text-muted-foreground">
                Get notified about new features and improvements
              </p>
            </div>
            <Switch defaultChecked />
          </div>
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Security Alerts</Label>
              <p className="text-sm text-muted-foreground">
                Important security and privacy notifications
              </p>
            </div>
            <Switch defaultChecked />
          </div>
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Team Activity</Label>
              <p className="text-sm text-muted-foreground">
                Updates about team member activities
              </p>
            </div>
            <Switch />
          </div>
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Marketing Emails</Label>
              <p className="text-sm text-muted-foreground">
                Tips, tricks, and promotional content
              </p>
            </div>
            <Switch />
          </div>
        </CardContent>
      </Card>
    ),
    isOptional: true,
  },
  {
    id: "integrations",
    label: "Integrations",
    title: "Connect your tools",
    description: "Integrate with your favorite apps and services",
    helpText:
      "Integrations help you streamline your workflow. You can add more integrations later from your settings.",
    content: (
      <div className="grid gap-4 md:grid-cols-2">
        {[
          {
            name: "Slack",
            description: "Get notifications in your Slack workspace",
            icon: "💬",
          },
          {
            name: "GitHub",
            description: "Connect your repositories and track commits",
            icon: "🐙",
          },
          {
            name: "Google Calendar",
            description: "Sync your events and meetings",
            icon: "📅",
          },
          {
            name: "Jira",
            description: "Link issues and track project progress",
            icon: "🎯",
          },
        ].map((integration) => (
          <Card key={integration.name}>
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="text-3xl">{integration.icon}</div>
                <div className="flex-1">
                  <CardTitle className="text-base">
                    {integration.name}
                  </CardTitle>
                  <CardDescription className="text-xs">
                    {integration.description}
                  </CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <Switch />
            </CardContent>
          </Card>
        ))}
      </div>
    ),
    isOptional: true,
  },
];

export function TabNavSettingsThreeDemo() {
  const handleSave = async (stepId: string) => {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000));
    console.log("Saved step:", stepId);
  };

const handleComplete = () => {
    console.log("All steps completed!");
  };

return (
    <div className="w-full space-y-4">
      <div className="space-y-2">
        <h2 className="text-2xl font-bold">Product Settings Step Tabs</h2>
        <p className="text-muted-foreground">
          Sequential configuration flow with progress tracking and contextual
          help. Perfect for onboarding and preference centers.
        </p>
      </div>

<TabNavSettingsThree
        steps={DEMO_STEPS}
        onSave={handleSave}
        onComplete={handleComplete}
        showProgress
        allowNonLinear
      />
    </div>
  );
}

export default TabNavSettingsThreeDemo;

</article></body></html>

Simple