Cardcomponent

src/App.js

@@ -67,7 +67,7 @@ const App = () => {
   const DocumentBody = styled.div`
     display: flex;
     flex-direction: row;
-    height: 100vh;
+    height: auto;
   `;
 
   return (

src/components/Heading1.js

@@ -1,14 +1,15 @@
 import React from 'react'
 import styled from 'styled-components'
 
-const Heading = styled.h1`
-  color: ${(props) => props.theme.headingBlue};
-`;
 
-const Heading1 = ({content}) => 
-        <Heading>
+const Heading1 = ({content, mgL}) => 
+        <Heading mgL={mgL}>
             {content}
         </Heading>
 
-
 export default Heading1
+
+const Heading = styled.h1`
+  color: ${(props) => props.theme.headingBlue};
+  margin-left: ${ props => props.mgL && "50px"};
+`; 

src/components/card/Bookmark.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import styled from "styled-components"
+
+
+const Bookmark = ({ favorite, toggleFavorite, resource}) => {
+
+    return (
+        <>
+        {favorite ? (
+            <SVG viewBox="0 0 16 16" onClick={() => toggleFavorite(resource._id)}>
+                <path d="M2 2V15.5C1.99994 15.5868 2.02248 15.6722 2.06542 15.7476C2.10836 15.8231 2.17022 15.8861 2.24489 15.9304C2.31957 15.9747 2.40449 15.9988 2.4913 16.0003C2.57812 16.0018 2.66383 15.9807 2.74 15.939L8 13.069L13.26 15.939C13.3362 15.9807 13.4219 16.0018 13.5087 16.0003C13.5955 15.9988 13.6804 15.9747 13.7551 15.9304C13.8298 15.8861 13.8916 15.8231 13.9346 15.7476C13.9775 15.6722 14.0001 15.5868 14 15.5V2C14 1.46957 13.7893 0.960859 13.4142 0.585786C13.0391 0.210714 12.5304 0 12 0L4 0C3.46957 0 2.96086 0.210714 2.58579 0.585786C2.21071 0.960859 2 1.46957 2 2Z" fill="#1A3B79"/>
+            </SVG>
+        ) : (
+            <SVG viewBox="0 0 16 16" onClick={() => toggleFavorite(resource._id)}>
+                <g clipPath="url(#clip0)">
+                <path d="M2 2V15.5C1.99994 15.5868 2.02248 15.6722 2.06542 15.7476C2.10836 15.8231 2.17022 15.8861 2.24489 15.9304C2.31957 15.9747 2.40449 15.9988 2.4913 16.0003C2.57812 16.0018 2.66383 15.9807 2.74 15.939L8 13.069L13.26 15.939C13.3362 15.9807 13.4219 16.0018 13.5087 16.0003C13.5955 15.9988 13.6804 15.9747 13.7551 15.9304C13.8298 15.8861 13.8916 15.8231 13.9346 15.7476C13.9775 15.6722 14.0001 15.5868 14 15.5V2C14 1.46957 13.7893 0.960859 13.4142 0.585786C13.0391 0.210714 12.5304 0 12 0L4 0C3.46957 0 2.96086 0.210714 2.58579 0.585786C2.21071 0.960859 2 1.46957 2 2V2Z" />
+                </g>
+                <defs>
+                <clipPath id="clip0">
+                <rect width="16" height="16" fill="white"/>
+                </clipPath>
+                </defs>
+            </SVG>
+        )}
+        </>
+    )
+}
+
+export default Bookmark
+
+const SVG = styled.svg`
+    width: 24px;
+    fill: #E2E1E1;
+    transition: all 0.3s ease-in;
+    cursor: pointer;
+
+    &:hover {
+        fill: rgba(26, 59, 121, 0.50);
+    }
+
+    &:active {
+        fill: #1A3B79;
+    }
+`

src/components/card/Card.js

@@ -0,0 +1,104 @@
+import React from 'react'
+import styled from "styled-components"
+
+// Components
+import Bookmark from "./Bookmark"
+import Tag from "./Tag"
+import Rating from "./Rating"
+import Comments from "./Comments"
+
+const Card = ({ favorite, resource, theme, toggleFavorite }) => {
+    const tags = resource.tags;
+    const fName = resource.author.name_first
+    const lName = resource.author.name_last
+
+    let formattedDate = new Date(resource.ts);
+    formattedDate = formattedDate.toString()
+    let m = formattedDate.substring(4, 7)
+    let d = formattedDate.substring(8, 10)
+    let y = formattedDate.substring(11, 15) 
+
+
+    return (
+        <Wrapper key={resource._id}>
+            <Flexbox> 
+                <a href={resource.url} target="_blank"><h3>{resource.title}</h3></a>
+                <Bookmark favorite={favorite} toggleFavorite={toggleFavorite} resource={resource}/>
+            </Flexbox>
+            <div>
+                <p><span>Added on {m} {d},  {y}</span></p>
+                <p><span>Author: <Author>{fName} {lName}</Author></span></p>
+            </div>
+            <p>{resource.desc}</p>
+            <Flexbox flexStart>
+                {tags.map( tag => (
+                    <Tag content={tag} key={tag} />
+                ))}
+            </Flexbox>
+            {/* <Flexbox flexStart>
+                <Rating />
+                <Comments />
+            </Flexbox> */}
+        </Wrapper>
+    )
+}
+
+export default Card
+
+const Wrapper = styled.div`
+    width: 100%;
+    height: auto;
+    background-color: ${props => props.theme.bgSide};
+    padding: 40px 50px;
+    margin: 30px 0px;
+    border-radius: 16px;
+    box-shadow: 1px 1px 10px 8px rgba(0, 0, 0, 0.5%);
+    transition: all 0.4s ease;
+
+    &:hover{
+        box-shadow: 1px 1px 13px 8px rgba(0, 0, 0, 1%);
+    }
+
+    div {
+        margin: 10px 0px;
+    }
+
+    p {
+        font-size: 18px;
+        color: ${ props => props.theme.mainText};
+        line-height: 1.3;
+    }
+
+    span {
+        font-size: 14px;
+        color: ${ props => props.theme.smallText};
+    }
+`
+
+const Flexbox = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    justify-content: ${ props => props.flexStart && "flex-start"};
+    transition: all 0.3s ease-in;
+
+    h3 {
+        color: ${ props => props.theme.headingBlue};
+        font-size: 22px;
+        transition: all 0.3s ease;
+
+        &:hover {
+            color:  ${ props => props.theme.blueHover };
+        }
+    }
+`
+
+const Author = styled.a` 
+    font-size: 14px;
+    color: ${ props => props.theme.headingBlue};
+
+    /* &:hover {
+        color:  ${ props => props.theme.blueHover };
+    } */
+`

src/components/card/Comments.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Comments = () => {
+    return (
+        <div>
+            Comments
+        </div>
+    )
+}
+
+export default Comments

src/components/card/Tag.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Box = styled.span`
+    padding: 0.5rem 0.7rem;
+    margin: 0.5rem 1rem 0rem 0rem;
+    min-width: 3rem;
+    background-color: ${ props => props.theme.bgMain};
+    border-radius: 8px;
+    font-size: 12px;
+    text-align: center;
+    color: ${ props => props.theme.smallText}!important;
+    letter-spacing: 0.4px;
+`
+
+const Tag = ({content}) => {
+    return (
+        <Box>
+            { content }
+        </Box>
+    )
+}
+
+export default Tag

src/components/layout/SideHeader.js

@@ -11,19 +11,6 @@ import Copyright from "../header/Copyright";
 import ButtonLeft from "../header/ButtonLeft";
 import ModeToggle from "../header/ModeToggle";
 
-const SideNav = styled.nav`
-  height: 100vh;
-
-  padding-top: 4.5rem;
-  padding-bottom: 2rem;
-  background-color: ${(props) => props.theme.bgSide};
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 250px;
-  box-shadow: 1px 1px 10px 8px rgba(0, 0, 0, 1%);
-`;
 
 const SideHeader = ({ toggleTheme }) => {
   const nodeRef = useRef();
@@ -75,14 +62,42 @@ const SideHeader = ({ toggleTheme }) => {
       onClick={handleSideBarClick}
     >
       <SideNav>
-        <UserInfo />
-        <NavLinks />
-        <ModeToggle toggleTheme={toggleTheme} />
-        <Copyright />
-        <ButtonLeft expanded={expanded} handleExpand={handleExpand} />
+        <Fixed>
+          <UserInfo />
+          <NavLinks />
+          <ModeToggle toggleTheme={toggleTheme} />
+          <Copyright />
+          <ButtonLeft expanded={expanded} handleExpand={handleExpand} />
+        </Fixed>
       </SideNav>
     </animated.div>
   );
 };
 
 export default SideHeader;
+
+
+
+const SideNav = styled.div`
+  height: auto;
+  width: 270px;
+
+  display: flex;
+  justify-content: center;
+  background: red;
+  background-color: ${(props) => props.theme.bgSide};
+`;
+
+const Fixed = styled.nav`
+  width: 270px;
+
+  padding-top: 4.5rem;
+  padding-bottom: 2rem;
+  height: 100vh;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: ${(props) => props.theme.bgSide};
+
+`

src/components/layout/Sidebar.js

@@ -2,13 +2,6 @@ import React from 'react'
 import styled from 'styled-components'
 import Container from '../Sidebar/Container'
 
-const Wrapper = styled.div`
-    padding: 4.5rem 4.5rem 4.5rem 0rem;
-    background-color: ${props => props.theme.bgMain};
-    display: flex;
-    flex-direction: column;
-`
-
 
 const Sidebar = () => {
     return (
@@ -20,3 +13,10 @@ const Sidebar = () => {
 }
 
 export default Sidebar
+
+const Wrapper = styled.div`
+    padding: 4.5rem 4.5rem 4.5rem 0rem;
+    background-color: ${props => props.theme.bgMain};
+    display: flex;
+    flex-direction: column;
+`