Feature/implement category wise blogs

client/src/components/Category.css

@@ -0,0 +1,70 @@
+.categories2{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 1.5rem;
+    font-size: 1.2rem;
+    background-color: white;
+    padding: 0.6rem 0.6rem;
+    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+    height: 5.5rem;
+    border-radius: 0.5rem;
+    position: relative;
+    overflow-x: scroll;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    width: 90%;
+}
+.cname{
+    margin-left: 0.3rem;
+    text-decoration: none;
+    color: #000;
+}
+.filter{
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f5f4fd;
+    padding: 0.5rem 0.5rem;
+    border-radius: 30px;
+    border: 1px solid #d8d4f2;
+    color: #000;
+    cursor: pointer;
+    width: fit-content;
+}
+/* .filter:hover{
+    background-color: #efedfb;
+} */
+.filter:active{
+    background-color: rgb(4, 4, 162);;
+    border-color: transparent;
+    color: #fff;
+}
+.selected{
+    background-color: rgb(4, 4, 162);;
+    border-color: transparent;
+    color: #fff;
+}
+.filter:active .cname{
+    color: #fff;
+}
+.selected .cname{
+    color: #fff;
+}
+.filters{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2rem;
+    height: 5.8rem;
+    gap: 1rem;
+}
+.btn{
+    border: none;
+    border-radius: 50%;
+    background-color:  #efedfb;
+}
+.btn:hover{
+    background-color: #d8d4f2 ;
+}

client/src/components/Category.jsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef, useState } from 'react'
+import "./Category.css"
+import ConnectingAirportsIcon from '@mui/icons-material/ConnectingAirports';
+import DiamondIcon from '@mui/icons-material/Diamond';
+import HealthAndSafetyIcon from '@mui/icons-material/HealthAndSafety';
+import PrecisionManufacturingIcon from '@mui/icons-material/PrecisionManufacturing';
+import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
+import BookIcon from '@mui/icons-material/Book';
+import InterestsIcon from '@mui/icons-material/Interests';
+import AgricultureIcon from '@mui/icons-material/Agriculture';
+import FactoryIcon from '@mui/icons-material/Factory';
+import HistoryIcon from '@mui/icons-material/History';
+import ColorLensIcon from '@mui/icons-material/ColorLens';
+import OtherHousesIcon from '@mui/icons-material/OtherHouses';
+import LanguageIcon from '@mui/icons-material/Language';
+import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import ShowChartIcon from '@mui/icons-material/ShowChart';
+import WhatshotIcon from '@mui/icons-material/Whatshot';
+import { useNavigate } from 'react-router-dom';
+let ITEM_WIDTH=250;
+
+function Category({onCategoryChange}) {
+    const [scrollPosition,setScrollPosition]=useState(0);
+    const containerRef=useRef();
+    const navigate = useNavigate();
+    const [selectedCategory, setSelectedCategory] = useState(null);
+
+  const handleCategoryClick = (category) => {
+    setSelectedCategory(category);
+    onCategoryChange(category);
+};
+
+
+
+
+    const handleScroll=(scrollAmount)=>{
+        let newScrollPosition=scrollPosition+scrollAmount;
+        setScrollPosition(newScrollPosition);
+        containerRef.current.scrollLeft =newScrollPosition;
+    }
+    const categories = [
+        { name: 'All', displayName: 'Home', icon: <LanguageIcon /> },
+        { name: 'Travel', displayName: 'Travel', icon: <ConnectingAirportsIcon /> },
+        { name: 'Fashion', displayName: 'Fashion', icon: <DiamondIcon /> },
+        { name: 'Health', displayName: 'Health', icon: <HealthAndSafetyIcon /> },
+        { name: 'Education', displayName: 'Education', icon: <BookIcon /> },
+        { name: 'Tech', displayName: 'Tech', icon: <PrecisionManufacturingIcon /> },
+        { name: 'Art', displayName: 'Art', icon: <ColorLensIcon /> },
+        { name: 'Agriculture', displayName: 'Agriculture', icon: <AgricultureIcon /> },
+        { name: 'Industry', displayName: 'Industry', icon: <FactoryIcon /> },
+        { name: 'Society', displayName: 'Society', icon: <InterestsIcon /> },
+        { name: 'Marketing', displayName: 'Marketing', icon: <ShowChartIcon /> },
+        { name: 'History', displayName: 'History', icon: <HistoryIcon /> },
+        { name: 'Quotes', displayName: 'Quotes', icon: <FormatQuoteIcon /> },
+        { name: 'Others', displayName: 'Others', icon: <OtherHousesIcon /> },
+    ];
+    return (
+        <>
+        <div className='filters' >
+        <button className="btn" onClick={()=>{handleScroll(-ITEM_WIDTH)}}> <ArrowLeftIcon /></button>
+        <div className='categories2' ref={containerRef}>
+            {categories.map((category) => (
+                <div
+                key={category.name}
+                className={`filter ${selectedCategory === category.name ? 'selected' : ''}`}
+                onClick={() => handleCategoryClick(category.name)} 
+                >
+                {category.icon}
+                <a className='cname' >{category.displayName}</a>
+                </div>
+            ))}
+                </div>
+
+        <button className='btn' onClick={()=>{handleScroll(ITEM_WIDTH)}}><ArrowRightIcon/></button>
+        </div>
+
+        </>
+    )
+}
+
+export default Category

client/src/components/CreatePost.css

