From a4663a2110b22b7e80b40d28b15263d3ac6aa947 Mon Sep 17 00:00:00 2001 From: Anoushka Jha <95405559+BabyElias@users.noreply.github.com> Date: Fri, 23 Dec 2022 19:37:12 +0530 Subject: [PATCH] Added SpeakerCard Component --- src/components/SpeakerCard/App.js | 52 ++++++++ src/components/SpeakerCard/App.sass | 122 ++++++++++++++++++ src/components/SpeakerCard/SpeakerCard.md | 34 +++++ .../SpeakerCard/SpeakerCard.stories.js | 63 +++++++++ 4 files changed, 271 insertions(+) create mode 100644 src/components/SpeakerCard/App.js create mode 100644 src/components/SpeakerCard/App.sass create mode 100644 src/components/SpeakerCard/SpeakerCard.md create mode 100644 src/components/SpeakerCard/SpeakerCard.stories.js diff --git a/src/components/SpeakerCard/App.js b/src/components/SpeakerCard/App.js new file mode 100644 index 00000000..6db10472 --- /dev/null +++ b/src/components/SpeakerCard/App.js @@ -0,0 +1,52 @@ +import React from "react" +import PropTypes from "prop-types" +import "./App.sass" + + +export const SpeakerCard = ({title , subText , cardData , emptyMessage}) => { + return( +
+
+

{title}

+

{subText}

+
+ {cardData?.length > 0 ? ( +
+ {cardData.map((item, index) => { + return ( + +
+ + + {item.title} +
+ +

{item.title}

+

{item.designation}

+ + +
+ +
+ + ) + })} +
+ ): ( +

{emptyMessage}

+ )} +
+ + ) +} + + +SpeakerCard.propTypes = { + title: PropTypes.string, + subText: PropTypes.string, + cardData: PropTypes.array, + emptyMessage: PropTypes.string, +} diff --git a/src/components/SpeakerCard/App.sass b/src/components/SpeakerCard/App.sass new file mode 100644 index 00000000..7bd3ecb5 --- /dev/null +++ b/src/components/SpeakerCard/App.sass @@ -0,0 +1,122 @@ + +@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap') + +.SpeakerCardHeadingWrapper + display: flex + flex-direction: column + align-items: center + justify-content: center + margin: auto + min-width: 600px + + + + + .SpeakerCardTitle + font-family: 'Montserrat' + font-style: normal + font-weight: 500 + text-align: center + font-size: 20px + line-height: 39px + text-transform: uppercase + color: #51AD28 + margin: 20px + align-items: center + justify-content: center + + + + .SpeakerCardSubText + font-family: 'Montserrat' + font-style: normal + margin-bottom: 80px + font-weight: 600 + font-size: 45px + text-align: center + + color: #808080 + align-items: center + justify-content: center + + + + + +.cardItem + font-family: inter + display: grid + grid-gap: 1rem + grid-template-rows: auto + margin: auto + align-items: center + justify-content: center + padding: 0 1rem + grid-template-columns: repeat(3,1fr) + min-width: 600px + max-width: 1300px + @media( max-width: 1300px) + grid-template-columns: repeat(3,1fr) + @media( max-width: 1200px) + grid-template-columns: repeat(2,1fr) + @media (max-width: 760px) + grid-template-columns: repeat(1,1fr) + + + .CardTextOver + position: relative + align-items: center + justify-content: center + margin: auto + + + .img + width: 100% + height: 100% + + + + .caption + display: flex + flex-direction: column + + height: auto + position: absolute + bottom: 33.36px + left: 0 + padding: 0 10px + + max-width: 100% + + + + .caption1 + + padding: 0 1rem + + + + position: relative + + font-family: 'Montserrat' + font-style: normal + font-weight: 700 + font-size: 32px + line-height: 39px + color: #FFFFFF + width: 272px + height: 47.48px + .caption2 + + padding: 0 1rem + margin: 0 + position: relative + font-family: 'Montserrat' + font-style: normal + font-weight: 700 + line-height: 29px + font-size: 24px + width: 126.32px + height: 39.78px + + color: #51AD28 diff --git a/src/components/SpeakerCard/SpeakerCard.md b/src/components/SpeakerCard/SpeakerCard.md new file mode 100644 index 00000000..3ae23032 --- /dev/null +++ b/src/components/SpeakerCard/SpeakerCard.md @@ -0,0 +1,34 @@ +## Initial Setup + +Hope you have successfully set up the project in your local system and install all dependencies + +## About the SpeakerCard Component + +This is a reuasble component for displaying data related to conferences in card format. This Component is highly reusable and customizable via props. + +## How to use the component + +Import the component to `pages/index.js` + +`import SpeakerCard from "../components/SpeakerCard";` + +## How to handle props to the component + +``` + +``` +`title` prop is the title at the beginning of the component +`subText` prop is the sub heading or additional info related to the content of component +`emptyMessage` prop is the message to be displayed when there is no card data +`cardData` prop is an array containing data to be displayed in cards ( the object inside the array contains cardtitle , card content and image source) diff --git a/src/components/SpeakerCard/SpeakerCard.stories.js b/src/components/SpeakerCard/SpeakerCard.stories.js new file mode 100644 index 00000000..0bf9e615 --- /dev/null +++ b/src/components/SpeakerCard/SpeakerCard.stories.js @@ -0,0 +1,63 @@ +import React from "react" + +import { SpeakerCard } from "./App" + + + + +export default { + title: "General/SpeakerCardCard", + component: SpeakerCard, + argTypes: { + title: { control: "text" }, + subText: { control: "text"}, + cardData: { control: "array"}, + emptyMessage: { control: "text"}, + }, +} + +export const speakerCard = args => + +speakerCard.args = { + title: "Speakers", + subText: "Meet Our Speakers", + cardData: [ + { + image:"https://i.ibb.co/tCsR9rn/img1.png", + title:"Albert Barnes", + designation:"Founder", + + }, + { + image:"https://i.ibb.co/rG8Cfb0/Rectangle-26.png" , + title:"Albert Barnes", + designation:"Founder", + + }, + { + image:"https://i.ibb.co/tZSxZMn/Rectangle-27.png", + title:"Albert Barnes", + designation:"Founder", + + }, + { + image: "https://i.ibb.co/86g8j6C/Rectangle-28.png", + title:"Albert Barnes", + designation:"Founder", + + }, + { + image:"https://i.ibb.co/tHNgTKB/Rectangle-29.png", + title:"Albert Barnes", + designation:"Founder", + + }, + { + image:"https://i.ibb.co/BcCd5D5/Rectangle-30.png", + title:"Albert Barnes", + designation:"Founder", + + }, + ], + emptyMessage:"No data Available", +}