Now I'll generate the code files for the courses dashboard with progress cards, course grid layout, filters and sorting functionality. ```ts src/theme/theme.ts // Update theme to include course-specific colors and progress bar styling import { createTheme } from '@mui/material/styles'; const theme = createTheme({ colorSchemes: { light: { palette: { primary: { main: '#1a4e44', }, secondary: { main: '#808897', }, text: { primary: '#0d0d12', secondary: '#666d80', }, background: { default: '#ffffff', paper: '#f8f9fb', }, divider: '#dfe1e6', grey: { 50: '#f8f9fb', 100: '#eeeff2', 200: '#dfe1e6', 300: '#a4abb8', 400: '#808897', 500: '#666d80', }, success: { main: '#2c8f88', }, warning: { main: '#ffbd4c', } } }, dark: { palette: { primary: { main: '#ffffff', }, secondary: { main: '#9ca3af', }, text: { primary: '#ffffff', secondary: '#9ca3af', }, background: { default: '#111827', paper: '#1f2937', }, divider: '#374151', grey: { 50: '#1f2937', 100: '#374151', 200: '#4b5563', 300: '#6b7280', 400: '#9ca3af', 500: '#d1d5db', }, success: { main: '#2c8f88', }, warning: { main: '#ffbd4c', } } } }, typography: { fontFamily: "'Inter Tight', sans-serif", h4: { fontSize: '24px', fontWeight: 600, }, h5: { fontSize: '20px', fontWeight: 600, }, h6: { fontSize: '16px', fontWeight: 600, lineHeight: '24px', letterSpacing: '0.32px', }, body1: { fontSize: '16px', fontWeight: 500, letterSpacing: '0.32px', }, body2: { fontSize: '14px', fontWeight: 500, letterSpacing: '0.28px', }, caption: { fontSize: '12px', fontWeight: 400, letterSpacing: '0.24px', }, }, shape: { borderRadius: 8, }, }); export default theme; ``` ```tsx src/components/CourseCard/CourseCard.tsx import React from 'react'; import { Box, Typography, LinearProgress, Paper } from '@mui/material'; import { styled } from '@mui/material/styles'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faClock } from '@fortawesome/free-solid-svg-icons'; import { YourCourse, formatCompletionPercentage, formatTimeLeft } from '../../data/coursesDashboardMockData'; const CourseCardContainer = styled(Paper)(({ theme }) => ({ borderRadius: '12px', border: `1px solid ${theme.palette.grey[100]}`, boxShadow: '0px 1px 2px rgba(228, 229, 231, 0.24)', padding: '20px', display: 'flex', flexDirection: 'column', gap: '16px', backgroundColor: theme.palette.background.default, })); const CourseIcon = styled('img')({ width: '40px', height: '40px', borderRadius: '8px', }); const CourseTitle = styled(Typography)(({ theme }) => ({ fontSize: '16px', fontWeight: 600, letterSpacing: '0.32px', color: theme.palette.text.primary, })); const CourseDetails = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap', })); const CompletionText = styled(Typography)(({ theme }) => ({ fontSize: '14px', fontWeight: 400, letterSpacing: '0.28px', color: theme.palette.text.secondary, })); const DotSeparator = styled(Box)(({ theme }) => ({ width: '4px', height: '4px', borderRadius: '50%', backgroundColor: theme.palette.grey[300], })); const TimeContainer = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', gap: '4px', })); const ClockIconWrapper = styled(Box)(({ theme }) => ({ width: '13px', height: '13px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: theme.palette.text.secondary, })); const ProgressContainer = styled(Box)({ width: '100%', }); const StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({ height: '10px', borderRadius: '3px', backgroundColor: theme.palette.grey[100], '& .MuiLinearProgress-bar': { backgroundColor: theme.palette.success.main, borderRadius: '3px', }, })); interface CourseCardProps { course: YourCourse; } const CourseCard: React.FC = ({ course }) => { return ( {course.title} {formatCompletionPercentage(course.completionPercentage)} {formatTimeLeft(course.timeLeft)} ); }; export default CourseCard; ``` ```tsx src/components/AllCourseCard/AllCourseCard.tsx import React from 'react'; import { Box, Typography, Divider, Paper } from '@mui/material'; import { styled } from '@mui/material/styles'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faClock, faStar } from '@fortawesome/free-solid-svg-icons'; import { AllCourse, formatRating, formatEnrollmentCount, formatDuration } from '../../data/coursesDashboardMockData'; const AllCourseCardContainer = styled(Paper)(({ theme }) => ({ borderRadius: '12px', border: `1px solid ${theme.palette.grey[100]}`, boxShadow: '0px 1px 2px rgba(228, 229, 231, 0.24)', overflow: 'hidden', backgroundColor: theme.palette.background.default, })); const CourseImage = styled('img')({ width: '100%', height: '150px', objectFit: 'cover', }); const CourseContent = styled(Box)({ padding: '16px', display: 'flex', flexDirection: 'column', gap: '12px', }); const CourseTitle = styled(Typography)(({ theme }) => ({ fontSize: '16px', fontWeight: 600, letterSpacing: '0.32px', color: theme.palette.text.primary, })); const CourseDescription = styled(Typography)(({ theme }) => ({ fontSize: '14px', fontWeight: 400, letterSpacing: '0.28px', lineHeight: '21px', color: theme.palette.text.secondary, display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2, overflow: 'hidden', })); const StyledDivider = styled(Divider)(({ theme }) => ({ border: `1px dashed ${theme.palette.divider}`, })); const CourseFooter = styled(Box)({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', }); const LeftSection = styled(Box)({ display: 'flex', alignItems: 'center', gap: '8px', }); const DifficultyBadge = styled(Box)<{ difficultyColor: string }>(({ theme, difficultyColor }) => ({ display: 'flex', alignItems: 'center', gap: '2px', padding: '4px 8px', borderRadius: '4px', backgroundColor: difficultyColor, })); const DifficultyText = styled(Typography)(({ theme }) => ({ fontSize: '14px', fontWeight: 400, letterSpacing: '0.28px', color: theme.palette.text.secondary, })); const DotSeparator = styled(Box)(({ theme }) => ({ width: '4px', height: '4px', borderRadius: '50%', backgroundColor: theme.palette.grey[300], })); const TimeContainer = styled(Box)({ display: 'flex', alignItems: 'center', gap: '4px', }); const ClockIconWrapper = styled(Box)(({ theme }) => ({ width: '13px', height: '13px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: theme.palette.text.secondary, })); const RatingSection = styled(Box)({ display: 'flex', alignItems: 'center', gap: '2px', }); const StarIconWrapper = styled(Box)(({ theme }) => ({ width: '13px', height: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: theme.palette.warning.main, })); const RatingText = styled(Typography)(({ theme }) => ({ fontSize: '14px', fontWeight: 500, letterSpacing: '0.28px', color: theme.palette.text.primary, })); const EnrollmentText = styled(Typography)(({ theme }) => ({ fontSize: '14px', fontWeight: 400, letterSpacing: '0.28px', color: theme.palette.text.secondary, })); interface AllCourseCardProps { course: AllCourse; } const AllCourseCard: React.FC = ({ course }) => { return ( {course.title} {course.description} {course.difficulty} {formatDuration(course.duration)} {formatRating(course.rating)} {formatEnrollmentCount(course.enrollmentCount)} ); }; export default AllCourseCard; ``` ```tsx src/components/CoursesFiltersAndSorting/CoursesFiltersAndSorting.tsx import React from 'react'; import { Box, Typography, Button } from '@mui/material'; import { styled } from '@mui/material/styles'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faObjectUngroup, faAngleDown } from '@fortawesome/free-solid-svg-icons'; const FiltersContainer = styled(Box)({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', }); const LeftSection = styled(Box)({ display: 'flex', alignItems: 'center', gap: '16px', }); const FilterButton = styled(Button)(({ theme }) => ({ display: 'flex', alignItems: 'center', gap: '6px', padding: '8px 12px', borderRadius: '8px', border: `1px solid ${theme.palette.divider}`, boxShadow: '0px 1px 2px rgba(82, 88, 102, 0.06)', backgroundColor: theme.palette.background.default, color: theme.palette.text.secondary, textTransform: 'none', fontSize: '14px', fontWeight: 500, letterSpacing: '0.28px', '&:hover': { backgroundColor: theme.palette.grey[50], }, })); const SectionTitle = styled(Typography)(({ theme }) => ({ fontSize: '20px', fontWeight: 600, color: theme.palette.text.primary, })); const SortButton = styled(Button)(({ theme }) => ({ display: 'flex', alignItems: 'center', gap: '6px', padding: '8px 12px', borderRadius: '8px', border: `1px solid ${theme.palette.divider}`, boxShadow: '0px 1px 2px rgba(82, 88, 102, 0.06)', backgroundColor: theme.palette.background.default, color: theme.palette.text.secondary, textTransform: 'none', fontSize: '14px', fontWeight: 500, letterSpacing: '0.28px', '&:hover': { backgroundColor: theme.palette.grey[50], }, })); const FilterIconWrapper = styled(Box)(({ theme }) => ({ width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: theme.palette.text.secondary, })); const DropdownIconWrapper = styled(Box)(({ theme }) => ({ width: '10px', height: '6px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: theme.palette.text.secondary, })); interface CoursesFiltersAndSortingProps { onFilterChange?: (filter: string) => void; onSortChange?: (sort: string) => void; } const CoursesFiltersAndSorting: React.FC = ({ onFilterChange, onSortChange }) => { return ( onFilterChange?.('filters')}> Filters All Courses onSortChange?.('recommendation')}> Recommendation ); }; export default CoursesFiltersAndSorting; ``` ```tsx src/components/CoursesDashboard/CoursesDashboard.tsx import React, { useState, useMemo } from 'react'; import { Box, CssBaseline, Typography } from '@mui/material'; import { ThemeProvider, useColorScheme } from '@mui/material/styles'; import { styled } from '@mui/material/styles'; import Sidebar from '../Sidebar/Sidebar'; import Header from '../Header/Header'; import CourseCard from '../CourseCard/CourseCard'; import AllCourseCard from '../AllCourseCard/AllCourseCard'; import CoursesFiltersAndSorting from '../CoursesFiltersAndSorting/CoursesFiltersAndSorting'; import { CoursesDashboardProps, AllCourse } from '../../data/coursesDashboardMockData'; import theme from '../../theme/theme'; const DashboardContainer = styled(Box)(({ theme }) => ({ display: 'flex', minHeight: '100vh', width: '100vw', backgroundColor: theme.palette.background.default, })); const MainContent = styled(Box)(({ theme }) => ({ flex: 1, display: 'flex', flexDirection: 'column', width: 'calc(100vw - 270px)', overflow: 'hidden', })); const ContentArea = styled(Box)(({ theme }) => ({ padding: '24px 32px', display: 'flex', flexDirection: 'column', gap: '24px', width: '100%', })); const YourCoursesSection = styled(Box)({ display: 'flex', flexDirection: 'column', gap: '16px', }); const SectionTitle = styled(Typography)(({ theme }) => ({ fontSize: '20px', fontWeight: 600, color: theme.palette.text.primary, })); const YourCoursesGrid = styled(Box)({ display: 'flex', gap: '24px', flexWrap: 'wrap', }); const AllCoursesSection = styled(Box)({ display: 'flex', flexDirection: 'column', gap: '24px', }); const AllCoursesGrid = styled(Box)(({ theme }) => ({ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '24px', width: '100%', '@media (max-width: 1200px)': { gridTemplateColumns: 'repeat(2, 1fr)', }, '@media (max-width: 800px)': { gridTemplateColumns: '1fr', }, })); const CoursesDashboard: React.FC = ({ user, yourCourses, allCourses }) => { const [sortBy, setSortBy] = useState('Recommendation'); const [filterBy, setFilterBy] = useState('All'); const { mode, setMode } = useColorScheme(); const handleToggleDarkMode = () => { setMode(mode === 'light' ? 'dark' : 'light'); }; const handleSortChange = (newSortBy: string) => { setSortBy(newSortBy); }; const handleFilterChange = (newFilterBy: string) => { setFilterBy(newFilterBy); }; const sortedAndFilteredCourses = useMemo(() => { let filteredCourses = [...allCourses]; // Apply sorting switch (sortBy) { case 'Most Recent': filteredCourses = filteredCourses.reverse(); break; case 'Highest Rated': filteredCourses.sort((a, b) => b.rating - a.rating); break; case 'Duration': filteredCourses.sort((a, b) => a.duration - b.duration); break; case 'Recommendation': default: // Default order (recommendation) break; } return filteredCourses; }, [allCourses, sortBy, filterBy]); return (

