diff --git a/src/components/Stat/index.tsx b/src/components/Stat/index.tsx
new file mode 100644
index 0000000..8275d14
--- /dev/null
+++ b/src/components/Stat/index.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {
+ Stat as ChakraStat,
+ StatProps,
+ useColorModeValue,
+ StatLabel as ChakraStatLabel,
+ StatLabel as ChakraStatNumber,
+ StatLabelProps,
+ Icon,
+ FlexProps,
+ Flex,
+} from '@chakra-ui/react';
+import { IconType } from 'react-icons';
+
+export const Stat: React.FC = (props: StatProps) => (
+
+);
+
+export const StatLabel: React.FC = (props: StatLabelProps) => (
+
+);
+
+export const StatNumber: React.FC = (props: StatLabelProps) => (
+
+);
+
+type StatIconPropsType = {
+ icon: IconType;
+};
+export const StatIcon: React.FC = props => (
+
+);
+
+export const StatContent: React.FC = props => (
+
+ {props.children}
+
+);
diff --git a/src/hooks/queries/category/useUpdateCategory.ts b/src/hooks/queries/category/useUpdateCategory.ts
index c48890f..c8296f0 100644
--- a/src/hooks/queries/category/useUpdateCategory.ts
+++ b/src/hooks/queries/category/useUpdateCategory.ts
@@ -13,6 +13,7 @@ const useUpdateCategory = () => {
const update = async (id: string, data: UpdateCategoryParamsType) => {
try {
const result = await CategoryServiceInstance.update(id, data);
+ toast({ title: 'Category updated.', status: 'info' });
return result.data;
} catch (error) {
if (axios.isAxiosError(error)) {
diff --git a/src/pages/main/components/index.tsx b/src/pages/main/components/index.tsx
new file mode 100644
index 0000000..8833f00
--- /dev/null
+++ b/src/pages/main/components/index.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+ Box,
+ BoxProps,
+ TextProps,
+ Text,
+ FlexProps,
+ Flex,
+ Tag,
+ TagLabel,
+ Icon,
+ Button,
+ useColorModeValue,
+ SimpleGrid,
+ SimpleGridProps,
+} from '@chakra-ui/react';
+import { Card } from '@educt/components/Card';
+import { MdOutlineVideoLibrary, MdOutlineGroup, MdOutlineThumbUpOffAlt, MdOutlinePlayCircle } from 'react-icons/md';
+import { useHistory } from 'react-router-dom';
+
+export const CourseCardList: React.FC = props => (
+
+);
+export const CourseCard: React.FC = props => ;
+export const CourseCardHeading: React.FC = props => (
+
+);
+export const CourseCardTitle: React.FC = props => ;
+export const CourseCardCategory: React.FC = props => (
+
+
+ {props.children}
+
+
+);
+export const CourseCardContent: React.FC = props => ;
+export const CourseCardCreated: React.FC<{ created: string }> = props => (
+
+
+ Created
+
+
+ {props.created}
+
+
+);
+export const CourseCardLessons: React.FC<{ count: string | number }> = props => (
+
+
+
+
+
+ Total lessons
+
+ {props.count}
+
+
+
+);
+export const CourseCardFooter: React.FC = props => (
+
+);
+
+export const CourseCardStat: React.FC<{ students: string | number; likes: string | number }> = props => (
+
+
+
+ {props.students}
+
+
+
+ {props.likes}
+
+
+);
+export const CourseCardWatch: React.FC<{ id: string }> = props => {
+ const history = useHistory();
+
+ return (
+
+
+
+ );
+};
diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
index ff9b74b..691c4b5 100644
--- a/src/pages/main/main.tsx
+++ b/src/pages/main/main.tsx
@@ -1,16 +1,102 @@
import React from 'react';
-import { Box, Heading } from '@chakra-ui/react';
-
+import { Flex, Box, Text, Link, SimpleGrid, Divider } from '@chakra-ui/react';
+import { Link as ReactRouterLink } from 'react-router-dom';
import { IPageProps } from '@educt/interfaces';
+import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements';
+import { Stat, StatContent, StatIcon, StatLabel, StatNumber } from '@educt/components/Stat';
+import { MdOutlineCollectionsBookmark, MdOutlineGroup, MdOutlineMessage, MdOutlineVideoLibrary } from 'react-icons/md';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import LoadingPage from '@educt/components/LoadingPage';
+import {
+ CourseCard,
+ CourseCardCategory,
+ CourseCardCreated,
+ CourseCardHeading,
+ CourseCardContent,
+ CourseCardLessons,
+ CourseCardTitle,
+ CourseCardFooter,
+ CourseCardWatch,
+ CourseCardStat,
+ CourseCardList,
+} from './components';
/**
* Main page
*/
const MainPage: React.FC = () => {
+ const {
+ userStore: { me },
+ } = useRootStore();
+
+ if (me === null) return ;
+
return (
-
- Main page
-
+
+
+
+
+
+ Unread messages
+
+ 3
+
+
+
+
+
+ Registered students
+
+ 24
+
+
+
+
+
+ Courses
+
+ 7
+
+
+
+
+
+ Lessons
+
+ 42
+
+
+
+
+
+
+ Recently added
+
+ See all
+
+
+
+
+
+ Javascript in a nutshell
+ Web Developing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/profile/components/index.tsx b/src/pages/profile/components/index.tsx
index bd1d76c..1f89cb7 100644
--- a/src/pages/profile/components/index.tsx
+++ b/src/pages/profile/components/index.tsx
@@ -69,7 +69,7 @@ export const ProfileDescription: React.FC = props => {
);
};
-export const ProfileSignOutButton: React.FC = props => {
+export const ProfileSignOutButton: React.FC = () => {
const { logout } = useLogout();
return (