forked from scorelab/Webiu
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Issue scorelab#416] Add blogGrid component with responsive design
- Loading branch information
1 parent
76b9ff6
commit d40acf0
Showing
41 changed files
with
14,400 additions
and
54,779 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -82,4 +82,4 @@ | |
"bugs": { | ||
"url": "https://github.com/scorelab/Webiu/issues" | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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." | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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">⟶</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 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
Oops, something went wrong.