[Issue scorelab#416] Add blogGrid component with responsive design

Sapnajha19 · Mar 18, 2023 · d40acf0 · d40acf0
1 parent 76b9ff6
commit d40acf0
Show file tree

Hide file tree

Showing 41 changed files with 14,400 additions and 54,779 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -82,4 +82,4 @@
   "bugs": {
     "url": "https://github.com/scorelab/Webiu/issues"
   }
-}
+}
diff --git a/src/components/About/index.js b/src/components/About/index.js
@@ -1,18 +1,18 @@
 import React from "react"
 import PropTypes from "prop-types"
 import "./style.sass"
-import {Container, Row, Col} from 'react-bootstrap'
+import { Container, Row, Col } from 'react-bootstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
-export const About = ({header, mainText, subText, buttonText, buttonLink, image, backgroundColor}) => {
+export const About = ({ header, mainText, subText, buttonText, buttonLink, image, backgroundColor }) => {
   return (
     <div className="about-component">
-    {header ? <div className="header-component">
+      {header ? <div className="header-component">
         <h2><FontAwesomeIcon className="icon" icon={faInfoCircle} /> {header}</h2>
-    </div> : null}
-    <div className="about-us" style={{backgroundColor: backgroundColor}}>
-      <Container>
+      </div> : null}
+      <div className="about-us" style={{ backgroundColor: backgroundColor }}>
+        <Container>
           <Row>
             <Col md={6} className="left-col">
               <div className="about-content-section">
@@ -22,16 +22,16 @@ export const About = ({header, mainText, subText, buttonText, buttonLink, image,
                 </h1> : null}
                 <p>{subText}</p>
                 {buttonText ? <a href={buttonLink} className="button">
-                    {buttonText}
+                  {buttonText}
                 </a> : null}
               </div>
             </Col>
             <Col md={6} className="right-col">
-              <img className= "about-image" alt="About" src={image} />
+              <img className="about-image" alt="About" src={image} />
             </Col>
           </Row>
-      </Container>
-    </div>
+        </Container>
+      </div>
     </div>
   )
 }

diff --git a/src/components/About/style.sass b/src/components/About/style.sass
@@ -17,12 +17,12 @@
   @media #{$xs-and-less}
     align-items: center
     text-align: center
-  display: flex
-  text-align: left
-  height: 100%
-  flex-direction: column
-  justify-content: center
-  align-items: flex-start
+    display: flex
+    text-align: left
+    height: 100%
+    flex-direction: column
+    justify-content: center
+    align-items: flex-start
   p
     font-size: 14px
     line-height: 25px
@@ -44,9 +44,9 @@
 .button:hover
   color: #fff
   text-decoration: none
-
+  
 .right-col
   text-align: center
   margin-top: 20px
   .about-image
-    width: 80%
+    width: 80%
diff --git a/src/components/BlogGrid/BlogGrid.md b/src/components/BlogGrid/BlogGrid.md
@@ -0,0 +1,26 @@
+## Initial Setup
+
+Hope you have successfully set up the project in your local system and install all dependencies
+
+## About the BloGrid Component
+
+This is a resuasble component for the BlogGrid component. It could be used to display the content of the latest blogs. This Component is highly reusable and customizable via props.
+
+## How to use the component
+
+Import the component to `pages/index.js`
+`import {BlogGrid} from "../components/BlogGrid";`
+
+## How to handle props to the component
+
+```
+<BlogGrid headingText="sample-text" data={[{
+        cardImage: "sample-image-url",
+        cardHeadingText: "sample-blog-card-heading-text",
+        cardDescriptionText: "sample-blog-card-description-text"}]} />
+```
+### sample data suggests the data you want to show at the component.
+
+`headingText`: props of type text, it is heading text of the BlogGrid component.
+`cardImage`: props of the blog card image url.
+`cardHeadingText` and `cardDescriptionText`: props of type text are the blog card's heading and card's description text.
diff --git a/src/components/BlogGrid/BlogGrid.stories.js b/src/components/BlogGrid/BlogGrid.stories.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import BlogGrid from './index'
+
+export default {
+    title: "General/Gallery",
+    component: BlogGrid,
+    argTypes: {
+        headingText: { control: "text" },
+        data: { control: "array" },
+    },
+}
+
+export const Template = args => <BlogGrid {...args} />
+export const BlogGridWithArgs = Template.bind({});
+BlogGridWithArgs.args = {
+    headingText: "Our Latest blogs",
+    data: [{
+        cardImage: "https://s3-alpha-sig.figma.com/img/95a8/5841/ace4f4d40ef9b991562559b4f26ec15d?Expires=1679875200&Signature=qT1pLhUyMNNxlqC7ainOWxzi0SyJQ37aVjPSK5dV6QBJ6QKzTOqov3S6CGenCbzUpGWcNA81KZ5UtrhKf0q0Y5w6lgHjl7wJ21hvO~MteCnG887f2ck3yWqCML~02SWu0ZPJM6iLmSqzLszJZYWE2pTsah-3JubEMZEnSegfKyJh7BYscZPcxLeGpscsyA3x4cla30BdJAUj3ogceqWJgrd7w077vNa2LsYuEH34O4nUTUvIqAww26H02alWrnxEYIDhXkoAnz-YGcSZVxV9KsHugi5Bawh8C~MOwSU~PgXwPpaChJIN1tQh98NrIAesUFSElxhi2ojvZCAMgYxdnw__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4",
+        cardHeadingText: "Los Angeles Institute",
+        cardDescriptionText: "Street Food Convention will showcase products like Packed food, beef and lamb, street food."
+    },
+    {
+        cardImage: "https://s3-alpha-sig.figma.com/img/0112/5618/41592ea17a16352af76ff3c7e437d2a0?Expires=1679875200&Signature=X59-2nG3sSbAAmdR1kAXhfwkHCoQE7mm4hPCfn3-PORhSbiiWACmsXKdKNh8Aj3lI9LCKB9lOahISZtJRaJkX1WZtdXd~4lC7GSMAL0VaLdwofjMOwd9-Xw8wdP764hZAEcpTzwO7MbqPaDmR4e9ZUxV3XowpLZRceu7xHCTCl-HxVIGTpVZeymzFxXpq2ZuEaCqMjKxx7JPiPTc~tLk-4AcGZpvkCYrhYt1tu60~YlQrj585VevaOmbuHYLWniPxvXMmJNWfMU-LZToDc0V-ts9qi48Jp9VdFVSvm-NiH5b3v-I5Fq4e3QkAiU3PfVfgXJalRjQhh3qxPWq45lJew__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4",
+        cardHeadingText: "Los Angeles Institute",
+        cardDescriptionText: "Street Food Convention will showcase products like Packed food, beef and lamb, street food."
+    },
+    {
+        cardImage: "https://s3-alpha-sig.figma.com/img/de78/052a/3fbe6482fcc26773271a3b4de15d387b?Expires=1679875200&Signature=QANlJmK3wV8FvtyHQjZjRdb9YYuLt5ZmT4D6Rl9Z6l-ChlEQh8bK2eozjZSUpKWEijaQGR~BWOkhR6jyOPoh2jeplNp08RED72il7Y1qudjYwJu6wKlhvSbVT-HscyGjS7nibhtlHJ0WXeKtvlhZTn1zfTVkzfDLbPFDWwqTEzePYmzZMAJkf801aVqglsCjWQAHUlv3~bf~LjHwI7X3xvpos3IAOM~5PV3FDsFhGG~CCGiJ6wygSXtJrqccqxNEXnju1kViwdTq7qzr4QjdM9inEVNNz4J5IN~KPzfmYvNhrtGrb0V8mD8XysiuXGoYOPhXQ-TLj4L7HNzxWh0ATg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4",
+        cardHeadingText: "Los Angeles Institute",
+        cardDescriptionText: "Street Food Convention will showcase products like Packed food, beef and lamb, street food."
+    }
+    ]
+}
diff --git a/src/components/BlogGrid/index.js b/src/components/BlogGrid/index.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import "./style.sass";
+import { Container, Row, Col, Card} from "react-bootstrap";
+import PropTypes from "prop-types";
+
+const BlogGrid = ({headingText, data}) => {
+  return (
+    <div className="blog-grid">
+      <Container className="container">
+        <Row>
+          <Col md={12} className="Heading">
+            <h1 className="headingText">{headingText}</h1>
+          </Col>
+        </Row>
+        {data.length>0?(
+        <Row className="row">
+          {data.map((item,index)=>{
+            return(
+          <Col md={4} key={index} className="cards-col">
+            <Card className="blog-cards">
+            <Card.Img src={item.cardImage} style={{borderTopLeftRadius:"35px",borderTopRightRadius:"35px"}}/>
+              <Card.Body className="card-body">
+                <Card.Title className="card-heading-text">{item.cardHeadingText}</Card.Title>
+                <Card.Text className="card-description-text">
+                  {item.cardDescriptionText}
+                </Card.Text>
+                <div className="card-circle">
+                  <div className="card-arrow">&#10230;</div>
+                </div>
+              </Card.Body>
+            </Card>
+          </Col>)})}
+        </Row>) : 
+        <p>No blogs available</p>}
+      </Container>
+    </div>
+  );
+};
+
+export default BlogGrid;
+
+BlogGrid.propTypes={
+  headingText: PropTypes.string,
+  data: PropTypes.array
+}
diff --git a/src/components/BlogGrid/style.sass b/src/components/BlogGrid/style.sass
@@ -0,0 +1,201 @@
+@import '../../styles/variables.sass'
+.blog-grid
+    background: linear-gradient(123.81deg, rgba(61, 175, 115, 0) -3.35%, #51AD28 -3.35%, rgba(48, 173, 66, 0.991046) -3.35%, rgba(51, 174, 86, 0.83) 26.52%, rgba(55, 175, 117, 0.67) 46.09%, rgba(52, 176, 60, 0.934264) 100.45%, rgba(108, 174, 190, 0.615823) 100.61%, rgba(217, 217, 217, 0) 100.93%, rgba(57, 175, 134, 0.946006) 100.93%),url("https://i.ibb.co/fCsvRLK/blog-section-image.png")
+    object-fit: cover
+    background-size: cover
+    background-repeat: no-repeat
+    background-position: center center
+    background-attachment: fixed
+    width: 100vw
+    min-height: 100vh
+    .container
+        display: flex
+        flex-direction: column
+        justify-content: space-between
+.headingText
+    color: #fff
+    font-style: 'Montserrat'
+    font-size: 64px
+    font-style: bold
+    font-weight: 700
+    line-height: 78px
+    padding-top: 20px
+.Heading
+    width: 544px
+    height: 101px
+.row
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    .cards-col
+        display: flex
+        flex-direction: row
+        flex-wrap: wrap
+        justify-content: center
+        padding-top: 30px
+    .blog-cards
+        height: 504px
+        width: 422px
+        background: #fff
+        flex-grow: 1
+        flex-basis: 0
+        border: none
+        display: flex
+        flex-direction: column
+        border-radius: 35px
+        .card-body
+            display: flex
+            flex-direction: column
+            justify-content: center
+            align-items: center
+            .card-circle
+                position: absolute
+                bottom: 0
+                top: 92%
+                left: 50%
+                transform: translateX(-50%)
+                width: 88px
+                height: 85px
+                border-radius: 50%
+                background-color: #51AD28
+                display: flex
+                justify-content: center
+                align-items: center
+                .card-arrow
+                    position: absolute
+                    top: 10px
+                    color: #fff
+                    font-size: 40px
+        .card-heading-text
+            font-size: 30px
+            width: 422px
+            font-family: 'Montserrat'
+            color: #6F6C6C
+            font-style: semibold
+            line-height: 37px
+            justify-content: center
+            align-items: center
+            text-align: center
+            padding-top: 10px
+        .card-description-text
+            font-size: 24px
+            font-family: 'Montserrat'
+            color: #717171
+            font-style: regular
+            line-height: 29px
+            width: 310px
+            height: 114px
+            margin: auto
+            justify-content: center
+            align-items: center
+            text-align: center
+            margin-top: 30px
+
+@media only screen and (max-width: 480px)
+    .blog-grid
+        background: linear-gradient(123.81deg, rgba(61, 175, 115, 0) -3.35%, #51AD28 -3.35%, rgba(48, 173, 66, 0.991046) -3.35%, rgba(51, 174, 86, 0.83) 26.52%, rgba(55, 175, 117, 0.67) 46.09%, rgba(52, 176, 60, 0.934264) 100.45%, rgba(108, 174, 190, 0.615823) 100.61%, rgba(217, 217, 217, 0) 100.93%, rgba(57, 175, 134, 0.946006) 100.93%),url("https://i.ibb.co/fCsvRLK/blog-section-image.png")
+        object-fit: cover
+        background-size: cover
+        background-repeat: no-repeat
+        background-position: center center
+        background-attachment: fixed
+        width: 100%
+        min-height: 100vh
+        padding-top: 730px
+        .container
+            display: flex
+            flex-direction: column
+            fklex-wrap: wrap
+            justify-content: center
+            align-items: center
+            justify-content: space-between
+            .headingText
+                color: #fff
+                font-style: 'Montserrat'
+                font-size: 40px
+                font-style: bold
+                font-weight: 700
+                text-align: center
+            .Heading
+                padding-top: 150px
+    .row
+        display: flex
+        flex-direction: column
+        align-items: center
+        flex-wrap: wrap
+        padding-top: 150px
+        gap: 80px
+        .cards-col
+            display: flex
+            flex-direction: column
+            align-items: center
+            flex-wrap: wrap
+            justify-content: space-around
+            .card-body
+                height: 550px
+        .blog-cards
+            height: 450px
+            width: 370px
+            .card-heading-text
+                font-size: 30px
+            .card-description-text
+                font-size: 23px
+                width: 320px
+                height: 400px
+                text-align: center
+
+@media only screen and (min-width: 490px) and (max-width: 920px)
+    .blog-grid
+        background: linear-gradient(123.81deg, rgba(61, 175, 115, 0) -3.35%, #51AD28 -3.35%, rgba(48, 173, 66, 0.991046) -3.35%, rgba(51, 174, 86, 0.83) 26.52%, rgba(55, 175, 117, 0.67) 46.09%, rgba(52, 176, 60, 0.934264) 100.45%, rgba(108, 174, 190, 0.615823) 100.61%, rgba(217, 217, 217, 0) 100.93%, rgba(57, 175, 134, 0.946006) 100.93%),url("https://i.ibb.co/fCsvRLK/blog-section-image.png")
+        object-fit: cover
+        background-size: cover
+        background-repeat: no-repeat
+        background-position: center center
+        background-attachment: fixed
+        width: 100vh
+        min-height: 100vh
+        padding-top: 800px
+        .container
+            display: flex
+            flex-direction: column
+            fklex-wrap: wrap
+            justify-content: center
+            align-items: center
+            justify-content: space-between
+            .headingText
+                color: #fff
+                font-style: 'Montserrat'
+                font-size: 75px
+                font-style: bold
+                font-weight: 700
+                text-align: center
+            .Heading
+                padding-top: 150px
+                width: 700px
+                height: 51px
+    .row
+        display: flex
+        flex-direction: column
+        flex-wrap: wrap
+        padding-top: 150px
+        gap: 80px
+        .cards-col
+            display: flex
+            flex-direction: column
+            flex-wrap: wrap
+            justify-content: space-around
+            .blog-cards
+                height: 550px
+                width: 500px
+            .card-body
+                display: flex
+                flex-direction: column
+                justify-content: center
+                align-items: center
+            .card-heading-text
+                font-size: 40px
+            .card-description-text
+                font-size: 30px
+                width: 420px
+                height: 300px
+                text-align: center