import * as React from "react"; import { TutorialStepperLearningPathGamificationSix } from "@/registry/tutorial-stepper-learning-path-gamification-six/tutorial-stepper-learning-path-gamification-six"; import { Star, Award, Zap } from "lucide-react"; 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 TutorialStepperLearningPathGamificationSixDemo() { const [completedLessons, setCompletedLessons] = React.useState>( new Set(["intro"]), ); const lessons = [ { id: "intro", title: "Introduction to React", duration: "10 min", isComplete: true, content: (

Video Player

Welcome to React! In this lesson, you'll learn the fundamentals.

), transcript: "Welcome to this React course. Today we'll cover the basics of React...", }, { id: "components", title: "Components & Props", duration: "15 min", isComplete: completedLessons.has("components"), content: (

Video Player

Learn how to create reusable components and pass data with props.

), transcript: "Components are the building blocks of React applications...", }, { id: "state", title: "State & Hooks", duration: "20 min", isComplete: completedLessons.has("state"), isLocked: !completedLessons.has("components"), content: (

Video Player

Master state management with useState and useEffect hooks.

), transcript: "State allows components to be dynamic and interactive...", }, { id: "advanced", title: "Advanced Patterns", duration: "25 min", isComplete: completedLessons.has("advanced"), isLocked: !completedLessons.has("state"), content: (

Video Player

Explore advanced React patterns and best practices.

), transcript: "Now that you know the basics, let's dive into advanced patterns...", }, ]; const achievements = [ { id: "first-lesson", title: "First Lesson", icon: , earned: true, }, { id: "streak-3", title: "3 Day Streak", icon: , earned: true, }, { id: "course-complete", title: "Course Complete", icon: , earned: false, }, { id: "helper", title: "Helpful", icon: "🤝", earned: false }, { id: "fast-learner", title: "Fast Learner", icon: "⚡", earned: false }, { id: "perfectionist", title: "100% Score", icon: "💯", earned: false }, ]; const discussions = [ { id: "msg-1", author: "Alice Johnson", authorAvatar: "/placeholder.svg", message: "This is a great introduction! Very clear explanations.", timestamp: "2h ago", }, { id: "msg-2", author: "Bob Smith", message: "Question: How do I handle multiple state variables?", timestamp: "4h ago", }, { id: "msg-3", author: "Carol White", message: "Check out lesson 3 for that! It covers useState in depth.", timestamp: "3h ago", }, ]; return (

{ setCompletedLessons((prev) => new Set(prev).add(lessonId)); }} />

); } export default TutorialStepperLearningPathGamificationSixDemo;

Simple