-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathcourses.js
118 lines (114 loc) · 7.51 KB
/
courses.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { Badge, Box, Button, Flex, Grid, GridItem, Image, Text } from '@chakra-ui/react'
import Head from 'next/head'
import Link from 'next/link'
import React from 'react'
import { FaBook, FaBookMedical, FaBookReader, FaBrain, FaGift, FaHome, FaMoneyBill } from 'react-icons/fa'
import { useDispatch, useSelector } from 'react-redux'
import Navbar from '../components/Navbar'
import { getAllCourses } from '../redux/course/action'
import { Skeleton, SkeletonText } from '@chakra-ui/react'
function courses() {
const dispatch = useDispatch();
const { Allcourses: { data, loading, error } } = useSelector(state => state.course);
React.useEffect(() => {
dispatch(getAllCourses());
}, [dispatch]);
return (
<>
<Head>
<title>Courses - Hackathon</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Box bg={'gray.50'}>
<Navbar />
<Box mx={{ base: '4', md: '10', lg: '20', xl: '32' }}>
<Grid templateColumns="repeat(7, 1fr)" gap={6}>
<GridItem colSpan={{ base: 7, md: 2 }} h='88vh' mt='8'>
<Box textColor={'gray.500'} p='4' borderRadius='lg'>
<Flex alignItems={'center'} p='4' gap={2} borderRadius='lg' _hover={{ bg: 'gray.100' }} cursor='pointer'>
<FaHome />
<Text fontWeight='semibold'>Home</Text>
</Flex>
<Flex alignItems={'center'} p='4' gap={2} borderRadius='lg'>
<Text fontWeight='semibold' mt='4'>SELF STUDY</Text>
</Flex>
<Flex alignItems={'center'} p='4' gap={2} mt='1' borderRadius='lg' _hover={{ bg: 'gray.100' }} cursor='pointer'>
<FaBrain />
<Text fontWeight='semibold'>Browse</Text>
</Flex>
<Flex alignItems={'center'} p='4' gap={2} mt='1' borderRadius='lg' _hover={{ bg: 'gray.100' }} cursor='pointer'>
<FaBook />
<Text fontWeight='semibold'>Study Material</Text>
</Flex>
<Flex alignItems={'center'} p='4' gap={2} mt='1' borderRadius='lg' _hover={{ bg: 'gray.100' }} cursor='pointer'>
<FaGift />
<Text fontWeight='semibold'>Free Courses</Text>
</Flex>
<Flex alignItems={'center'} p='4' gap={2} mt='1' borderRadius='lg' _hover={{ bg: 'gray.100' }} cursor='pointer'>
<FaMoneyBill />
<Text fontWeight='semibold'>Paid Courses</Text>
</Flex>
<Link href='/referral'>
<Button colorScheme='blue' mt='4' w='full'>Refer & Earn</Button>
</Link>
<Box border='1px solid' borderColor='gray.100' borderRadius='md' p={4} mt={4}>
<Flex alignItems='center' gap='2' textAlign={'center'}>
<FaGift size={80} />
<Text fontSize="md" textColor='#522C2C'>Refer and get 1 month free subscription</Text>
</Flex>
</Box>
</Box>
</GridItem>
<GridItem colSpan={{ base: 7, md: 5 }} h='92vh' overflowY='scroll' pb='8' overflowX='hidden' css={{ '&::-webkit-scrollbar': { display: 'none' } }}>
<Box>
<Box p='4' mt='8' borderRadius='lg' bg='white'>
<Flex alignItems='center' gap='2'>
<FaBookReader />
<Text fontSize='2xl' fontWeight='semibold'>Browse Courses</Text>
</Flex>
<Text mt='2' fontSize='sm' textColor='gray.500'>Browse through our courses and find the one that suits you</Text>
</Box>
<Grid templateColumns="repeat(3, 1fr)" gap={6} mt='4'>
{
loading ? new Array(6).fill(6).map((el, index) => <GridItem colSpan={1} key={index} >
<Box borderRadius='lg' boxShadow={'md'} bg='white'>
<Skeleton roundedTop={'lg'} h={'180px'} />
<Box p='4'>
<SkeletonText mt='2' noOfLines={1} spacing='4' />
<SkeletonText mt='2' noOfLines={1} spacing='4' />
<SkeletonText mt='2' noOfLines={1} spacing='4' />
</Box>
</Box>
</GridItem>) : data?.map((course, index) => <Link key={index} href={`/course/${course.slug}`}>
<GridItem colSpan={1}>
<Box borderRadius='lg' boxShadow={'md'} bg='white'>
<Image src={course.image} roundedTop={'lg'} />
<Box p='4'>
<Badge colorScheme={course.type === 'free' ? 'green' : 'orange'} mb='2'>
{course.type} Course
</Badge>
<Text fontSize='md' fontWeight='semibold'>{course.title?.slice(0, 25)}...</Text>
<Text mt='2' fontSize='sm' textColor='gray.500'>Learn {
course.title?.split('to')[1]?.length > 10 ? `${course.title?.split('to')[1].slice(0, 10)}... ` : course.title?.split('to')[1]
} from scratch</Text>
<Text mt='2' fontSize='sm' textColor='gray.500'>Duration: <Badge colorScheme='green' ml='2'>{
course.totalDuration
} Mins</Badge></Text>
</Box>
</Box>
</GridItem>
</Link>
)
}
</Grid>
</Box>
</GridItem>
</Grid>
</Box>
</Box>
</>
)
}
export default courses