@@ -31,4 +31,8 @@ form {
 .create:hover{
     color: white;
     background-color: black;
+}
+.category{
+    width:30rem;
+    margin:1vw 2.6vw;
 }

client/src/components/CreatePost.jsx

@@ -4,6 +4,7 @@ import "./CreatePost.css";
 import { Box } from "@mui/material";
 import CreateIcon from "@mui/icons-material/Create";
 import { useState } from "react";
+import Form from 'react-bootstrap/Form';
 import axios from "axios";
 function CreatePost(props) {
   const navigate = useNavigate();
@@ -13,6 +14,7 @@ function CreatePost(props) {
     title: "",
     image: "",
     content: "",
+    category:""
   });
   function change(event) {
     const { name, value } = event.target;
@@ -24,7 +26,8 @@ function CreatePost(props) {
         ? { ...prevValue, title: value }
         : name === "image"
         ? { ...prevValue, image: event.target.files[0].name }
-        : { ...prevValue, content: value };
+        : name === "content"? { ...prevValue, content: value }:
+        { ...prevValue, category: value };
     });
   }
   function save(post) {
@@ -33,7 +36,7 @@ function CreatePost(props) {
     axios
       .post(
         `${import.meta.env.VITE_REACT_APP_SERVER_URL}` + "/success",
-        { title: post.title, content: post.content, image: file },
+        { title: post.title, content: post.content, image: file, category: post.category.toString() },
         {
           headers: {
             "Content-Type": "multipart/form-data",
@@ -48,6 +51,7 @@ function CreatePost(props) {
             title: "",
             image: "",
             content: "",
+            category:""
           });
           navigate("/dashboard");
         }
@@ -87,13 +91,32 @@ function CreatePost(props) {
             column="50"
             value={post.content}
           ></textarea>
+          <div className="mb-3 category">
+                <select className="form-select form-control" name="category" value={post.category.toString()} onChange={change} required >
+                    <option >Category</option>
+                    <option value="Fashion">Fashion</option>
+                    <option value="Travel">Travel</option>
+                    <option value="Health">Health</option>
+                    <option value="Agriculture">Agriculture</option>
+                    <option value="Industry">Industry</option>
+                    <option value="Society">Society</option>
+                    <option value="Marketing">Marketing</option>
+                    <option value="History">History</option>
+                    <option value="Art">Art</option>
+                    <option value="Tech">Tech</option>
+                    <option value="Quotes">Quotes</option>
+                    <option value="Education">Education</option>
+                    <option value="Others">Others</option>
+                  </select>
+            </div>
           <input
             id="file"
             onChange={change}
             type="file"
             name="image"
             placeholder="Enter your image"
           />
+
           {isSaving ? (
             <h2>Saving...</h2>
           ) : (

client/src/components/Navbar.jsx

@@ -60,25 +60,13 @@ export default function ButtonAppBar(props) {
             Trending
             <TrendingUpIcon fontSize="large" />
           </Typography>
-          <Typography
-            variant="h5"
-            component="div"
-            sx={{ flexGrow: 1 }}
-            onClick={() => {
-              navigate("/new");
-            }}
-          >
-            New
-            <HistoryIcon fontSize="large" />
-          </Typography>
           <button
             className="createButton"
             onClick={() => {
-              navigate("/createpost");
+              navigate("/new");
             }}
           >
-            Create Blog
-            <AddIcon />
+            Explore Blogs
           </button>
           <button className="logoutButton" onClick={props.logout}>
             Logout

client/src/components/Navbar2.jsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import { Avatar } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useState, useEffect } from "react";
+import axios from "axios";
+import "./Navbar.css";
+import TrendingUpIcon from "@mui/icons-material/TrendingUp";
+import HistoryIcon from "@mui/icons-material/History";
+export default function ButtonAppBar(props) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [image, setImage] = useState("");
+  useEffect(() => {
+    const fetchData = async function () {
+      axios
+        .get(`${import.meta.env.VITE_REACT_APP_SERVER_URL}` + "/success", {
+          withCredentials: "include",
+        })
+        .then((res) => {
+          setImage(res.data.img);
+        });
+    };
+    fetchData();
+  }, []);
+  return (
+    <Box sx={{ flexGrow: 1 }} margin={2}>
+      <AppBar
+        position="static"
+        style={{
+          backgroundColor: "white",
+          color: "black",
+          fontWeight: "bolder",
+        }}
+      >
+        <Toolbar>
+          <Typography
+            variant="h4"
+            component="div"
+            sx={{ flexGrow: 1 }}
+            onClick={() => {
+              navigate("/");
+            }}
+          >
+            <img height={"45rem"} width={"45rem"} src="images/blog2.png" alt="icon"></img>
+            <span className="title">BlogScape</span>
+          </Typography>
+          <Typography
+            variant="h5"
+            component="div"
+            sx={{ flexGrow: 1 }}
+            onClick={() => {
+              navigate("/trending");
+            }}
+          >
+            Trending
+            <TrendingUpIcon fontSize="large" />
+          </Typography>
+          <button
+            className="createButton"
+            onClick={() => {
+              navigate("/createpost");
+            }}
+          >
+            Create Blogs <AddIcon/>
+          </button>
+          <button className="logoutButton" onClick={props.logout}>
+            Logout
+          </button>
+          <Avatar sx={{ width: 48, height: 48 }}>
+            <img
+              onClick={() => {
+                navigate("/dashboard");
+              }}
+              src={image}
+              alt="Profile"
+            />
+          </Avatar>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+}

client/src/components/New.css

@@ -10,4 +10,11 @@
     margin-right: auto;
     border-top: 3px groove black;
     opacity: 50;
+}
+.nocategory{
+    position: relative;
+    left: 40vw;
+    top: 20vh;
+    font-size: 30px;
+    font-weight: 500;
 }