From 1ddca478302d5e94ccb88892f06cad0db23a8e2f Mon Sep 17 00:00:00 2001 From: hosead6168 Date: Tue, 15 Mar 2022 07:10:46 -0500 Subject: [PATCH] fix(*): extrapolated article components --- src/Components/Article/MainContainer.jsx | 101 +++++++++++++++++++++++ src/Components/Article/RelatedPosts.jsx | 76 +++++++++++++++++ src/Components/Article/RightColumn.jsx | 78 +++++++++++++++++ src/Components/Article/StickyState.css | 40 +++++++++ src/Components/NavBar/SideBar.jsx | 30 +++++++ src/Components/Subscribe/Newsletter.jsx | 29 +++++++ src/Layout/ATag/styledATag.jsx | 6 ++ src/Layout/Button/styledButton.jsx | 30 +++++++ src/Layout/Container/styledArticle.jsx | 98 ++++++++++++++++++++-- src/Layout/Hr/styledHr.jsx | 6 ++ src/Layout/Image/styledImage.jsx | 4 + src/Layout/Input/styledInput.jsx | 12 ++- src/Layout/Margin/styledMargin.jsx | 18 ++++ src/Layout/Text/styledText.jsx | 29 +++++++ 14 files changed, 547 insertions(+), 10 deletions(-) create mode 100644 src/Components/Article/MainContainer.jsx create mode 100644 src/Components/Article/RelatedPosts.jsx create mode 100644 src/Components/Article/RightColumn.jsx create mode 100644 src/Components/Article/StickyState.css create mode 100644 src/Components/NavBar/SideBar.jsx create mode 100644 src/Components/Subscribe/Newsletter.jsx create mode 100644 src/Layout/Margin/styledMargin.jsx diff --git a/src/Components/Article/MainContainer.jsx b/src/Components/Article/MainContainer.jsx new file mode 100644 index 00000000..2db91a48 --- /dev/null +++ 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 ( + + +
+ + + You have 1 free member-only story left this month.  + Sign up for Medium and get an extra one. + + + + +
+ Will Smith + + {timeFormater} +  ·  + {readTime} min read   +  ·  +   Listen + +
+ + + {title} + {subtitle} + + Photo Credit by You + +
+ +
+ {description} +
+
+ +
+ +
+ + + + +   1 + + +   1 + + + + + + + + + + +
+ + + + {/* props.handleCheck(_id)} /> */} + {/* */} + +
+ + + + ) +} + + +export default MainContainer; diff --git a/src/Components/Article/RelatedPosts.jsx b/src/Components/Article/RelatedPosts.jsx new file mode 100644 index 00000000..de0f0dc7 --- /dev/null +++ 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 ( + + + + + Will Smith +  ·  + {timeFormater} + + +
+

No Code Approach — Process Speech and convert to Text — Logic Apps

+

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... +

+
+ post + + + + Software + {readTime} min read + + + + + + + + + Will Smith +  ·  + {timeFormater} + + +
+

No Code Approach — Process Speech and convert to Text — Logic Apps

+

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... +

+
+ post + + + + Software + {readTime} min read + + + + + + + Read more from me + + + ) +} + +export default RelatedPosts; diff --git a/src/Components/Article/RightColumn.jsx b/src/Components/Article/RightColumn.jsx new file mode 100644 index 00000000..ee6344f6 --- /dev/null +++ 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 ( + + + Get Started + Sign In + + + + + + + Will Smith + 119 Followers + + Software Engineer | Python Programmer | Java Programmer | Tech Enthusiast | JavaScript Programmer | React Lover | Mobile Developer + + + + Follow + + + + Related + + + +
FastAPI: Complete API Development
+ FastAPI: Complete API Development + + + + + + Handling MongoDb ObjectId in Python FastAPI + Keep it simlpe but significant + + + + + + Pydantic — Better Data Validation for Python + “Data validation and settings management using Python type hinting." + + + + + Help + Status + Writers + Blog + Careers + Privacy + Terms + About + + + ) +} + + +export default RightColumn; diff --git a/src/Components/Article/StickyState.css b/src/Components/Article/StickyState.css new file mode 100644 index 00000000..593ec172 --- /dev/null +++ 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 new file mode 100644 index 00000000..6bc15221 --- /dev/null +++ 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 ( + + + + + + + + + + + + + ) +} + + +export default SideBar; diff --git a/src/Components/Subscribe/Newsletter.jsx b/src/Components/Subscribe/Newsletter.jsx new file mode 100644 index 00000000..e2ec3ae2 --- /dev/null +++ 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 ( + +
+

Sign up for Software Engineering News

+ By Dominique Hosea + Latest news from Analytics Vidhya on our Hackathons and some of our best articles!  + Take a look. + + + +   Get this newsletter + + 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. +
+ + ) +} + +export default Newsletter; diff --git a/src/Layout/ATag/styledATag.jsx b/src/Layout/ATag/styledATag.jsx index 835adff9..8d8270e7 100644 --- 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; + `} +`; diff --git a/src/Layout/Button/styledButton.jsx b/src/Layout/Button/styledButton.jsx index 29839a4a..a2d4f164 100644 --- a/src/Layout/Button/styledButton.jsx +++ b/src/Layout/Button/styledButton.jsx @@ -13,6 +13,35 @@ export const StyledDivButton = styled.div` `} `; +export const ReadMore = styled.button` + margin-top: 8%; + text-align: center; + background: green; + color: white; + border-radius: 20px; + padding: 1.5% 3%; +`; + +export const ArticleBtn = styled.button` + background: green; + padding: 1.5% 3%; + border-radius: 60px; + color: white; + font-size: 1.8rem; + display: flex; + align-items: center; + ${props => props.RightColumn && css` + background: black; + padding: 1.5% 15%; + flex-direction: column; + `} + ${props => props.Follow && css` + padding: 1.5% 4%; + flex-direction: column; + margin-right: 2%; +`} +`; + export const StyledButtonH2 = styled.h2` padding-bottom: 1%; `; @@ -25,6 +54,7 @@ const personalbtn = keyframes` left: 0%; } `; + export const StyledButtonATag = styled.a` border: 2px solid #204740; box-sizing: inherit; diff --git a/src/Layout/Container/styledArticle.jsx b/src/Layout/Container/styledArticle.jsx index 9000604e..bdf89fc4 100644 --- a/src/Layout/Container/styledArticle.jsx +++ b/src/Layout/Container/styledArticle.jsx @@ -7,6 +7,28 @@ export const StyledLeftContainer = styled.section` height: 100vh; `; +export const Inherit = styled.span` + width: max-content; +`; + +export const StyledRightContainer = styled.section` + width: 45rem; + padding: 4% 2% 0% 2%; + border: 1px solid #ccc; + margin: 0; + max-height: calc(105vh - 4rem); + overflow-Y: scroll; + position: sticky; + top: 0; + right: 0; +`; + +export const GrayDiv = styled.section` + color: dimgray; + +`; + + export const JustifyContent = styled.div` display: flex; justify-content: center; @@ -21,14 +43,49 @@ export const JustifyContent = styled.div` ${props => props.MarginRight && css` margin-right: 4%; `} + ${props => props.SpaceAround && css` + justify-content: space-between; + `} + ${props => props.MiniPost && css` + justify-content: space-between; + align-items: center; + width: 80%; + margin-top: 4%; + `} + ${props => props.SpaceAroundPaddingRight && css` + justify-content: space-between; + padding: 0 6% 0 0; + `} `; -export const JustifyContentSpaceAround = styled.div` +export const AlignContent = styled.div` display: flex; + align-items: center; + ${props => props.Center && css` justify-content: space-between; - ${props => props.PaddingRight && css` - padding: 0 6% 0 0; - `} + flex-direction: row; + margin-right: 12%; +`} + ${props => props.CenterBtn && css` + justify-content: center; + padding-bottom: 16%; + +`} + ${props => props.Inherit && css` + flex-direction: row; + width: inherit; +`} + ${props => props.Gray && css` + color: dimgray; +`} +`; + +export const Tag = styled.div` + background: #ccc; + border-radius: 20px; + text-align: center; + padding: 1%; + margin-right: 2%; `; export const PaddingContent = styled.div` @@ -45,7 +102,7 @@ export const StyledMainContainer = styled.article` position: relative; height: calc(105vh - 4rem); overflow: auto; - overflowX: hidden; + overflow-X: hidden; WebkitOverflowScrolling: touch; `; @@ -58,11 +115,15 @@ export const PageLinks = styled.div` margin-top: 20%; `; -export const BlogCard = styled.section` +export const BlogCard = styled.div` display: flex; flex-direction: column; width: 100%; margin: auto; + ${props => props.RelatedPost && css` + padding: 6%; + margin: 0; + `} `; export const BlogPost = styled.div` @@ -79,3 +140,28 @@ export const BlogNewsletter = styled.div` border-top: solid; border-color: green; `; + +export const SideUserContainer = styled.div` + display: flex; + flex-direction: column; + ${props => props.Primary && css` + margin-top: 12%; + `} + ${props => props.ButtonGroup && css` + flex-direction: row; + margin-top: 8%; + `} + ${props => props.Main && css` + padding: 6%; + width: 100% +`} +`; + +export const PostContainer = styled.div` + display: flex; + flex-direction: row; + margin-top: 5%; + ${props => props.Secondary && css` + margin-top: 15%; + `} +`; diff --git a/src/Layout/Hr/styledHr.jsx b/src/Layout/Hr/styledHr.jsx index 818731f2..fc704baa 100644 --- a/src/Layout/Hr/styledHr.jsx +++ b/src/Layout/Hr/styledHr.jsx @@ -20,3 +20,9 @@ export const ArticleHr = styled.hr` margin-left: -80px; `} `; +export const ArticleMainHr = styled.hr` + color: green; + background: slategrey; + width: 90%; + height: 2px; +`; diff --git a/src/Layout/Image/styledImage.jsx b/src/Layout/Image/styledImage.jsx index ba6ded47..af1a3eeb 100644 --- a/src/Layout/Image/styledImage.jsx +++ b/src/Layout/Image/styledImage.jsx @@ -20,7 +20,11 @@ export const CircleImage= styled.img` width: 8rem; margin-Right: 4%; `} + ${props => props.Secondary && css` + width: 7rem; + `} `; + export const SquareImage= styled.img` width: 90px; margin-right: 4%; diff --git a/src/Layout/Input/styledInput.jsx b/src/Layout/Input/styledInput.jsx index cc7800c9..883eb057 100644 --- a/src/Layout/Input/styledInput.jsx +++ b/src/Layout/Input/styledInput.jsx @@ -1,12 +1,16 @@ -import styled, {css, } from 'styled-components'; +import styled, {css} from 'styled-components'; -export const NewsletterInput= styled.input` +export const ArticleInput= styled.input` background: transparent; border: none; border-bottom: solid; width: 60%; font-size: 1.5rem; - ${props => props.Primary && css` - + ${props => props.Search && css` + border: 1px solid #ccc; + width: 90%; + fontSize: 1.5rem; + padding: 2% 8%; + border-radius: 20px; `} `; diff --git a/src/Layout/Margin/styledMargin.jsx b/src/Layout/Margin/styledMargin.jsx new file mode 100644 index 00000000..8ec72b7f --- /dev/null +++ b/src/Layout/Margin/styledMargin.jsx @@ -0,0 +1,18 @@ +import styled, {css} from 'styled-components'; + +export const Margin5 = styled.div` + margin-bottom: 5rem; + ${props => props.Primary && css` + margin-bottom: 5rem; + `} +`; +export const MarginTop = styled.div` + margin-top: 4%; + ${props => props.Whitesmoke && css` + background: whitesmoke; + `} + ${props => props.RightCloumnSearch && css` + display: flex; + margin-top: 12%; + `} +`; diff --git a/src/Layout/Text/styledText.jsx b/src/Layout/Text/styledText.jsx index 1c08acbf..3b86b0f8 100644 --- a/src/Layout/Text/styledText.jsx +++ b/src/Layout/Text/styledText.jsx @@ -13,6 +13,18 @@ export const NamePlate= styled.div` export const Font2= styled.div` font-size: 2.5rem; ${props => props.Primary && css` + `} +`; +export const NoMargin= styled.h5` + margin: 0; + ${props => props.Primary && css` + `} +`; + +export const PostText= styled.p` + font-size: 1.8rem; + font-weight: 500; + ${props => props.Primary && css` `} `; @@ -52,6 +64,13 @@ export const BlogTitle= styled.h2` `} `; +export const Subtitle= styled.h6` + color: dimgray; + ${props => props.Primary && css` + margin: 2% 0 0 0; + `} +`; + export const BlogSubTitle= styled.h3` text-transform: capitalize; margin-top: 2rem; @@ -83,3 +102,13 @@ ${props => props.Newsletter && css` width: 80%; `} `; +export const UserInfo= styled.div` + font-size: 1.8rem; +${props => props.Padding4 && css` + padding: 4% 0 0 0; + `} +${props => props.GrayWPadding && css` + font-size: 1.4rem; + color: dimgray; + `} +`;