Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

created blog grid Component for theme five #444

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

created blog grid Component for theme five #444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
## Initial Setup

Hope you have successfully set up the project in your local system and install all dependencies

## About the mid-section Component

This is a resuasble component for displaying the information in a two grid system where the first section is to show main features in cards
and the second section provides a title and description. This Component is highly reusable and customizable via props.

## How to use the component

Import the component to `pages/index.js`
`import {BlogGridThemeFive} from "../components/BlogGridComponentThemeFive";`

## How to handle props to the component

```
<BlogGridThemeFive
heading="sample-Text"
cardItems=[{img:"sample url" , cardHead:"sample-heading",cardPara:"sample-text"}]
/>
```

`heading`: prop of type text is the mainText of the section
`countItems`: prop of type array is the array of cardItems each having an time and duration
33 changes: 33 additions & 0 deletions src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from "react";
import { BlogGridThemeFive } from "./index";
import "bootstrap/dist/css/bootstrap.css"

export default {
title: "theme 5/blogGridComponentThemeFive",
component: BlogGridThemeFive,
argTypes: {
heading: { control: "text" },
cardItems: { control: "array" },
}
}

export const blogGrid=args=> <BlogGridThemeFive {...args} />

blogGrid.args={
heading:"Our Latest Blogs",
cardItems:[
{ img:"https://i.ibb.co/BrCtNdj/Rectangle-42.png",
cardHead:"Los Angeles Institute",
cardPara:"Street Food Convention will showcase products like Packed food, beef and lamb, street food."
},
{ img:"https://i.ibb.co/7twyrrL/Rectangle-43.png",
cardHead:"Los Angeles Institute",
cardPara:"Street Food Convention will showcase products like Packed food, beef and lamb, street food."
},
{ img:"https://i.ibb.co/VJCmpYk/Rectangle-44.png",
cardHead:"Los Angeles Institute",
cardPara:"Street Food Convention will showcase products like Packed food, beef and lamb, street food."
},
]
}

85 changes: 85 additions & 0 deletions src/components/BlogGridComponentThemeFive/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React from 'react'
import PropTypes from "prop-types"
import "./styles.sass"
import { Container } from 'react-bootstrap'

export const BlogGridThemeFive = ({ heading, cardItems }) => {
return (
<div className='blogGridWrapper'>
<Container className='mainContainer'>
<div className='BlogsHeadDiv'>
<h1 className='heading'> {heading} </h1>
</div>



<div className='gridsDiv'>

<div className='grid'>
<img className='gridImg' src={cardItems[0].img} alt="img" />
<div className='gridContentDiv'>
<h3 className='gridHead'>{cardItems[0].cardHead}</h3>
<p className='gridPara'>{cardItems[0].cardPara}</p>

</div>

<div className='buttonDiv'>

<div className="arrow-div">
<svg viewBox="0 0 24 24" width="54" height="54">
<path fill="currentColor" d="M10.59 16.59L9.17 15.17L12 12.34L4.84 12.34C4.29 12.34 3.84 11.89 3.84 11.34C3.84 10.79 4.29 10.34 4.84 10.34L12 10.34L9.17 7.5L10.59 6.09L16.17 11.67L10.59 16.59Z" />
</svg>

</div>
</div>

</div>
<div className='grid'>
<img className='gridImg' src={cardItems[1].img} alt="img2" />
<div className='gridContentDiv'>
<h3 className='gridHead'>{cardItems[1].cardHead}</h3>
<p className='gridPara'>{cardItems[1].cardPara}</p>
</div>

<div className='buttonDiv'>

<div className="arrow-div">
<svg viewBox="0 0 24 24" width="54" height="54">
<path fill="currentColor" d="M10.59 16.59L9.17 15.17L12 12.34L4.84 12.34C4.29 12.34 3.84 11.89 3.84 11.34C3.84 10.79 4.29 10.34 4.84 10.34L12 10.34L9.17 7.5L10.59 6.09L16.17 11.67L10.59 16.59Z" />
</svg>

</div>
</div>
</div>

<div className='grid grid-center'>
<img className='gridImg' src={cardItems[2].img} alt="img3" />
<div className='gridContentDiv'>
<h3 className='gridHead'>{cardItems[2].cardHead}</h3>
<p className='gridPara'>{cardItems[2].cardPara}</p>
</div>

<div className='buttonDiv'>

<div className="arrow-div">
<svg viewBox="0 0 24 24" width="54" height="54">
<path fill="currentColor" d="M10.59 16.59L9.17 15.17L12 12.34L4.84 12.34C4.29 12.34 3.84 11.89 3.84 11.34C3.84 10.79 4.29 10.34 4.84 10.34L12 10.34L9.17 7.5L10.59 6.09L16.17 11.67L10.59 16.59Z" />
</svg>

</div>
</div>

</div>


</div>

</Container >
</div >
)
}

