Kombai Logo

Create an EdTech Portal Page

Input: Figma Design, 4 Images, Texts No of Threads: 1 Features: Sidebar & header reused from current repo, Your courses section, All courses section

Next 15MantineCSS Modules

Open this chat in IDE

Close file
Close file
Close file
Close file
Close file
Close file
Close file
Close file
Close file
// Course difficulty levels and completion status
export enum CourseDifficulty {
  BEGINNER = 'Beginner',
  INTERMEDIATE = 'Intermediate',
  ADVANCED = 'Advanced'
}

export enum CourseStatus {
  IN_PROGRESS = 'in_progress',
  COMPLETED = 'completed',
  NOT_STARTED = 'not_started'
}

export const formatCompletionPercentage = (percentage: number): string => {
  return `${percentage}% complete`;
};

export const formatTimeLeft = (hours: number): string => {
  if (hours === 0) return '0 hours left';
  if (hours < 1) return `${hours} hours left`;
  return `${Math.floor(hours)} hours left`;
};

export const formatRating = (rating: number): string => {
  return rating.toFixed(1);
};

export const formatEnrollmentCount = (count: number): string => {
  return `(${count.toLocaleString()})`;
};

export const formatDuration = (hours: number): string => {
  return `${hours} hours`;
};

// Props types (data passed to components)
export interface YourCourse {
  id: string;
  title: string;
  icon: string;
  completionPercentage: number;
  timeLeft: number;
  progressColor: string;
}

export interface AllCourse {
  id: string;
  title: string;
  description: string;
  image: string;
  difficulty: string;
  duration: number;
  rating: number;
  enrollmentCount: number;
  difficultyColor: string;
}

export interface User {
  name: string;
  role: string;
  avatar: string;
}

export interface CoursesDashboardProps {
  user: User;
  yourCourses: YourCourse[];
  allCourses: AllCourse[];
}

// Data for the courses dashboard
export const mockRootProps = {
  user: {
    name: "Alesia K.",
    role: "Pro Member",
    avatar: "https://i.pravatar.cc/150?img=1"
  },
  yourCourses: [
    {
      id: "1",
      title: "Design Accessibility",
      icon: "/images/course-icon-1.png",
      completionPercentage: 25,
      timeLeft: 3,
      progressColor: "#2c8f88"
    },
    {
      id: "2", 
      title: "UX Research",
      icon: "/images/course-icon-2.png",
      completionPercentage: 70,
      timeLeft: 1.5,
      progressColor: "#2c8f88"
    },
    {
      id: "3",
      title: "Design Terminology", 
      icon: "/images/course-icon-3.png",
      completionPercentage: 100,
      timeLeft: 0,
      progressColor: "#2c8f88"
    }
  ],
  allCourses: [
    {
      id: "4",
      title: "Design Workshop Facilitation",
      description: "Master your skills in design workshop facilitation and learn how to promote collaboration and find the best design solutions. Learn what activities, tools, and deliverables can enhance your workshops.",
      image: "/images/course-image-1.png",
      difficulty: "Advanced",
      duration: 6,
      rating: 4.9,
      enrollmentCount: 1890,
      difficultyColor: "#2c8f88"
    },
    {
      id: "5",
      title: "Animation for Beginner",
      description: "Procreate Dreams has transformed my ability to make animations from my art. Yet when I first opened the app, I was so frustrated: I didn't understand what I could actually do and was stumped when it didn't behave like I thought it would. Cut to today, I've fallen in love with animation as an art form and am blown away with how easily I can create something cool. Even beginners can create impressive results.",
      image: "/images/course-image-2.png", 
      difficulty: "Beginner",
      duration: 6,
      rating: 4.9,
      enrollmentCount: 1890,
      difficultyColor: "#8b5cf6"
    },
    {
      id: "6",
      title: "Common Design Pattern",
      description: "Master your skills in design workshop facilitation and learn how to promote collaboration and find the best design solutions. Learn what activities, tools, and deliverables can enhance your workshops.",
      image: "/images/course-image-3.png",
      difficulty: "Intermediate", 
      duration: 6,
      rating: 4.9,
      enrollmentCount: 1890,
      difficultyColor: "#3b82f6"
    },
    {
      id: "7",
      title: "3D Design Foundation",
      description: "Learn about the many applications of 3D design and get familiar with the basics of 3D, such as the XYZ coordinate system, 3D shape primitives, perception, lighting, and materials.",
      image: "/images/course-image-4.png",
      difficulty: "Advanced",
      duration: 6,
      rating: 4.9,
      enrollmentCount: 1890,
      difficultyColor: "#8b5cf6"
    },
    {
      id: "8", 
      title: "Framer for Beginner",
      description: "Master your skills in design workshop facilitation and learn how to promote collaboration and find the best design solutions. Learn what activities, tools, and deliverables can enhance your workshops.",
      image: "/images/course-image-5.png",
      difficulty: "Beginner",
      duration: 6,
      rating: 4.9,
      enrollmentCount: 1890,
      difficultyColor: "#1f2937"
    },
    {
      id: "9",
      title: "Design Workshop Facilitation", 
      description: "Master your skills in design workshop facilitation and learn how to promote collaboration and find the best design solutions. Learn what activities, tools, and deliverables can enhance your workshops.",
      image: "/images/course-image-6.png",
      difficulty: "Advanced",
      duration: 6,
      rating: 4.9,
      enrollmentCount: 1890,
      difficultyColor: "#f97316"
    }
  ]
};
Read-only

Setting up preview

Please wait while we set everything up