From 0b080fc0bed26b09fc984a28e5d491d6d0f69eb9 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Sun, 10 Oct 2021 21:12:53 +0300
Subject: [PATCH] feat: courses page layout

---
 src/components/Layout/Layout.tsx              |  2 +-
 .../components/CourseList/CourseItem.tsx      | 95 +++++++++++++++++++
 .../components/CourseList/CourseList.tsx      | 33 +++++++
 .../courses/components/CourseList/index.ts    |  3 +
 src/pages/courses/index.tsx                   | 38 +++++---
 src/pages/users/index.tsx                     |  6 +-
 6 files changed, 158 insertions(+), 19 deletions(-)
 create mode 100644 src/pages/courses/components/CourseList/CourseItem.tsx
 create mode 100644 src/pages/courses/components/CourseList/CourseList.tsx
 create mode 100644 src/pages/courses/components/CourseList/index.ts

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index e4a7dbc..be38e8f 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -50,7 +50,7 @@ const Layout: React.FC<LayoutPropsType> = ({ children, roles }) => {
           pr='2rem'
           pl='2rem'
           sx={{
-            '@media (max-width: 1280px)': {
+            '@media (max-width: 1400px)': {
               ml: '20rem',
             },
             '@media (max-width: 991px)': {
diff --git a/src/pages/courses/components/CourseList/CourseItem.tsx b/src/pages/courses/components/CourseList/CourseItem.tsx
new file mode 100644
index 0000000..b68135d
--- /dev/null
+++ b/src/pages/courses/components/CourseList/CourseItem.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import {
+  Flex,
+  Box,
+  Heading,
+  Text,
+  Menu,
+  MenuButton,
+  Badge,
+  MenuItem,
+  MenuList,
+  Image,
+  Link,
+  IconButton,
+} from '@chakra-ui/react';
+import { Icon } from '@chakra-ui/react';
+import { MdNote } from 'react-icons/md';
+
+import { MdGroup, MdThumbUp, MdVideoLibrary } from 'react-icons/md';
+import { DeleteIcon, EditIcon, HamburgerIcon } from '@chakra-ui/icons';
+import { Link as ReactRouterLink } from 'react-router-dom';
+
+const CourseItem: React.FC = () => {
+  return (
+    <Box borderWidth='1px' borderRadius='lg'>
+      <Flex justifyContent='flex-end'>
+        <Box position='absolute' zIndex='1' padding='10px'>
+          <Menu>
+            <MenuButton as={IconButton} colorScheme='gray' aria-label='Actions' icon={<HamburgerIcon />} />
+            <MenuList>
+              <MenuItem icon={<EditIcon />}>Edit course</MenuItem>
+              <MenuItem icon={<MdNote />}>Mark as Draft</MenuItem>
+              <MenuItem icon={<DeleteIcon />} color='red.500'>
+                Delete
+              </MenuItem>
+            </MenuList>
+          </Menu>
+        </Box>
+      </Flex>
+      <Link
+        to='/course/id'
+        as={ReactRouterLink}
+        display='block'
+        textDecoration='none'
+        _visited={{ textDecoration: 'none' }}
+        _hover={{ textDecoration: 'none' }}
+      >
+        <Box
+          position='relative'
+          minHeight='200px'
+          backgroundColor='gray.200'
+          borderTopLeftRadius='lg'
+          borderTopRightRadius='lg'
+          p='10px'
+        >
+          <Image
+            position='absolute'
+            top='0'
+            bottom='0'
+            right='0'
+            left='0'
+            fit='cover'
+            h='100%'
+            w='100%'
+            borderTopLeftRadius='lg'
+            borderTopRightRadius='lg'
+            src='https://bit.ly/2k1H1t6'
+          />
+        </Box>
+        <Box p='0 10px' mt='10px' pb='20px'>
+          <Badge colorScheme='blue'>ReactJS</Badge>
+          <Heading as='h2' fontSize='xl' mt='5px'>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+          </Heading>
+          <Flex mt='20px' flexWrap='wrap'>
+            <Flex alignItems='center' mr='1'>
+              <Icon as={MdVideoLibrary} mr='2' />
+              <Text mr='4'>24 lesson</Text>
+            </Flex>
+            <Flex alignItems='center' mr='1'>
+              <Icon as={MdGroup} mr='2' />
+              <Text mr='4'>12 students</Text>
+            </Flex>
+            <Flex alignItems='center' mr='1'>
+              <Icon as={MdThumbUp} mr='2' />
+              <Text>4 likes</Text>
+            </Flex>
+          </Flex>
+        </Box>
+      </Link>
+    </Box>
+  );
+};
+
+export default CourseItem;
diff --git a/src/pages/courses/components/CourseList/CourseList.tsx b/src/pages/courses/components/CourseList/CourseList.tsx
new file mode 100644
index 0000000..2a55e13
--- /dev/null
+++ b/src/pages/courses/components/CourseList/CourseList.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Grid } from '@chakra-ui/react';
+
+/**
+ * Components
+ */
+import CourseItem from './CourseItem';
+
+const CourseList: React.FC = () => {
+  return (
+    <Grid
+      templateColumns='repeat(3, 1fr)'
+      gap='6'
+      mt='12'
+      padding='0 20px'
+      sx={{
+        '@media (max-width: 1280px)': {
+          gridTemplateColumns: 'repeat(2, 1fr)',
+        },
+        '@media (max-width: 768px)': {
+          gridTemplateColumns: 'repeat(1, 1fr)',
+          padding: '10px',
+        },
+      }}
+    >
+      {[1, 2, 3, 4, 5, 6, 7, 8].map(i => {
+        return <CourseItem key={i} />;
+      })}
+    </Grid>
+  );
+};
+
+export default CourseList;
diff --git a/src/pages/courses/components/CourseList/index.ts b/src/pages/courses/components/CourseList/index.ts
new file mode 100644
index 0000000..0b4872f
--- /dev/null
+++ b/src/pages/courses/components/CourseList/index.ts
@@ -0,0 +1,3 @@
+import CourseList from './CourseList';
+
+export default CourseList;
diff --git a/src/pages/courses/index.tsx b/src/pages/courses/index.tsx
index 541c11b..96f0484 100644
--- a/src/pages/courses/index.tsx
+++ b/src/pages/courses/index.tsx
@@ -1,28 +1,40 @@
 import React from 'react';
-import { Box, Heading, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Grid } from '@chakra-ui/react';
+import { Flex, Tabs, TabList, Tab, Box, Heading, Text, Button } from '@chakra-ui/react';
 
 import { IPageProps } from 'interfaces';
+import { AddIcon } from '@chakra-ui/icons';
+
+/**
+ * Components
+ */
+import CourseList from './components/CourseList';
 
 /**
  * Courses page
  */
 const CoursesPage: React.FC<IPageProps> = ({ title }) => {
   return (
-    <>
-      <Breadcrumb fontWeight='medium' fontSize='sm'>
-        <BreadcrumbItem isCurrentPage>
-          <BreadcrumbLink href='/'>{title}</BreadcrumbLink>
-        </BreadcrumbItem>
-      </Breadcrumb>
-      <Box mt='10'>
+    <Box>
+      <Flex alignItems='center' justifyContent='space-between'>
         <Box>
-          <Heading as='h1'>Courses page</Heading>
-          <Grid templateColumns='3fr 1fr' mt='25px'>
-            ...
-          </Grid>
+          <Heading as='h1'>Courses</Heading>
+          <Text mt='2'>List of all available courses.</Text>
         </Box>
+        <Button variant='outline' colorScheme='blue' leftIcon={<AddIcon />}>
+          Create new
+        </Button>
+      </Flex>
+      <Box mt='7'>
+        <Tabs>
+          <TabList justifyContent='center'>
+            <Tab>All</Tab>
+            <Tab>Published</Tab>
+            <Tab>Draft</Tab>
+          </TabList>
+        </Tabs>
+        <CourseList />
       </Box>
-    </>
+    </Box>
   );
 };
 
diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx
index c0193d1..6f0592b 100644
--- a/src/pages/users/index.tsx
+++ b/src/pages/users/index.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Box, Flex, Button, Heading, Text } from '@chakra-ui/react';
-import { FaFileExcel } from 'react-icons/fa';
+import { Box, Flex, Heading, Text } from '@chakra-ui/react';
 
 /**
  * Types
@@ -51,9 +50,6 @@ const UsersPage: React.FC<IPageProps> = () => {
               <UserSearch />
               <Flex sx={{ gap: '10px' }}>
                 <CreateUserForm me={userStore.me} />
-                <Button disabled variant='outline' colorScheme='green' leftIcon={<FaFileExcel />}>
-                  Import
-                </Button>
               </Flex>
             </Flex>
             <UserList users={userStore.users} pagination={userStore.pagination} />