feat: writeUps under construction (#78)

* feat: improved structured * feat: writeUps under construction
th3cyb3rhub · Aug 9, 2022 · b825fb3 · b825fb3
1 parent 153d5cd
commit b825fb3
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 26 deletions.
diff --git a/src/components/Resources/Courses/VideoCard/VideoCard.jsx b/src/components/Resources/Courses/VideoCard/VideoCard.jsx
@@ -2,24 +2,9 @@ import React from "react";
 import {CyberSecFreeYoutubeVideosData} from "../YoutubeCoursesData/CyberSecYouTubeVIdeosData";
 import {LinuxCourses__Youtube} from "../YoutubeCoursesData/LinuxYouTubeVIdeosData";
 import {BugHuntingVideos} from "../YoutubeCoursesData/BugHuntingVideos";
-import {
-    Card,
-    CardBody,
-    CardFooter,
-    Channel_Img,
-    ChannelHeading,
-    Img, Link,
-    Tag,
-    User,
-    UserInfo,
-    VideoHeading
-} from './VideoCardElements'
+import {Card, CardBody, CardFooter, Channel_Img, ChannelHeading, Img, Link, Tag, User, UserInfo, VideoHeading} from './VideoCardElements'
 
-const VideosCard = [
-    CyberSecFreeYoutubeVideosData,
-    LinuxCourses__Youtube,
-    BugHuntingVideos
-];
+const VideosCard = [ CyberSecFreeYoutubeVideosData, LinuxCourses__Youtube, BugHuntingVideos ];
 
 export const CyberYoutubeVideosCard = CyberSecFreeYoutubeVideosData.map(
     (data) => {
@@ -50,6 +35,7 @@ export const CyberYoutubeVideosCard = CyberSecFreeYoutubeVideosData.map(
         )
     }
 );
+
 export const BugHuntingVideosCard = BugHuntingVideos.map(
     (data) => {
         return (

diff --git a/src/components/Resources/WriteUps/WriteUps.jsx b/src/components/Resources/WriteUps/WriteUps.jsx
@@ -1,14 +1,68 @@
 import React from 'react';
-import {Section} from "./WriteUpsElements";
+import {Section, WriteUpSection, AuthorSection, AuthorImage, AuthorUsername, Date, ContentBody, Content, Heading, Paragraph, ImageSection, Image, ContentFooter, Tag, MinRead, Bookmark, MarginTop, HR} from './WriteUpsElements';
 
+import {MdOutlineBookmarkAdd, MdBookmarkAdded, MdOutlineBookmarkRemove} from 'react-icons/md';
+import {BsFillBookmarkXFill} from 'react-icons/bs';
+import {AiOutlineShareAlt} from "react-icons/all";
 
-const WriteUps = () => {
+export const WriteUps = () => {
     return (
-        <Section>
-            <h1>
-                Under Development
-            </h1>
-        </Section>
+        <WriteUpSection>
+            <Section>
+                <h1>
+                    Under Development
+                </h1>
+            </Section>
+            <AuthorSection>
+                <AuthorImage src="https://miro.medium.com/fit/c/176/176/1*WrWKJOzibjROkAF5S5Qn8w.jpeg"
+                             alt={"Steiner255"}/>
+                <AuthorUsername>
+                    Steiner255
+                </AuthorUsername>
+                <Date>
+                    5 Days Ago
+                </Date>
+            </AuthorSection>
+            <MarginTop/>
+
+            <ContentBody>
+                <Content>
+                    <Heading>
+                        Another day, Another IDOR vulnerability — $5000 Reddit Bug Bounty
+                    </Heading>
+                    <MarginTop/>
+                    <Paragraph>
+                        Gaining unprivileged access to Reddit moderator logs — Here we go. Again. IDOR, or insecure
+                        direct object reference, is a common yet insecure....
+                    </Paragraph>
+                </Content>
+                <ImageSection>
+                    <Image src="https://miro.medium.com/fit/c/224/224/1*cRu3ETnHdt6n-z96oedxPQ.png" alt="Bootcamp"/>
+                </ImageSection>
+            </ContentBody>
+            <MarginTop/>
+            <MarginTop/>
+            <ContentFooter>
+                <Tag>
+                    Bug Bounty
+                </Tag>
+                <MinRead>
+                    2 min read
+                </MinRead>
+                <Bookmark>
+                    <MdOutlineBookmarkAdd/>
+                    {/*<MdBookmarkAdded/>*/}
+                    {/*<MdOutlineBookmarkRemove/>*/}
+                    {/*<BsFillBookmarkXFill/>*/}
+                    <AiOutlineShareAlt/>
+                </Bookmark>
+            </ContentFooter>
+
+            <MarginTop/>
+            <MarginTop/>
+
+            <HR/>
+        </WriteUpSection>
     );
 };
 

diff --git a/src/components/Resources/WriteUps/WriteUpsData.jsx b/src/components/Resources/WriteUps/WriteUpsData.jsx
@@ -0,0 +1,14 @@
+export const writeUpsData = [
+    {
+        id: "IDOR",
+        authorImage: "https://miro.medium.com/fit/c/176/176/1*WrWKJOzibjROkAF5S5Qn8w.jpeg",
+        authorUsername: "Steiner255",
+        date: "5 Days Ago",
+        sectionHeading: "IDOR",
+        writeUpHeading: "Another day, Another IDOR vulnerability — $5000 Reddit Bug Bounty",
+        desc: "Write Ups",
+        writeThumbnail: "https://miro.medium.com/fit/c/224/224/1*cRu3ETnHdt6n-z96oedxPQ.png",
+        tag: "Bug Bounty",
+        timeRead: "2 min read",
+    }
+];
diff --git a/src/components/Resources/WriteUps/WriteUpsElements.jsx b/src/components/Resources/WriteUps/WriteUpsElements.jsx
@@ -2,6 +2,106 @@ import styled from "styled-components";
 
 export const Section = styled.div`
   text-align: center;
-  margin: 200px 100px;
-  color: #cecac3;  
+  margin: -50px 10px 100px 20px;
+  color: #cecac3;
+`
+
+export const WriteUpSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin: 200px auto;
+  color: #cecac3;
+  width: 45rem;
+
+  @media screen and (max-width: 1080px) {
+  }
+
+  @media screen and (max-width: 760px) {
+  }
+`
+
+export const AuthorSection = styled.div`
+  display: flex;
+`
+
+export const AuthorImage = styled.img`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+`
+
+export const AuthorUsername = styled.div`
+  margin: 3px 0 0 10px;
+  font-size: 13px;
+`
+
+export const Date = styled.div`
+  margin: 3px 0 0 10px;
+  font-size: 13px;
+`
+
+export const ContentBody = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+`
+
+export const Content = styled.div`
+  margin: 0 20px 0 0;
+`
+
+export const Heading = styled.h2`
+
+`
+
+export const Paragraph = styled.p`
+`
+
+export const ImageSection = styled.div`
+
+`
+
+export const Image = styled.img`
+    border-radius: 5px;
+`
+
+export const ContentFooter = styled.div`
+  display: flex;
+`
+
+export const Tag = styled.button`
+  margin: 5px 0 0 0;
+  padding: 5px;
+  border-radius: 10px;
+  border-color: #1a1c1d;
+  border-style: solid;
+  font-size: 10px;
+  background: #1a1c1d;
+  color: #cecac3;
+  border-width: 1px;
+`
+
+export const MinRead = styled.div`
+  font-size: 13px;
+  margin: 5px 0 0 10px;
+`
+
+export const Bookmark = styled.div`
+  display: flex;
+  justify-content: end;
+  margin: 5px 0 0 10px;
+`
+
+export const MarginTop = styled.div`
+  margin-top: 10px;
+`
+
+export const MarginBottom = styled.div`
+  margin-bottom: 10px;
+`
+
+export const HR = styled.hr`
+  color: #2a2a2a;
+
 `