From c9e170bfad1c970f70a425086208612f52d0a009 Mon Sep 17 00:00:00 2001 From: dhruv Date: Tue, 14 Mar 2023 19:39:19 +0530 Subject: [PATCH] created blog grid Component for theme five --- .../blogGridComponentThemeFive.md | 25 +++ .../blogGridComponentThemeFive.stories.js | 33 +++ .../BlogGridComponentThemeFive/index.js | 85 ++++++++ .../BlogGridComponentThemeFive/styles.sass | 196 ++++++++++++++++++ 4 files changed, 339 insertions(+) create mode 100644 src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.md create mode 100644 src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.stories.js create mode 100644 src/components/BlogGridComponentThemeFive/index.js create mode 100644 src/components/BlogGridComponentThemeFive/styles.sass diff --git a/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.md b/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.md new file mode 100644 index 00000000..03789e39 --- /dev/null +++ b/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.md @@ -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 + +``` + +``` + +`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 \ No newline at end of file diff --git a/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.stories.js b/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.stories.js new file mode 100644 index 00000000..4f9c06b0 --- /dev/null +++ b/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.stories.js @@ -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=> + +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." + }, + ] +} + diff --git a/src/components/BlogGridComponentThemeFive/index.js b/src/components/BlogGridComponentThemeFive/index.js new file mode 100644 index 00000000..a2f8881f --- /dev/null +++ b/src/components/BlogGridComponentThemeFive/index.js @@ -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 ( +
+ +
+

{heading}

+
+ + + +
+ +
+ img +
+

{cardItems[0].cardHead}

+

{cardItems[0].cardPara}

+ +
+ +
+ +
+ + + + +
+
+ +
+
+ img2 +
+

{cardItems[1].cardHead}

+

{cardItems[1].cardPara}

+
+ +
+ +
+ + + + +
+
+
+ +
+ img3 +
+

{cardItems[2].cardHead}

+

{cardItems[2].cardPara}

+
+ +
+ +
+ + + + +
+
+ +
+ + +
+ + +
+ ) +} + +BlogGridThemeFive.propTypes = { + heading: PropTypes.string, + cardItems:PropTypes.array, +} \ No newline at end of file diff --git a/src/components/BlogGridComponentThemeFive/styles.sass b/src/components/BlogGridComponentThemeFive/styles.sass new file mode 100644 index 00000000..79883bcb --- /dev/null +++ b/src/components/BlogGridComponentThemeFive/styles.sass @@ -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