fix(*): extrapolated article components

HoseaCodes · Mar 15, 2022 · 1ddca47 · 1ddca47
1 parent d52cebb
commit 1ddca47
Show file tree

Hide file tree

Showing 14 changed files with 547 additions and 10 deletions.
diff --git a/src/Components/Article/MainContainer.jsx b/src/Components/Article/MainContainer.jsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import Alert from 'react-bootstrap/Alert'
+import { AiFillStar, AiFillPlayCircle, AiFillTwitterCircle } from 'react-icons/ai';
+import {FaRegThumbsUp, FaRegComment, FaFacebook} from 'react-icons/fa';
+import {TiSocialLinkedinCircular} from 'react-icons/ti';
+import {MdBookmarkBorder} from 'react-icons/md';
+import {RiShareCircleFill} from 'react-icons/ri';
+import Sticky from 'react-sticky-state';
+import {JustifyContent, StyledMainContainer,
+  PaddingContent, BlogCard, BlogPost} from '../../Layout/Container/styledArticle';
+import {CircleImage, BlogDisplayImage} from '../../Layout/Image/styledImage';
+import {NamePlate, WarppedDate, GrayText, DisplayItem, BlogTitle, BlogSubTitle,
+  BlogPhotoCredit, BlogContent, Font2} from '../../Layout/Text/styledText';
+import {ArticleHr} from '../../Layout/Hr/styledHr';
+import {AlertP} from '../../Layout/Paragraph/styledParagraph';
+import {AlertLink} from '../../Layout/ATag/styledATag';
+import marked from 'marked';
+import './StickyState.css';
+import Newsletter from '../Subscribe/Newsletter';
+import RelatedPosts from './RelatedPosts';
+
+const MainContainer = (props) => {
+  const { title, subtitle, description, images, markdown } = props.detailArticle;
+  const timeFormater = props.timeFormater;
+  const readTime = props.readTime;
+
+  return (
+        <StyledMainContainer>
+                <PaddingContent>
+                  <section>
+                    <Alert transition="false" variant="light">
+                      <AlertP>
+                              You have <strong style={{ color: 'black' }}>1</strong> free member-only story left this month.&nbsp;
+                        <AlertLink href="#">Sign up for Medium and get an extra one.</AlertLink>
+                      </AlertP>
+                    </Alert>
+                    <JustifyContent AlignCenter>
+                      <CircleImage src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
+                            alt="author" />
+                      <div>
+                        <NamePlate>Will Smith</NamePlate>
+                        <WarppedDate>
+                          <GrayText>{timeFormater}</GrayText>
+                          <span>&nbsp;&#183;&nbsp;</span>
+                          <DisplayItem>{readTime} min read &nbsp; <AiFillStar/></DisplayItem>
+                          <span>&nbsp;&#183;&nbsp;</span>
+                          <DisplayItem Green><AiFillPlayCircle style={{fontSize: 'larger'}}/> &nbsp; Listen</DisplayItem>
+                        </WarppedDate>
+                      </div>
+                    </JustifyContent>
+                    <ArticleHr Primary/>
+                    <BlogTitle>{title}</BlogTitle>
+                    <BlogSubTitle>{subtitle}</BlogSubTitle>
+                      <BlogDisplayImage src={images.url} alt={title}  />
+                      <BlogPhotoCredit>Photo Credit by <u>You</u></BlogPhotoCredit>
+                      <BlogCard>
+                        <br />
+                        <BlogPost>
+                        <br />
+                        <BlogContent>{description}</BlogContent>
+                        <br />
+                        <br />
+                        <BlogContent Markdown  dangerouslySetInnerHTML={{ __html: marked(markdown) }}></BlogContent>
+                        <br />
+                        <Sticky >
+                          <div  className="bottom sticky">
+                            <ArticleHr Primary/>
+                            <JustifyContent SpaceAround>
+                              <JustifyContent Font2>
+                                <JustifyContent MarginRight>
+                                  <FaRegThumbsUp/> &nbsp; <span>1</span>
+                                </JustifyContent>
+                                <JustifyContent MarginRight>
+                                  <FaRegComment/> &nbsp; <span>1</span>
+                                </JustifyContent>
+                              </JustifyContent>
+                              <Font2>
+                                <FaFacebook/>
+                                <AiFillTwitterCircle/>
+                                <TiSocialLinkedinCircular/>
+                                <RiShareCircleFill/>
+                                <MdBookmarkBorder/>
+                              </Font2>
+                            </JustifyContent>
+                          </div>
+                        </Sticky>
+                        <Newsletter/>
+                                </BlogPost>
+                                {/* <input type="checkbox" checked={checked}
+                                    onChange={() => props.handleCheck(_id)} /> */}
+                                    {/* <BtnRender article={props.article} deleteArticle={props.deleteArticle} /> */}
+                            </BlogCard>
+                        </section>
+                </PaddingContent>
+               <RelatedPosts timeFormater={timeFormater} readTime={readTime}/>
+        </StyledMainContainer>
+  )
+}
+
+
+export default MainContainer;
diff --git a/src/Components/Article/RelatedPosts.jsx b/src/Components/Article/RelatedPosts.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import {MdBookmarkBorder} from 'react-icons/md';
+import {JustifyContent, AlignContent, Tag, SideUserContainer,
+  BlogCard, GrayDiv} from '../../Layout/Container/styledArticle';
+import {CircleImage} from '../../Layout/Image/styledImage';
+import {NamePlate} from '../../Layout/Text/styledText';
+import {MarginTop} from '../../Layout/Margin/styledMargin';
+import {ArticleMainHr} from '../../Layout/Hr/styledHr';
+import {ReadMore} from '../../Layout/Button/styledButton';
+
+const RelatedPosts = (props) => {
+
+  const {timeFormater, readTime} = props;
+
+  return (
+          <MarginTop Whitesmoke>
+            <BlogCard RelatedPost>
+              <AlignContent>
+                <CircleImage Secondary src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
+                  alt="author"/>
+                <NamePlate>Will Smith</NamePlate>
+                <span>&nbsp;&#183;&nbsp;</span>
+                <GrayDiv>{timeFormater}</GrayDiv>
+              </AlignContent>
+              <AlignContent>
+                <div>
+                  <h4> No Code Approach — Process Speech and convert to Text — Logic Apps</h4>
+                  <p> Using Azure Cognitive Services Speech to Text and Logic apps No Code — Workflow style
+                      We can re use the same pattern for other Azure Cognitive...
+                  </p>
+                </div>
+                <img height={'100px'} width={'150px'} src={"https://tateeda.com/wp-content/uploads/2020/05/2.png"} alt="post"/>
+              </AlignContent>
+              <JustifyContent MiniPost>
+                <AlignContent Inherit>
+                  <Tag>Software</Tag>
+                  <AlignContent Gray><span>{readTime} min read</span></AlignContent>
+                </AlignContent>
+                <MdBookmarkBorder style={{fontSize: '2.5rem'}}/>
+              </JustifyContent>
+            </BlogCard>
+            <ArticleMainHr/>
+            <SideUserContainer Main>
+              <AlignContent>
+                <CircleImage Secondary  src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
+                          alt="author" />
+                <NamePlate>Will Smith</NamePlate>
+                <span>&nbsp;&#183;&nbsp;</span>
+                <GrayDiv>{timeFormater}</GrayDiv>
+              </AlignContent>
+              <AlignContent>
+                <div>
+                  <h4> No Code Approach — Process Speech and convert to Text — Logic Apps</h4>
+                  <p> Using Azure Cognitive Services Speech to Text and Logic apps No Code — Workflow style
+                      We can re use the same pattern for other Azure Cognitive...
+                  </p>
+                </div>
+                <img height={'100px'} width={'150px'} src={"https://tateeda.com/wp-content/uploads/2020/05/2.png"} alt="post"/>
+              </AlignContent>
+               <JustifyContent MiniPost>
+                <AlignContent Inherit>
+                  <Tag>Software</Tag>
+                  <AlignContent Gray><span>{readTime} min read</span></AlignContent>
+                </AlignContent>
+                <MdBookmarkBorder style={{fontSize: '2.5rem'}}/>
+              </JustifyContent>
+            </SideUserContainer>
+            <ArticleMainHr/>
+            <AlignContent CenterBtn>
+              <ReadMore>Read more from me</ReadMore>
+            </AlignContent>
+          </MarginTop>
+  )
+}
+
+export default RelatedPosts;
diff --git a/src/Components/Article/RightColumn.jsx b/src/Components/Article/RightColumn.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import {PageLinks, StyledRightContainer, AlignContent, SideUserContainer,
+  PostContainer} from '../../Layout/Container/styledArticle';
+import {SquareImage, CircleImage} from '../../Layout/Image/styledImage';
+import {UserInfo, PostText, NoMargin, Subtitle} from '../../Layout/Text/styledText';
+import {ArticleBtn} from '../../Layout/Button/styledButton';
+import {ArticleLink, ArticleLinkColor} from '../../Layout/ATag/styledATag';
+import {MdBookmarkBorder} from 'react-icons/md';
+import { MarginTop } from '../../Layout/Margin/styledMargin';
+import { ArticleInput } from '../../Layout/Input/styledInput';
+
+const RightColumn = () => {
+
+  return (
+          <StyledRightContainer>
+            <AlignContent Center>
+              <ArticleBtn RightColumn >Get Started</ArticleBtn>
+              <ArticleLinkColor Green href='#'>Sign In</ArticleLinkColor>
+            </AlignContent>
+                <MarginTop RightCloumnSearch>
+                  <ArticleInput Search placeholder='Search' type="text"/>
+                </MarginTop >
+                <SideUserContainer Primary>
+                  <CircleImage Secondary src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
+                            alt="author" />
+                  <UserInfo Padding4>Will Smith</UserInfo>
+                  <UserInfo GrayWPadding>119 Followers</UserInfo>
+                  <UserInfo GrayWPadding>
+                    Software Engineer | Python Programmer | Java Programmer | Tech Enthusiast | JavaScript Programmer | React Lover | Mobile Developer
+                  </UserInfo>
+                </SideUserContainer>
+                <SideUserContainer ButtonGroup>
+                  <ArticleBtn Follow>Follow</ArticleBtn>
+                  <ArticleBtn Follow><MdBookmarkBorder style={{fontSize: '2rem'}}/></ArticleBtn>
+                </SideUserContainer>
+                <SideUserContainer Primary>
+                  <PostText>Related</PostText>
+                  <PostContainer>
+                    <SquareImage src={"https://okteto.com/static/ac268f62ae1c1edd1802a3b841bf2c5a/cover.png"}
+                            alt="post" />
+                    <SideUserContainer>
+                      <h5>FastAPI: Complete API Development</h5>
+                      <Subtitle Primary> FastAPI: Complete API Development</Subtitle>
+                    </SideUserContainer>
+                  </PostContainer>
+                  <PostContainer Secondary>
+                    <SquareImage src={"https://makeameme.org/media/templates/250/dr_evil_austin_powers.jpg"}
+                            alt="post" />
+                    <SideUserContainer>
+                      <NoMargin>Handling MongoDb ObjectId in Python FastAPI</NoMargin>
+                      <Subtitle Primary> Keep it simlpe but significant</Subtitle>
+                    </SideUserContainer>
+                  </PostContainer>
+                  <PostContainer Secondary>
+                    <SquareImage src={"https://miro.medium.com/max/1200/1*OdqgwkO9B5A29LP9Vb9rHQ.png"}
+                            alt="post" />
+                    <SideUserContainer>
+                      <NoMargin>Pydantic — Better Data Validation for Python</NoMargin>
+                      <Subtitle Primary> “Data validation and settings management using Python type hinting."</Subtitle>
+                    </SideUserContainer>
+                  </PostContainer>
+                </SideUserContainer>
+                <PageLinks >
+                  <ArticleLink href='#' >Help</ArticleLink>
+                  <ArticleLink href='#' >Status</ArticleLink>
+                  <ArticleLink href='#' >Writers</ArticleLink>
+                  <ArticleLink href='#' >Blog</ArticleLink>
+                  <ArticleLink href='#' >Careers</ArticleLink>
+                  <ArticleLink href='#' >Privacy</ArticleLink>
+                  <ArticleLink href='#' >Terms</ArticleLink>
+                  <ArticleLink href='#' >About</ArticleLink>
+                </PageLinks>
+            </StyledRightContainer>
+  )
+}
+
+
+export default RightColumn;
diff --git a/src/Components/Article/StickyState.css b/src/Components/Article/StickyState.css
@@ -0,0 +1,40 @@
+/* Required for react-sticky-state */
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
+
+.sticky.sticky-fixed.is-sticky {
+  margin-top: 0;
+  margin-bottom: 0;
+  position: fixed;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.sticky.sticky-fixed.is-sticky:not([style*="margin-top"]) {
+  margin-top: 0 !important;
+}
+
+.sticky.sticky-fixed.is-sticky:not([style*="margin-bottom"]) {
+  margin-bottom: 0 !important;
+}
+
+.sticky.sticky-fixed.is-absolute {
+  position: absolute;
+}
+
+.top {
+  top: 0;
+}
+
+.bottom {
+  bottom: 0;
+}
+
+.is-sticky {
+  background-color: white;
+}
+
+/* Required for react-sticky-state */
diff --git a/src/Components/NavBar/SideBar.jsx b/src/Components/NavBar/SideBar.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import {StyledLeftContainer, JustifyContent} from '../../Layout/Container/styledArticle';
+import {LogoImage} from '../../Layout/Image/styledImage';
+import {StackedAlignn} from '../../Layout/Icon/styledIcons';
+import {ArticleHr} from '../../Layout/Hr/styledHr';
+import {HiOutlinePencilAlt} from 'react-icons/hi';
+import {BsHouseDoor, BsBell} from 'react-icons/bs';
+import {MdBookmarkBorder} from 'react-icons/md';
+import logo from '../../Assets/Images/newLogo.png';
+
+const SideBar = () => {
+
+    return (
+      <StyledLeftContainer>
+        <JustifyContent >
+          <LogoImage src={logo} alt="logo"/>
+        </JustifyContent>
+        <StackedAlignn >
+          <BsHouseDoor style={{marginBottom: '5rem'}}/>
+          <BsBell style={{marginBottom: '5rem'}}/>
+          <MdBookmarkBorder style={{marginBottom: '5rem'}}/>
+          <ArticleHr/>
+          <HiOutlinePencilAlt style={{marginBottom: '5rem'}}/>
+        </StackedAlignn>
+      </StyledLeftContainer>
+    )
+}
+
+
+export default SideBar;
diff --git a/src/Components/Subscribe/Newsletter.jsx b/src/Components/Subscribe/Newsletter.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import {AiOutlineMail } from 'react-icons/ai';
+import {ArticleBtn} from '../../Layout/Button/styledButton';
+import {ArticleInput} from '../../Layout/Input/styledInput';
+import {BlogContent} from '../../Layout/Text/styledText';
+import {MarginTop} from '../../Layout/Margin/styledMargin';
+import {JustifyContent, BlogNewsletter} from '../../Layout/Container/styledArticle';
+
+const Newsletter = () => {
+  return (
+        <BlogNewsletter>
+          <div>
+            <h3>Sign up for Software Engineering News</h3>
+            <BlogContent Author>By Dominique Hosea</BlogContent>
+            <BlogContent Newsletter>Latest news from Analytics Vidhya on our Hackathons and some of our best articles!&nbsp;
+              <u>Take a look.</u>
+            </BlogContent>
+            <JustifyContent SpaceAroundPaddingRight>
+              <ArticleInput placeholder='Your email' type="text" />
+              <ArticleBtn><AiOutlineMail style={{fontSize: '2.5rem'}}/>&nbsp;  Get this newsletter</ArticleBtn>
+            </JustifyContent>
+            <MarginTop>By signing up, you will create a Medium account if you don"’"t already have one.
+              Review our Privacy Policy for more information about our privacy practices.</MarginTop>
+          </div>
+        </BlogNewsletter>
+  )
+}
+
+export default Newsletter;
diff --git a/src/Layout/ATag/styledATag.jsx b/src/Layout/ATag/styledATag.jsx
@@ -14,3 +14,9 @@ export const ArticleLink = styled.a`
   ${props => props.Primary && css`
   `}
 `;
+export const ArticleLinkColor = styled.a`
+  color: dimgray;
+  ${props => props.Green && css`
+    color: green;
+  `}
+`;