BlogGridThemeFive.propTypes = {
heading: PropTypes.string,
cardItems:PropTypes.array,
}
196 changes: 196 additions & 0 deletions src/components/BlogGridComponentThemeFive/styles.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
.blogGridWrapper
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")
background-repeat: no-repeat
min-height: 100vh
width: 100vw
background-size: cover
background-position: center
.mainContainer
padding-top: 50px
padding-left: 70px
padding-right: 20px
max-width: 100vw
.BlogsHeadDiv
margin-top: 30px
display: flex
justify-content: center
.heading
font-family: 'Montserrat'
font-style: normal
font-weight: 700
font-size: 64px
line-height: 78px
color: white
.gridsDiv
display: flex
flex-direction: row
gap: 20px
.grid
height: 504px
width: 422px
color: black
background-color: white
border-radius: 35px
.gridContentDiv
display: flex
flex-direction: column
justify-content: center
align-items: center
.gridHead
font-size: 30px
font-weight: 600
color: #6F6C6C
margin-top: 20px
margin-bottom: 20px
.gridPara
font-size: 24px
font-weight: 400
color: #717171
text-align: center
.buttonDiv
display: flex
justify-content: center
margin-top: 35px
.arrow-div
max-height: max-content
max-width: max-content
background: #51AD28
border: 1px solid #FFFFFF
border-radius: 50%
padding: 1px
color: white

@media (min-width:768px) and (max-width:1024px)
.blogGridWrapper
min-height: 130vh
width: 100vw
.mainContainer
padding-left: 25px
.gridsDiv
display: grid
grid-template-columns: repeat(2, 1fr)
column-gap: 20px
row-gap: 50px
justify-content: center
.grid-center
height: 454px
width: 340px
color: black
background-color: white
border-radius: 35px
grid-column-start: 1
grid-column-end: 3
margin-left: 200px
.grid
height: 454px
width: 340px
color: black
background-color: white
border-radius: 35px
.gridImg
width: 340px
.buttonDiv
display: flex
justify-content: center
margin-top: 0px
.arrow-div
max-height: max-content
max-width: max-content
background: #51AD28
border: 1px solid #FFFFFF
border-radius: 50%
padding: 1px
color: white
@media (max-width:768px)
.blogGridWrapper
min-height: 200vh
width: 100vw
.mainContainer
padding-left: 30px
.BlogsHeadDiv
.heading
font-family: 'Montserrat'
font-style: normal
font-weight: 700
font-size: 35px
line-height: 28px
color: white
margin-bottom: 20px
.gridsDiv
display: flex
gap: 40px
flex-direction: column
justify-content: center
.grid
height: 454px
width: 340px
color: black
background-color: white
border-radius: 35px
.gridImg
width: 340px
.buttonDiv
display: flex
justify-content: center
margin-top: 0px
.arrow-div
max-height: max-content
max-width: max-content
background: #51AD28
border: 1px solid #FFFFFF
border-radius: 50%
padding: 1px
color: white
@media (max-width:375px)
.blogGridWrapper
min-height: 200vh
width: 100vw
.mainContainer
padding-top: 30px
padding-left: 10px
.BlogsHeadDiv
.heading
font-family: 'Montserrat'
font-style: normal
font-weight: 700
font-size: 30px
line-height: 28px
color: white
margin-bottom: 20px
.gridsDiv
display: flex
gap: 40px
flex-direction: column
justify-content: center
.grid
height: 430px
width: 300px
color: black
background-color: white
border-radius: 35px
.gridContentDiv
.gridHead
font-size: 25px
font-weight: 600
color: #6F6C6C
margin-top: 20px
margin-bottom: 20px
.gridPara
font-size: 21px
font-weight: 400
color: #717171
text-align: center
.gridImg
width: 300px
.buttonDiv
display: flex
justify-content: center
margin-top: 0px
.arrow-div
max-height: max-content
max-width: max-content
background: #51AD28
border: 1px solid #FFFFFF
border-radius: 50%
padding: 1px
color: white