diff --git a/src/app/(learners)/dashboard/page.tsx b/src/app/(learners)/dashboard/page.tsx new file mode 100644 index 0000000..4bf488e --- /dev/null +++ b/src/app/(learners)/dashboard/page.tsx @@ -0,0 +1,29 @@ +/* + * ====================================================================== + * Copyright (C) 2025 - lzaycoe (Lazy Code) + * ====================================================================== + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + * + * ====================================================================== + */ +import { Dashboard } from '@/components/learners/Dashboard'; + +export default function Home() { + return ( +
+ +
+ ); +} diff --git a/src/components/learners/Dashboard.tsx b/src/components/learners/Dashboard.tsx new file mode 100644 index 0000000..937f8a5 --- /dev/null +++ b/src/components/learners/Dashboard.tsx @@ -0,0 +1,175 @@ +import React from 'react'; +import { FaUsersViewfinder } from 'react-icons/fa6'; +import { MdOutlineSlowMotionVideo } from 'react-icons/md'; +import { TiTickOutline } from 'react-icons/ti'; +import { VscVmActive } from 'react-icons/vsc'; + +const stats = [ + { + id: 1, + value: 957, + label: 'Enrolled Courses', + bgColor: 'bg-rose-100', + icon: , + }, + { + id: 2, + value: 6, + label: 'Active Courses', + bgColor: 'bg-violet-100', + icon: , + }, + { + id: 3, + value: 951, + label: 'Completed Courses', + bgColor: 'bg-green-100', + icon: , + }, + { + id: 4, + value: 241, + label: 'Course Instructors', + bgColor: 'bg-orange-50', + icon: , + }, +]; + +const courses = [ + { + id: 1, + title: 'Reiki Level I, II and Master/Teacher Program', + currentLesson: '1. Introductions', + thumbnail: + 'https://cdn.builder.io/api/v1/image/assets/TEMP/076c43f572a1bb2153aeabe1ee1d173d2e6375be60948b27852c91ac77bcf73e?placeholderIfAbsent=true&apiKey=eb47009d56d84332945ecb583277e964', + completed: null, + }, + { + id: 2, + title: 'The Complete 2021 Web Development Bootcamp', + currentLesson: "167. What You'll Need to Get Started", + thumbnail: + 'https://cdn.builder.io/api/v1/image/assets/TEMP/846987ebaa81cdd131e6a90c437bde2bbce3794c85ca9e5bfb0eb02c5531e1bb?placeholderIfAbsent=true&apiKey=eb47009d56d84332945ecb583277e964', + completed: '61%', + }, + { + id: 3, + title: 'Copywriting - Become a Freelance Copywriter', + currentLesson: '1. How to get started with figma', + thumbnail: + 'https://cdn.builder.io/api/v1/image/assets/TEMP/fc2a4232c972981e306b9ddc865cd2b0925db44ce042c2a47cdf6099d61eca2e?placeholderIfAbsent=true&apiKey=eb47009d56d84332945ecb583277e964', + completed: null, + }, + { + id: 4, + title: '2021 Complete Python Bootcamp From Zero to Mastery', + currentLesson: '9. Advanced CSS - Selector Priority', + thumbnail: + 'https://cdn.builder.io/api/v1/image/assets/TEMP/7d3b47aa0f5db644a45cae11fe354e53122d2e9f0bdf3cc1165e71381c98df79?placeholderIfAbsent=true&apiKey=eb47009d56d84332945ecb583277e964', + completed: '12%', + }, +]; + +export const Dashboard = () => { + return ( +
+ {/* Section 1: Header */} +
+
+ Profile +
+

Lazy Code

+

+ Web Designer & Best-Selling Instructor +

+
+
+ +
+ + {/* Section 2: Menu */} + + + {/* Section 3: Stats */} +
+ {stats.map((stat) => ( +
+
+ {stat.icon} +
+
+

{stat.value}

+

{stat.label}

+
+
+ ))} +
+ + {/* Section 4: Courses */} +
+

Let's start learning

+
+ {courses.map((course) => ( +
+ {course.title} +

{course.title}

+

{course.currentLesson}

+ {course.completed ? ( +
+
+

+ {course.completed} Completed +

+
+
+
+
+ +
+ ) : ( + + )} +
+ ))} +
+
+
+ ); +};