Your Courses {yourCourses.map((course) => ( ))} {sortedAndFilteredCourses.map((course) => ( ))} ); }; const CoursesDashboardWithTheme: React.FC = (props) => { return ( ); }; export default CoursesDashboardWithTheme; ``` ```tsx src/components/Header/Header.tsx import React from 'react'; import { Box, Typography, Avatar, IconButton, Divider } from '@mui/material'; import { styled } from '@mui/material/styles'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'; import NotificationIcon from '../Icons/NotificationIcon.svg'; const HeaderContainer = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '24px 32px', borderBottom: `1px solid ${theme.palette.grey[100]}`, backgroundColor: theme.palette.background.default, })); const HeaderTitle = styled(Typography)(({ theme }) => ({ fontSize: '24px', fontWeight: 600, color: theme.palette.text.primary, })); const IconGroup = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', gap: '16px', })); const ProfileSection = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', gap: '8px', })); const UserInfo = styled(Box)(({ theme }) => ({ display: 'flex', flexDirection: 'column', })); const UserName = styled(Typography)(({ theme }) => ({ fontSize: '12px', fontWeight: 600, letterSpacing: '0.24px', color: theme.palette.text.primary, })); const UserRole = styled(Typography)(({ theme }) => ({ fontSize: '12px', fontWeight: 400, letterSpacing: '0.24px', color: theme.palette.text.secondary, })); const SearchIconButton = styled(IconButton)(({ theme }) => ({ width: 20, height: 20, color: theme.palette.text.secondary, })); const NotificationIconButton = styled(IconButton)(({ theme }) => ({ width: 32, height: 32, borderRadius: '50%', backgroundColor: theme.palette.grey[100], '&:hover': { backgroundColor: theme.palette.grey[200], } })); interface HeaderProps { user: { name: string; role: string; avatar: string; }; title?: string; } const Header: React.FC = ({ user, title = "Course" }) => { return ( {title} {user.name} {user.role} ); }; export default Header; ``` ```tsx src/components/Sidebar/Sidebar.tsx import React from "react"; import { Box, Paper, ButtonBase, Divider, Typography, Switch, FormControlLabel, } from "@mui/material"; import { styled } from "@mui/material/styles"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHouseChimneyWindow, faBookmark, faGraduationCap, faPlay, faLightbulb, faAward, faMicrochip, faCalendarDays, faEarthAfrica, faSun, faCircleQuestion, } from "@fortawesome/free-solid-svg-icons"; import AcademicLogo from "../Icons/AcademicLogo.svg"; const SidebarContainer = styled(Paper)(({ theme }) => ({ width: 270, height: "100vh", minHeight: "100vh", borderRadius: 0, borderRight: `1px solid ${theme.palette.divider}`, display: "flex", flexDirection: "column", padding: "16px", gap: "16px", backgroundColor: theme.palette.background.paper, position: "sticky", top: 0, left: 0, })); const MenuSection = styled(Box)(({ theme }) => ({ display: "flex", flexDirection: "column", gap: "4px", })); const MenuItem = styled(ButtonBase)(({ theme }) => ({ display: "flex", alignItems: "center", gap: "10px", padding: "8px 10px", borderRadius: "10px", width: "100%", justifyContent: "flex-start", minHeight: "40px", "&.active": { backgroundColor: theme.palette.grey[50], "& .menu-text": { fontWeight: 600, color: theme.palette.text.primary, }, }, })); const MenuText = styled(Typography)(({ theme }) => ({ fontSize: "16px", fontWeight: 500, letterSpacing: "0.32px", color: theme.palette.text.secondary, })); const IconWrapper = styled(Box)(({ theme }) => ({ width: 17, height: 17, display: "flex", alignItems: "center", justifyContent: "center", color: theme.palette.text.secondary, })); interface SidebarProps { darkMode: boolean; onToggleDarkMode: () => void; } const Sidebar: React.FC = ({ darkMode, onToggleDarkMode }) => { const menuItems = [ { icon: faHouseChimneyWindow, label: "Home", active: false }, { icon: faBookmark, label: "Bookmarks", active: false }, ]; const mainMenuItems = [ { icon: faGraduationCap, label: "Courses", active: true }, { icon: faPlay, label: "Tutorials", active: false }, { icon: faLightbulb, label: "Best Practices", active: false }, { icon: faAward, label: "Certifications", active: false }, ]; const resourceMenuItems = [ { icon: faMicrochip, label: "Resources", active: false }, { icon: faCalendarDays, label: "Events", active: false }, { icon: faEarthAfrica, label: "Community", active: false }, ]; const bottomMenuItems = [ { icon: faSun, label: "Setting", active: false }, { icon: faCircleQuestion, label: "Help Center", active: false }, ]; return ( Academic Logo

{menuItems.map((item, index) => ( {item.label} ))} {mainMenuItems.map((item, index) => ( {item.label} ))} {resourceMenuItems.map((item, index) => ( {item.label} ))} {bottomMenuItems.map((item, index) => ( {item.label} ))} Dark Mode ); }; export default Sidebar; ``` ```tsx App.coursesdashboard.tsx import React from 'react'; import CoursesDashboard from './src/components/CoursesDashboard/CoursesDashboard'; import { mockRootProps } from './src/data/coursesDashboardMockData'; const App: React.FC = () => { return ( ); }; export default App; ``` Error while applying llm output. Retrying.

Read index.css

Create an EdTech Portal Page

Setting up preview