Input: Figma Design, 4 Images, Texts No of Threads: 1 Features: Sidebar & header reused from current repo, Your courses section, All courses section
Open this chat in IDE
// 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-onlyPlease wait while we set everything up