build ok,
This commit is contained in:
louiscklaw
@@ -0,0 +1,104 @@
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import RouterLink from 'next/link';
|
||||
import Box from '@mui/material/Box';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Grid from '@mui/material/Unstable_Grid2';
|
||||
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
|
||||
|
||||
import { config } from '@/config';
|
||||
import { paths } from '@/paths';
|
||||
import { ChapterView } from '@/components/dashboard/academy/chapter-view';
|
||||
import { CourseSummary } from '@/components/dashboard/academy/course-summary';
|
||||
import type { Chapter, Course } from '@/components/dashboard/academy/types';
|
||||
|
||||
export const metadata = { title: `Course | Academy | ${config.site.name}` } satisfies Metadata;
|
||||
|
||||
const course = {
|
||||
id: 'CRS-001',
|
||||
title: 'React and Redux Tutorial',
|
||||
description: 'Introductory course for design and framework basics',
|
||||
duration: '78 hours',
|
||||
progress: 50,
|
||||
} satisfies Course;
|
||||
|
||||
const chapters = [
|
||||
{ id: 'CHAP-001', number: 1, title: 'Introduction', description: 'Introducing the app and how it works', lesson: '' },
|
||||
{
|
||||
id: 'CHAP-002',
|
||||
number: 2,
|
||||
title: 'Installing required packages',
|
||||
description: 'Installing the required packages for the project',
|
||||
lesson: `Alias animi labque, deserunt distinctio eum excepturi fuga iure labore magni molestias mollitia natus, officia pofro quis sunt
|
||||
temporibus veritatis voluptatem, voluptatum. Aut blanditiis esse et illum maxim, obcaecati possimus voluptate! Accusamus adipisci
|
||||
amet aperiam, assumenda consequuntur fugiat inventore iusto magnam molestias natus necessitatibus, nulla pariatur.
|
||||
|
||||
Adipisci alias animi debitis eos et impedit maiores, modi nam nobis officia optio perspiciatis, rerum. Accusantium esse nostrum odit quis quo:
|
||||
|
||||
\`\`\`ts
|
||||
const mongoose = require('mongoose'),
|
||||
const uniqueValidator = require('mongoose-unique-validator'),
|
||||
const bcrypt = require('bcrypt'),
|
||||
|
||||
const SALT_WORK_FACTOR = 10;
|
||||
|
||||
const Schema = mongoose.Schema;
|
||||
|
||||
const Email = new Schema({ address: { type: String,
|
||||
lowercase: true,
|
||||
required: [true, "can't be blank"],
|
||||
match: [/\\S+@\\S+\\.\\S+/, 'is invalid'],
|
||||
index: true,
|
||||
},
|
||||
// Change the default to true if you don't need to validate a new user's email address
|
||||
validated: { type: Boolean, default: false },
|
||||
});
|
||||
\`\`\``,
|
||||
},
|
||||
{
|
||||
id: 'CHAP-003',
|
||||
number: 3,
|
||||
title: 'Setting up the project',
|
||||
description: "Structuring the project's folders and files",
|
||||
lesson: '',
|
||||
},
|
||||
] satisfies Chapter[];
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
const currentChapter = chapters[1];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: 'var(--Content-maxWidth)',
|
||||
m: 'var(--Content-margin)',
|
||||
p: 'var(--Content-padding)',
|
||||
width: 'var(--Content-width)',
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={4}>
|
||||
<Grid md={4} xs={12}>
|
||||
<Stack spacing={3}>
|
||||
<div>
|
||||
<Link
|
||||
color="text.primary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.academy.browse}
|
||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
||||
Academy
|
||||
</Link>
|
||||
</div>
|
||||
<CourseSummary chapters={chapters} course={course} currentChapterNumber={currentChapter.number} />
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid md={8} xs={12}>
|
||||
<ChapterView chapter={currentChapter} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
114
002_source/cms/src/app/dashboard/academy/page.tsx
Normal file
114
002_source/cms/src/app/dashboard/academy/page.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import Box from '@mui/material/Box';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Grid from '@mui/material/Unstable_Grid2';
|
||||
|
||||
import { config } from '@/config';
|
||||
import { CourseCard } from '@/components/dashboard/academy/course-card';
|
||||
import { CoursesFilters } from '@/components/dashboard/academy/courses-filters';
|
||||
import { DailyProgress } from '@/components/dashboard/academy/daily-progress';
|
||||
import { Help } from '@/components/dashboard/academy/help';
|
||||
import type { Course } from '@/components/dashboard/academy/types';
|
||||
|
||||
export const metadata = { title: `Browse | Academy | ${config.site.name}` } satisfies Metadata;
|
||||
|
||||
const courses = [
|
||||
{
|
||||
id: 'CRS-003',
|
||||
title: 'React Crash Course: Beginner',
|
||||
description: 'Introductory course for design and framework basics',
|
||||
media: '/assets/course-3.png',
|
||||
duration: '21 hours',
|
||||
progress: 90,
|
||||
},
|
||||
{
|
||||
id: 'CRS-002',
|
||||
title: 'React and Express Tutorial',
|
||||
description: 'Introductory course for design and framework basics',
|
||||
media: '/assets/course-2.png',
|
||||
duration: '14 hours',
|
||||
progress: 52,
|
||||
},
|
||||
{
|
||||
id: 'CRS-001',
|
||||
title: 'React and Redux Tutorial',
|
||||
description: 'Introductory course for design and framework basics',
|
||||
media: '/assets/course-1.png',
|
||||
duration: '78 hours',
|
||||
progress: 23,
|
||||
},
|
||||
] satisfies Course[];
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: 'var(--Content-maxWidth)',
|
||||
m: 'var(--Content-margin)',
|
||||
p: 'var(--Content-padding)',
|
||||
width: 'var(--Content-width)',
|
||||
}}
|
||||
>
|
||||
<Stack spacing={4}>
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'var(--mui-palette-neutral-900)',
|
||||
borderRadius: '20px',
|
||||
color: 'var(--mui-palette-common-white)',
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
p: { xs: '32px 24px', md: '64px 56px', lg: '120px 80px' },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
alt="Pulse"
|
||||
component="img"
|
||||
src="/assets/pulse.svg"
|
||||
sx={{
|
||||
top: 0,
|
||||
height: 'auto',
|
||||
right: 0,
|
||||
position: 'absolute',
|
||||
width: '900px',
|
||||
zIndex: 0,
|
||||
transform: 'scaleX(-1)',
|
||||
}}
|
||||
/>
|
||||
<Stack spacing={4} sx={{ position: 'relative', zIndex: 1 }}>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="h3">Find unparalleled knowledge</Typography>
|
||||
<Typography>Learn from the top-tier creatives and leading experts in AI</Typography>
|
||||
</Stack>
|
||||
<CoursesFilters />
|
||||
</Stack>
|
||||
</Box>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="h6">Welcome back, Sofia</Typography>
|
||||
<Typography color="text.secondary" variant="body2">
|
||||
Nice progress so far, keep it up!
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Grid container spacing={4}>
|
||||
<Grid md={8} xs={12}>
|
||||
<DailyProgress timeCurrent={20} timeGoal={35} />
|
||||
</Grid>
|
||||
<Grid md={4} xs={12}>
|
||||
<Help />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Stack spacing={4}>
|
||||
<Typography variant="h6">My courses</Typography>
|
||||
<Grid container spacing={4}>
|
||||
{courses.map((course) => (
|
||||
<Grid key={course.id} md={4} xs={12}>
|
||||
<CourseCard course={course} />
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user