Merge pull request #158 from techy1999/131-profile-page-is-not-lookin…

…g-good-in-mobile-device

course page added

src/App.js

@@ -15,6 +15,8 @@ import NotFoundImage from "./assets/undraw_page_not_found.svg";
 import JoinTeam from "./pages/JoinTeam";
 import PrivacyPolicy from "./pages/PrivacyPolicy";
 import TermsCondition from "./pages/TermsCondition";
+import CourseCategory from "./pages/courses/CourseCategory";
+import CourseContent from "./pages/courses/CourseContent";
 
 function App() {
   return (
@@ -26,6 +28,8 @@ function App() {
         <Route path="/blog/:id" element={<BlogDetail />} />
         <Route path="/my-blogs" element={<MyBlog />} />
         <Route path="/blog" element={<CreateBlog />} />
+        <Route path="/course" element={<CourseCategory />} />
+        <Route path="/course/:id" element={<CourseContent />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
         <Route path="/profile" element={<Profile />} />

src/components/CourseCard.jsx

@@ -0,0 +1,36 @@
+// CourseCard.js
+import React from 'react';
+import { Card, CardContent, CardMedia, Typography, Button, CardActions } from '@mui/material';
+import { Link } from "react-router-dom";
+const CourseCard = ({ course }) => {
+  return (
+    <Link to={`/course/${course.id}`}>
+    <Card sx={{ maxWidth: 345 }}>
+      <CardMedia
+        component="img"
+        height="140"
+        image={course.image}
+        alt={course.title}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          {course.title}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {course.description}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">Learn More</Button>
+      </CardActions>
+      <CardContent>
+        <Typography variant="body2" color="text.secondary">
+          Author: {course.author}
+        </Typography>
+      </CardContent>
+    </Card>
+    </Link>
+  );
+};
+
+export default CourseCard;

src/components/CourseFilter.jsx

@@ -0,0 +1,45 @@
+// CourseFilter.js
+import React from 'react';
+import { TextField, MenuItem, Box } from '@mui/material';
+
+const CourseFilter = ({ categories, filters, setFilters }) => {
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setFilters((prevFilters) => ({
+      ...prevFilters,
+      [name]: value,
+    }));
+  };
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+      <TextField
+        label="Title"
+        name="title"
+        value={filters.title}
+        onChange={handleChange}
+        variant="outlined"
+        fullWidth
+      />
+      <TextField
+        select
+        label="Category"
+        name="category"
+        value={filters.category}
+        onChange={handleChange}
+        variant="outlined"
+        fullWidth
+      >
+        <MenuItem value="">All</MenuItem>
+        {categories.map((category) => (
+          <MenuItem key={category} value={category}>
+            {category}
+          </MenuItem>
+        ))}
+      </TextField>
+
+    </Box>
+  );
+};
+
+export default CourseFilter;

src/components/CourseSiderBar.jsx

@@ -0,0 +1,27 @@
+// Sidebar.js
+import React from 'react';
+import { Drawer, List, ListItem, ListItemText, Divider } from '@mui/material';
+
+const Sidebar = ({ menuItems }) => {
+  return (
+    <Drawer
+      variant="permanent"
+      sx={{
+        width: 240,
+        flexShrink: 0,
+        [`& .MuiDrawer-paper`]: { width: 240, boxSizing: 'border-box' },
+      }}
+    >
+      <List>
+        {menuItems.map((item, index) => (
+          <ListItem button key={index}>
+            <ListItemText primary={item} />
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+    </Drawer>
+  );
+};
+
+export default Sidebar;

src/components/Header.jsx

@@ -97,6 +97,7 @@ const Header = () => {
                 <Tabs textColor="white" value={value}>
                   <Tab label="Home" LinkComponent={Link} to="/" />
                   <Tab label="Blogs" LinkComponent={Link} to="/blogs" />
+                  <Tab label="Courses" LinkComponent={Link} to="/course" />
                   {isLogin && (
                     <>
                       <Tab

src/components/common/CustomizedAccordions.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
+import MuiAccordionSummary, { AccordionSummaryProps } from '@mui/material/AccordionSummary';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+
+const Accordion = styled((props) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  '&:not(:last-child)': {
+    borderBottom: 0,
+  },
+  '&::before': {
+    display: 'none',
+  },
+}));
+
+const AccordionSummary = styled((props) => (
+  <MuiAccordionSummary
+    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, .05)'
+      : 'rgba(0, 0, 0, .03)',
+  flexDirection: 'row-reverse',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(90deg)',
+  },
+  '& .MuiAccordionSummary-content': {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+  borderTop: '1px solid rgba(0, 0, 0, .125)',
+}));
+
+export { Accordion, AccordionSummary, AccordionDetails };

src/pages/Blog.jsx

@@ -45,6 +45,7 @@ const Blog = () => {
           }`,
         );
         if (data.data?.data) {
+          console.log('data 1223 ',data);
           setBlogs(data?.data?.data);
           setTotalPageNumber(data?.data?.totalPages);
         }

src/pages/courses/CourseContent.jsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { Accordion, AccordionSummary, AccordionDetails } from '../../components/common/CustomizedAccordions'; // Adjust the path as needed
+import { Typography, Button, TextField, List, ListItem, ListItemText, Divider, Box } from '@mui/material';
+
+const CourseContent = () => {
+  const [selectedLesson, setSelectedLesson] = useState(null);
+  const [comments, setComments] = useState({});
+  const [currentComment, setCurrentComment] = useState('');
+
+  const lessons = [
+    { id: 1, title: 'Lesson 1', videoUrl: 'https://www.taxmann.com/emailer/images/CompaniesAct.mp4', description: 'C++ variable and function definition1' },
+    { id: 2, title: 'Lesson 2', videoUrl: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4', description: 'Construction function and its uses' },
+    { id: 3, title: 'Lesson 3', videoUrl: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', description: 'Writing simple code and editor setup' },
+    { id: 4, title: 'Lesson 4', videoUrl: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4', description: 'DSA use case in cpp' },
+    { id: 5, title: 'Lesson 5', videoUrl: 'https://www.taxmann.com/emailer/images/FEMA.mp4', description: 'Error handling ' },
+    { id: 6, title: 'Lesson 6', videoUrl: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4', description: 'Object orient stle of coding' },
+    { id: 7, title: 'Lesson 7', videoUrl: 'https://www.taxmann.com/emailer/images/FEMA.mp4', description: 'Writing class based methods and other properties.' },
+    // Add more lessons as needed
+  ];
+
+  const handleLessonClick = (lesson) => {
+    setSelectedLesson(lesson);
+  };
+
+  const handleCommentSubmit = () => {
+    if (currentComment) {
+      setComments({
+        ...comments,
+        [selectedLesson.id]: [...(comments[selectedLesson.id] || []), currentComment]
+      });
+      setCurrentComment('');
+    }
+  };
+
+  return (
+    <Box margin={2}> {/* Outer Box for spacing */}
+      <Box display="flex" className="container">
+        <Box width="300px" mr={2}> {/* Added right margin */}
+          <Typography variant="h6" gutterBottom>Lessons</Typography>
+          {lessons.map((lesson) => (
+            <Accordion key={lesson.id} onChange={() => handleLessonClick(lesson)}>
+              <AccordionSummary>
+                <Typography>{lesson.title}</Typography>
+              </AccordionSummary>
+              <AccordionDetails>
+                <Typography>{lesson.description}</Typography>
+              </AccordionDetails>
+            </Accordion>
+          ))}
+        </Box>
+
+        <Box flex={1} padding={2}>
+          {selectedLesson ? (
+            <Box>
+              <Typography variant="h4" gutterBottom>{selectedLesson.title}</Typography>
+              <video width="100%" controls>
+                <source src={selectedLesson.videoUrl} type="video/mp4" />
+                Your browser does not support the video tag.
+              </video>
+              <Typography variant="body1" gutterBottom>{selectedLesson.description}</Typography>
+              <Button variant="contained" color="primary" href={selectedLesson.videoUrl} target="_blank" style={{ marginBottom: '20px' }}>
+                Source File
+              </Button>
+              <Typography variant="h6">Comments</Typography>
+              <List>
+                {(comments[selectedLesson.id] || []).map((comment, index) => (
+                  <React.Fragment key={index}>
+                    <ListItem>
+                      <ListItemText primary={comment} />
+                    </ListItem>
+                    <Divider />
+                  </React.Fragment>
+                ))}
+              </List>
+              <TextField
+                label="Add a comment"
+                fullWidth
+                value={currentComment}
+                onChange={(e) => setCurrentComment(e.target.value)}
+                variant="outlined"
+                style={{ marginBottom: '20px' }}
+              />
+              <Button variant="contained" color="primary" onClick={handleCommentSubmit}>
+                Submit
+              </Button>
+            </Box>
+          ) : (
+            <Typography variant="h5">Select a lesson to view the content</Typography>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default CourseContent;

src/pages/courses/courseCategory.jsx

@@ -1,9 +1,51 @@
-// The page for showing the category like 
-// C++
-// Python
-// Javascript
-// MERN
-// Database
-// MongodbDB
-// ....
+// CourseCategory.js
+import React, { useState } from 'react';
+import { CssBaseline, Box, Container, Grid } from '@mui/material';
+import CourseCard from '../../components/CourseCard';
+import CourseFilter from '../../components/CourseFilter';
 
+const COURSES_CATEGORY_LIST = [
+  {id:1, image: "https://w7.pngwing.com/pngs/46/626/png-transparent-c-logo-the-c-programming-language-computer-icons-computer-programming-source-code-programming-miscellaneous-template-blue.png", title: "C++ for beginner", description: "This is basic beginner course for the user to use it.", date: "04/07/2024", author: "sudhanshu", category: "C++" },
+  {id:2, image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-d6UfUk2wXOKauTqOgL8Usfnc9i7eNBD8_Q&s", title: "Python for beginner", description: "This is basic beginner course for the user to use it.", author: "Ramauli", category: "Python", date: "03/03/2024" },
+  {id:3, image: "https://www.simplilearn.com/ice9/free_resources_article_thumb/Blockchain_tutorial.jpg", description: "This is basic beginner course to learn about different concept in blockchain creating contract and interacting with contract.", title: "Blockchain for beginner", author: "John de cappa", date: "01/06/2024", category: "C++" },
+  {id:4, image: "https://miro.medium.com/v2/resize:fit:1400/1*BQZAbczBfLYtPp-6HmN0ZQ.jpeg", description: "This is basic beginner course for deep into nextjs concepts..", title: "Nextjs for beginner", author: "Devid lamma", date: "04/03/2024", category: "Next.js" },
+];
+
+const CourseCategory = () => {
+  const [filters, setFilters] = useState({
+    title: '',
+    category: '',
+  });
+
+  const categories = Array.from(new Set(COURSES_CATEGORY_LIST.map(course => course.category)));
+
+  const filteredCourses = COURSES_CATEGORY_LIST.filter((course) => {
+    return (
+      (filters.title === '' || course.title.toLowerCase().includes(filters.title.toLowerCase())) &&
+      (filters.category === '' || course.category === filters.category) 
+    );
+  });
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <CssBaseline />
+
+      <Container sx={{ mt: 2, ml: 32 }}>
+        <CourseFilter
+          categories={categories}
+          filters={filters}
+          setFilters={setFilters}
+        />
+        <Grid container spacing={3}>
+          {filteredCourses.map((course, index) => (
+            <Grid item xs={12} sm={6} md={4} key={index}>
+              <CourseCard course={course} />
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </Box>
+  );
+};
+
+export default CourseCategory;