Blogpage addded

debug.log

@@ -0,0 +1 @@
+[1026/202933.328:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

src/App.js

@@ -1,10 +1,11 @@
 import React from "react";
-import './App.css';
-import SignInSide from "./Components/login/logIn";  // Login Page Component
-import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
+import "./App.css";
+import SignInSide from "./Components/login/logIn"; // Login Page Component
+import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
 import Main from "./main";
 import HomepageMain from "./Homepage/HomepageMain/Mainhome";
 import Doctormainpage from "./HomepageSubparts/Doctors/doctorsmainpage";
+import Post from "./containers/Post";
 
 // import Footer from "../src/Components/Footer";
 // import Navbar from "../src/Components/Navbar/Navbar";
@@ -15,14 +16,13 @@ import Doctormainpage from "./HomepageSubparts/Doctors/doctorsmainpage";
 
 function App() {
  return (
-
  <div>
- <Route exact path='/' component={Main}></Route>
- <Route path='/signup' component={SignInSide}></Route>
- <Route path='/homepage' component={HomepageMain}></Route>
- <Route path='/expertdoctors' component={Doctormainpage}></Route>
-
- {/* <div className="forNavbar">
+ <Route exact path="/" component={Main}></Route>
+ <Route path="/signup" component={SignInSide}></Route>
+ <Route path="/homepage" component={HomepageMain}></Route>
+ <Route path="/expertdoctors" component={Doctormainpage}></Route>
+ <Route path="/post/:postId" component={Post} />
+  {/* <div className="forNavbar">
  <Navbar></Navbar>
  <img className="image" src={background} alt="background-image" />
  </div>
@@ -32,11 +32,11 @@ function App() {
  <br></br>
  </div> */}
 
- {/* <div>
+  {/* <div>
  <SignInSide></SignInSide>
  </div> */}
 
- {/* <div className="page-container">
+  {/* <div className="page-container">
  <div className="content-wrap"></div>
  <div className="Footer-img" style={{backgroundImage: `url(${Img})`}}>
  <div className="Footer-img-content">
@@ -48,10 +48,7 @@ function App() {
  </div>
  <Footer />
  </div> */}
-
  </div>
-
-
  );
 }
 export default App;

src/Components/Blogpost/Sidebar/index.js

@@ -0,0 +1,50 @@
+import React, {useState, useEffect} from "react";
+import Card from "../UI/Card";
+import "./style.css";
+import blogPost from "../data/blogdata.json";
+import {NavLink} from "react-router-dom";
+
+const Sidebar = (props) => {
+ const [posts, setPosts] = useState([]);
+
+ useEffect(() => {
+ const posts = blogPost.data;
+ setPosts(posts);
+ }, [posts]);
+
+ return (
+ <div
+ className="sidebarContainer"
+ style={{
+ width: props.width,
+ }}
+ >
+ <Card
+ style={{marginBottom: "20px", padding: "15px", boxSizing: "border-box"}}
+ >
+ <div className="cardHeader">
+ <h2>Recent Posts</h2>
+ </div>
+
+ <div className="posts">
+ {posts.map((post) => {
+ return (
+ <NavLink key={post.id} to={`/post/${post.id}`}>
+ <div className="post">
+ <h3>{post.blogTitle}</h3>
+ <img
+ className="cardImg"
+ alt="Post Image"
+ src={require("../../images/" + post.blogImage)}
+ />
+ </div>
+ </NavLink>
+ );
+ })}
+ </div>
+ </Card>
+ </div>
+ );
+};
+
+export default Sidebar;

src/Components/Blogpost/Sidebar/style.css

@@ -0,0 +1,79 @@
+.sidebarContainer {
+ width: 27%;
+ padding-right: 3rem;
+ padding-top: 7rem;
+}
+
+.cardHeader {
+ text-transform: capitalize;
+ font-size: 25px;
+ text-align: center;
+ padding: 10px 0;
+ box-sizing: border-box;
+ letter-spacing: 2px;
+ color: #333;
+}
+
+.HarryContainer {
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.HarryContainer img {
+ max-width: 100%;
+ max-height: 100%;
+}
+
+.personalBio {
+ font-size: 14px;
+ color: #565673;
+ font-weight: 350;
+}
+
+.posts {
+ padding: 10px 0;
+ padding-bottom: 1.5rem;
+}
+
+.post {
+ border-bottom: 1px solid #eee;
+ font-size: 20px;
+ margin: 5px;
+ padding-bottom: 5px;
+ padding-top: 1rem;
+}
+
+.posts a {
+ text-decoration: none;
+}
+
+.post h3 {
+ font-size: 15px;
+ letter-spacing: 1px;
+ color: #6c6c6c;
+ font-weight: 500;
+ margin: 0;
+}
+
+.post h3:hover {
+ color: #5f9ea0;
+}
+
+.post span {
+ font-size: 10px;
+ font-weight: 400;
+ color: #6c6c6c;
+}
+.icon {
+ height: 40px;
+ width: 40px;
+ padding-right: 15px;
+ padding-top: 20px;
+}
+.cardImg {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ position: flex;
+ width: 100%;
+ height: 50%;
+}

src/Components/Blogpost/UI/Card/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./style.css";
+
+const Card = (props) => {
+ return (
+ <div className="cards" style="width: 18rem;" {...props}>
+ {props.children}
+ </div>
+ );
+};
+
+export default Card;

src/Components/Blogpost/UI/Card/style.css

@@ -0,0 +1,5 @@
+.cards {
+ background: white;
+ width: 100%;
+ border-radius: 10px;
+}

src/Components/Blogpost/data/blogdata.json

@@ -0,0 +1,47 @@
+{
+ "data":[
+ {
+ "id":1,
+ "blogTitle": "How Staying Organized Helps Me Feel Less Anxious",
+ "author":" TJ DeSalvo",
+ "date":"OCTOBER 21, 2020",
+ "blogImage": "annacover.jpeg",
+ "blogContent": "Why Anxiety Won't Completely Go Away To some extent, anxiety is part of the human experience (the human brain thinks and experiences emotions, and this isn't a bad thing). Anxiety has positive functions. It helps protect us from danger by making us alert and cautious. It also can be motivating, helping us do our best. If we're lethargic and unmotivated, not caring about what happens to us or our loved ones, we likely won't be very successful in our lives and relationships. A bit of anxiety can indeed help keep us on our toes, striving for personal goals. This bit of motivating anxiety is healthy, and it's here to stay. We don't want healthy anxiety to go away. It's the unhealthy anxiety, the extreme worries, what-ifs, worst-case-scenarios, fears, and automatic negative thoughts that disrupt life. Of course we all want that stuff gone, out of our lives. Will this type go away Because we have such incredible, complex, and active brains, anxious thoughts and worries don't completely stop. (Keep reading, though, because the news gets much, much better). Personally, I have lived with pretty strong social anxiety and performance-related anxiety, but they no longer interfere in my life. Admittedly, I do continue to experience my old, habitual anxious thoughts, such as: Worrying if I say or do the right things, and concluding (temporarily) that I do not, in fact, say or do the right thingI have been this way for what seems like my entire life: when I feel stressed out about something, I organize. And when I say organize, I mean that in a pretty far-reaching way: organizing to me means not only organizing, but also cleaning, downsizing, basically anything that falls under the umbrella of getting my affairs in order. I don’t know how common this is among others. But I would like to at least try to explain why staying organized is so helpful to me.Why Staying Organized Alleviates Anxiety and Brings Peace"
+
+ },
+ {
+ "id":2,
+ "blogTitle": "6 Mindful Tips to Deal with Anxiety's Effects on Your Life",
+ "author":" Tanya J. Peterson, MS, NCC",
+ "date":"OCTOBER 15, 2020",
+ "blogImage": "b2.jpg",
+ "blogContent":"Anxiety's effects on your life can be brutal, interfering with what you want to do, who you want to be with, and how you want to be. A previous post explored six ways anxiety messes with your life. Here, we'll revisit those nasty effects of anxiety, and I offer six mindfulness-based tips to effectively deal with them. You can implement these mindfulness tips immediately--they don't need extra tools or preparation--so you can reduce anxiety's effects on yourself and your life.Why Mindful Tips Reduce the Effects of AnxietyWhy do mindfulness tips reduce the effects of anxiety? Well, the ultimate repercussion of anxiety is that it takes over your thoughts and feelings. It can dictate your behavior. Anxiety tries to live your life for you, making you both its unwilling puppet and audience to the puppet show it creates. Its show is set in your past, and your future, and the stars are automatic negative thoughts, rumination, worry, fear, what-ifs, and worst-case scenarios. If you've had enough, take heart. No matter how many locks and strings anxiety has used to keep you out of your own life and stuck in its puppet show, you can use mindfulness to break free and live freely.Mindfulness is the act of showing up fully for your life despite problems, stress, anxiety, and other disruptive challenges. To do this, you choose to live in your present moment. When your mind wanders to worries about things that have already happened or about what might happen in the future, you simply notice that you're in anxiety's puppet theatre and use your senses to focus on something tangible in the here-and-now.These mindfulness tips are simple in concept but can be challenging to sustain in practice. Thankfully, there are practical things you can do to develop this skill and way of being in your life. The following six tips for reducing the effects of anxiety come to us from mindfulness. They'll help you stay present and engaged in each moment of your life, thus cutting you loose from anxiety's puppet show with no strings attached."
+ },
+ {
+ "id":3,
+ "blogTitle": "Stay Calm Despite Anxiety with 4 Brain-Body Health Tips",
+ "author":" Tanya J. Peterson, MS, NCC",
+ "date":"OCTOBER 14, 2020",
+ "blogImage": "b3.jpg",
+ "blogContent":"Tending to our physical health is one way to boost our long-term mental health. When we nurture our brain and body, we give them what they need to operate optimally. When the body is healthy, we are better able to deal with anxious thoughts and emotions. These four health tips, when followed consistently over time, can keep your system running smoothly and evenly so you can stay calm despite anxiety.Stay hydrated -- Even mild dehydration can negatively impact your mental health. The brain needs water to function. An easy way to ensure you're drinking enough is to carry a water bottle with you and sip water throughout the day. Refill it as you go to ensure you're drinking about 64 ounces of water each day (the amount you personally need depends on your size and how physically active you are).Stay nutritious -- What we eat matters because foods affect anxiety, either exacerbating it or calming it. Eat a diet rich in protein, complex carbohydrates, healthy fats, fruits, vegetables, nuts, and seeds to boost your mood and keep your brain functioning properly.Stay oxygenated -- Breathe. Taking slow, deep breathes bathes the brain in much-needed oxygen, calms the sympathetic nervous system (the fight-or-flight response), and activates the parasympathetic nervous system (the rest-and-digest response). When you catch yourself feeling stressed and anxious, pause for some mindful breathing. Also, develop the habit of breathing slowly and deeply on a regular basis to keep the brain balanced and calm.Stay in motion -- Exercise offers numerous physical and mental health benefits, including reducing anxiety. Exercise involves a wide variety of physical activities, and it doesn't have to involve doing things you hate. Choose something you enjoy doing, and do it regularly to stay mentally and physically healthy. Know, though, that it's important to balance exercise and rest, and it's also healthy to relax and unwind quietly. Stay in motion simply means to be active on a regular basis. "
+ },
+ {
+ "id":4,
+ "blogTitle": "Deal with Anxiety at Work or School: Be a SCUBA Diver",
+ "author":" Tanya J. Peterson, MS, NCC",
+ "date":"OCTOBER 1, 2020",
+ "blogImage": "b4.jpg",
+ "blogContent":"Anxiety can make work or school difficult. A strong sense of perfectionism can make starting and completing tasks daunting, sometimes leading to incomplete work and missed deadlines. Fears about presentations can make life miserable. Even worries about sitting in a quiet room where others can see or hear you or stressful situations with coworkers or classmates can cause anxiety symptoms to skyrocket. The effects of work or school anxiety can make every day miserable or even keep you at home in avoidance. One approach to deal with this is to become a SCUBA diver.Why SCUBA Diving Relates to School and Work Anxiety.It's true. You can improve anxiety at work or school by being like a SCUBA diver (I do mean that figuratively, of course.). This is why I chose SCUBA diving as an activity to model yourself after rather than any other activity: SCUBA diving involves immersing oneself into deep water and moving about among strange things in that water--but SCUBA divers don't have to know how to swim. Men, women, and kids who dive must know how to move about and use diving equipment, but they don't need to be strong swimmers to survive and have fun in the water.Like a SCUBA diver, you can dive into the work or school experience (or any other life experience, for that matter) before waiting until you know how to swim. You can thrive before your anxiety is gone. You don't have to wait to embrace school or work until you know how to function without anxiety.How to Dive into School or Work Before Anxiety is Gone.Like a SCUBA diver, you need equipment, tools, to be able to move freely in your environment. Your tools are your knowledge, skills, and techniques you're learning all the time. For example, you might be building mindfulness skills to help you stay calm and focused on the present moment or learning techniques of cognitive behavioral therapy to help you change anxious thoughts. With these tools, you are learning how to swim, but you don't have to master anything before you can dive fully into your life. Keep working with what you know and adding new techniques and information to help you reduce your anxiety, but you don't have to put your life on hold while you're learning.Also, like a diver, have a purpose and a plan. Divers do what they do for a reason, whether it's to explore in general, study something specific, or simply to relax and have fun. They also know where they're going. You, too, have a purpose for going to school or work, and you have goals to help you know where you're going. Often, though, our sense of purpose and our goals get buried and lost under the heavy weight of anxiety. The sense that you don't know how to swim can take over, and your purpose and goals can sink to the depths of the sea. Once you're aware of this, you can prevent that from happening."
+ },
+ {
+ "id":5,
+ "blogTitle": "Trying to Do Too Many Things at One Time",
+ "author":" TJ DeSalvo",
+ "date":"SEPTEMBER 23, 2020",
+ "blogImage": "b5.jpg",
+ "blogContent":"I’m the kind of person that has a lot of hobbies. As such, I’m constantly coming up with ideas for creative projects related to those hobbies. The amount that I’ve been able to devote to those projects because of my anxiety, however, is nowhere near what I sometimes envision it to be. Oftentimes I am guilty of trying to do too many things at one time, and I need to be better about that.Anxiety Worsens When Trying to Do Too Many Things at One Time.One of the ways my anxiety works is I am often unable to do a lot of things at one time. Furthermore, if I do a lot, I’ll need to take frequent breaks to help my mind relax. I’ve always been this way, and I don’t see that ever-changing.This isn’t bad in and of itself. What makes it bad is how I will sometimes respond to it. I’ll often feel like there isn’t enough time in the day to do all the things I want to do, and because of that, I’ll push myself to do more that would normally do. This only lasts for a short time, as after a while, I will hit a wall and just have to stop completely. This isn’t a good way to treat myself – it’s as though I’m using a worn-out machine well past its breaking point, knowing that it’ll fall apart at any second, but ignoring the warning signs because I just want to.This has the counterproductive effect of making me dislike whatever it is that I’m doing. If, for instance, I’m trying to get a bunch of reading done to research something for a project, I’ll hit that wall and end up feeling negative about whatever it is I’m reading about. Sometimes this bleeds over and makes me feel negative about the very act of reading itself. As someone who loves reading, this is tragic, but it’s a mistake I seem to keep making.How to Be Okay with Not Doing a Lot.I know I’m not the only person who tries to do too many things at one time. So I want to try and give advice so this doesn’t happen. It isn’t fun, and it causes you to look negatively on things you may genuinely love. I wouldn’t wish that on anyone.The most important thing to remember is that your wellbeing is the most important thing. If it takes cutting out all but the essentials so that you feel alright, then let it be done. Nothing is worse than driving yourself to overload. There is never a good reason for that.It sounds silly, but following your heart is the best way to handle such situations. Devote your time only to what your heart tells you it wants to do. That will make you happy and will make you feel the most satisfied and productive when the day ends. If you don’t end up getting around to a lot of other things, forget about it. There will always be more time. You should always come first when it comes to your mental health."
+ }
+
+ ]
+
+}

src/Components/Blogpost/index.js

@@ -0,0 +1,54 @@
+import React, {useState, useEffect} from "react";
+import Card from "./UI/Card";
+import "./style.css";
+import blogPost from "./data/blogdata.json";
+
+const Blogpost = (props) => {
+ console.log(props);
+ const [post, setPost] = useState({
+ id: "",
+ blogTitle: "",
+ blogCategory: "",
+ blogImage: "",
+ });
+ const [postId, setPostId] = useState("");
+
+ useEffect(() => {
+ const postId = props.match.params.postId;
+ const post = blogPost.data.find((post) => post.id == postId);
+ setPost(post);
+ setPostId(postId);
+ }, [post, props.match.params.postId]);
+
+ if (post.blogImage == "") return null;
+
+ return (
+ <div className="blogPostContainer">
+ <Card style={{padding: "15px", boxSizing: "border-box"}}>
+ <div className="blogHeader">
+ <h1 className="postTitle">{post.blogTitle}</h1>
+ </div>
+
+ <div className="blogAuthor">
+ <h3>Author -{post.author}</h3>
+ </div>
+
+ <div className="postImageContainer">
+ <img
+ classname="postimage"
+ alt="Post Image"
+ src={require("../images/" + post.blogImage)}
+ />
+ </div>
+
+ <div className="postContent">
+ <h3>{post.postTitle}</h3>
+
+ <p>{post.blogContent}</p>
+ </div>
+ </Card>
+ </div>
+ );
+};
+
+export default Blogpost;

src/Components/Blogpost/style.css

@@ -0,0 +1,61 @@
+.blogPostContainer {
+ width: 70%;
+ padding-left: 3rem;
+ padding-top: 7rem;
+}
+
+.blogHeader {
+ text-align: center;
+ padding-bottom: 0.5rem;
+}
+
+.postTitle {
+ letter-spacing: 0.5px;
+ text-transform: capitalize;
+ font-size: 55px;
+ margin: 0;
+ font-weight: 400;
+ color: black;
+ padding-bottom: 2rem;
+}
+.blogCategory {
+ display: block;
+ padding: 10px;
+ font-size: 14px;
+}
+
+.postBy {
+ font-size: 15px;
+ font-style: italic;
+ padding: 10px;
+ display: block;
+ color: rgb(238, 191, 104);
+}
+.postImageContainer {
+ width: 100%;
+ padding: 10px;
+ box-sizing: border-box;
+}
+.postImageContainer img {
+ width: 100%;
+ height: 100%;
+}
+.postContent {
+ margin: 10px;
+}
+.postContent h3 {
+ font-weight: 300;
+ color: #333;
+}
+.postContent p {
+ font-size: 17px;
+ color: #6c6c6c;
+ font-weight: 300;
+ padding-bottom: 20px;
+ letter-spacing: 0.5px;
+}
+.blogAuthor {
+ padding-left: 1rem;
+ font-size: 20px;
+ position: relative;
+}