auto-claude: subtask-2-6 - Create CompletionStep component - success message

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-15 17:22:19 +01:00
parent 32f17a10fb
commit aa0f608210
1 changed files with 165 additions and 0 deletions
@@ -0,0 +1,165 @@
 import {
  CheckCircle2,
  Rocket,
  FileText,
  Settings,
  BookOpen,
  ArrowRight
 } from 'lucide-react';
 import { Button } from '../ui/button';
 import { Card, CardContent } from '../ui/card';
 interface CompletionStepProps {
  onFinish: () => void;
  onOpenTaskCreator?: () => void;
  onOpenSettings?: () => void;
 }
 interface NextStepCardProps {
  icon: React.ReactNode;
  title: string;
  description: string;
  action?: () => void;
  actionLabel?: string;
 }
 function NextStepCard({ icon, title, description, action, actionLabel }: NextStepCardProps) {
  return (
    <Card className="border border-border bg-card/50 backdrop-blur-sm">
      <CardContent className="p-4">
        <div className="flex items-start gap-3">
          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
            {icon}
          </div>
          <div className="flex-1">
            <h3 className="font-medium text-foreground">{title}</h3>
            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
            {action && actionLabel && (
              <Button
                variant="link"
                size="sm"
                onClick={action}
                className="mt-2 h-auto p-0 text-primary hover:text-primary/80"
              >
                {actionLabel}
                <ArrowRight className="ml-1 h-3 w-3" />
              </Button>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
 }
 /**
 * Completion step component for the onboarding wizard.
 * Displays a success message with suggestions for next steps
 * and a prominent "Finish" button to complete the wizard.
 */
 export function CompletionStep({
  onFinish,
  onOpenTaskCreator,
  onOpenSettings
 }: CompletionStepProps) {
  const nextSteps = [
    {
      icon: <FileText className="h-5 w-5" />,
      title: 'Create a Task',
      description: 'Start by creating your first task to see Auto Claude in action.',
      action: onOpenTaskCreator,
      actionLabel: 'Open Task Creator'
    },
    {
      icon: <Settings className="h-5 w-5" />,
      title: 'Customize Settings',
      description: 'Fine-tune your preferences, configure integrations, or re-run this wizard.',
      action: onOpenSettings,
      actionLabel: 'Open Settings'
    },
    {
      icon: <BookOpen className="h-5 w-5" />,
      title: 'Explore Documentation',
      description: 'Learn more about advanced features, best practices, and troubleshooting.'
    }
  ];
  return (
    <div className="flex h-full flex-col items-center justify-center px-8 py-6">
      <div className="w-full max-w-2xl">
        {/* Success Hero */}
        <div className="text-center mb-10">
          <div className="flex justify-center mb-6">
            <div className="relative">
              <div className="flex h-20 w-20 items-center justify-center rounded-full bg-success/20 text-success">
                <CheckCircle2 className="h-10 w-10" />
              </div>
              <div className="absolute -bottom-1 -right-1 flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground">
                <Rocket className="h-4 w-4" />
              </div>
            </div>
          </div>
          <h1 className="text-3xl font-bold text-foreground tracking-tight">
            You&apos;re All Set!
          </h1>
          <p className="mt-3 text-muted-foreground text-lg">
            Auto Claude is ready to help you build amazing software
          </p>
        </div>
        {/* Completion message */}
        <Card className="border border-success/30 bg-success/10 mb-8">
          <CardContent className="p-5">
            <div className="flex items-start gap-4">
              <CheckCircle2 className="h-6 w-6 text-success flex-shrink-0 mt-0.5" />
              <div className="flex-1">
                <h3 className="text-lg font-medium text-success">
                  Setup Complete
                </h3>
                <p className="mt-1 text-sm text-success/80">
                  Your environment is configured and ready. You can start creating tasks
                  immediately or explore the application at your own pace.
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
        {/* Next Steps Section */}
        <div className="space-y-4 mb-10">
          <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
            <Rocket className="h-4 w-4" />
            What&apos;s Next?
          </div>
          <div className="grid grid-cols-1 gap-3">
            {nextSteps.map((step, index) => (
              <NextStepCard
                key={index}
                icon={step.icon}
                title={step.title}
                description={step.description}
                action={step.action}
                actionLabel={step.actionLabel}
              />
            ))}
          </div>
        </div>
        {/* Finish Button */}
        <div className="flex flex-col items-center gap-4">
          <Button
            size="lg"
            onClick={onFinish}
            className="gap-2 px-10"
          >
            <Rocket className="h-5 w-5" />
            Finish & Start Building
          </Button>
          <p className="text-sm text-muted-foreground text-center">
            You can always re-run this wizard from Settings &rarr; Application
          </p>
        </div>
      </div>
    </div>
  );
 }