scorelab · ShwetKhatri2001 · Dec 4, 2022
diff --git a/src/components/Schedule/Schedule.md b/src/components/Schedule/Schedule.md
@@ -0,0 +1,29 @@
+## Initial Setup
+
+Hope you have successfully set up the project in your local system and install all dependencies
+
+## About the Schedule Component
+
+This is a reusable component for the schedule built from scratch. It could be used to display schedule for scorelab events and workshops. The component is highly reusable and customizable via props.
+
+## How to use the component
+
+Import the component to `pages/index.js`
+`import {Schedule} from "../components/Schedule";`
+
+## How to handle props to the component
+
+```
+<Schedule
+   subText="OUR TIMETABLE"
+   mainText="SCHEDULE PLAN"
+   daysList={[{day: "Monday", date: "October 20, 2022"}]}
+   itemsList={[{title: "sample mainText", speaker: "sample speaker name", position: "sample position",
+                imageUrl: "sample image url", pageUrl: "sample page url"}]}
+/>
+```
+
+`subText` prop of type text is the subtitle for the schedule
+`mainText` prop of type text is the main title for schedule
+`daysList` prop of type array having all weekdays and dates for the schedule
+`itemsList` prop is the array of items which can be about a workshop or event each having title, subtitle and url.
diff --git a/src/components/Schedule/Schedule.stories.js b/src/components/Schedule/Schedule.stories.js
@@ -0,0 +1,63 @@
+import React from "react"
+
+import { Schedule } from "./index"
+
+import "bootstrap/dist/css/bootstrap.css"
+
+export default {
+  title: "Home/Schedule",
+  component: Schedule,
+  argTypes: {
+    subText: { control: "text" },
+    mainText: { control: "text" },
+    daysList: { control: "array" },
+    itemsList: { control: "array" },
+  },
+}
+
+export const schedule = args => <Schedule {...args} />
+
+schedule.args = {
+  subText: "OUR TIMETABLE",
+  mainText: "SCHEDULE PLAN",
+  daysList: [
+    {
+      day: "Monday",
+      date: "October 20, 2022",
+    },
+    {
+      day: "Tuesday",
+      date: "October 21, 2022",
+    },
+    {
+      day: "Wednesday",
+      date: "October 22, 2022",
+    },
+  ],
+  itemsList: [
+    {
+      title: "Deep Dive into SCoRe lab",
+      speaker: "Gary Armstrong",
+      position: "Researcher at Score lab",
+      imageUrl:
+        "https://user-images.githubusercontent.com/56475750/205447574-ff4f2bfa-fb27-448b-93e6-a9090ada4487.png",
+      pageUrl: "https://scorelab.org/",
+    },
+    {
+      title: "Kickstart your open-source journey",
+      speaker: "Gary Armstrong",
+      position: "Researcher at Score lab",
+      imageUrl:
+        "https://user-images.githubusercontent.com/56475750/205447574-ff4f2bfa-fb27-448b-93e6-a9090ada4487.png",
+      pageUrl: "https://scorelab.org/",
+    },
+    {
+      title: "Understanding Score lab projects ",
+      speaker: "Gary Armstrong",
+      position: "Researcher at Score lab",
+      imageUrl:
+        "https://user-images.githubusercontent.com/56475750/205447574-ff4f2bfa-fb27-448b-93e6-a9090ada4487.png",
+      pageUrl: "https://scorelab.org/",
+    },
+  ],
+}
diff --git a/src/components/Schedule/index.js b/src/components/Schedule/index.js
@@ -0,0 +1,77 @@
+import React from "react"
+import PropTypes from "prop-types"
+import "./style.sass"
+import { Container } from "react-bootstrap"
+
+export const Schedule = ({ subText, mainText, daysList, itemsList }) => {
+  return (
+    <div className="schedule-container">
+      <Container>
+        <div className="scheduleHeadingsDiv">
+          <p className="scheduleSubText">{subText}</p>
+          <h1 className="scheduleMainHeading">{mainText}</h1>
+        </div>
+        {daysList?.length > 0 ? (
+          <div className="datesList">
+            {daysList.map((dayObj, index) => (
+              <div className="dayinfo">
+                <h4 className="day">{dayObj.day}</h4>
+                <p className="date">{dayObj.date}</p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="emptyMessage"> No Scheduled Dates </p>
+        )}
+        {itemsList?.length > 0 ? (
+          <div className="eventsList">
+            {itemsList.map(item => (
+              <div className="eventContainer">
+                <div className="imageContainer">
+                  <img
+                    src={item.imageUrl}
+                    alt={item.speaker}
+                    className="speakerImage"
+                  />
+                </div>
+                <div className="eventData">
+                  <h5 className="eventTitle">{item.title}</h5>
+                  <p className="eventSubtitle">
+                    <span>
+                      by<span className="speakerName">{item.speaker}</span>
+                    </span>
+                    <span className="slash">/</span>
+                    <span className="speakerPosition">{item.position}</span>
+                  </p>
+                  <a
+                    href={item.pageUrl}
+                    className="viewMoreLink tabletLink"
+                    target="_blank"
+                  >
+                    <button className="viewMoreBtn">View More</button>
+                  </a>
+                </div>
+                <a
+                  href={item.pageUrl}
+                  className="viewMoreLink nonTabletLink"
+                  target="_blank"
+                >
+                  <button className="viewMoreBtn">View More</button>
+                </a>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="emptyMessage"> No Scheduled Plans </p>
+        )}
+      </Container>
+    </div>
+  )
+}
+
+Schedule.propTypes = {
+  subText: PropTypes.string,
+  mainText: PropTypes.string,
+  daysList: PropTypes.array,
+  itemsList: PropTypes.array,
+}
diff --git a/src/components/Schedule/style.sass b/src/components/Schedule/style.sass
@@ -0,0 +1,177 @@
+@import '../../styles/variables.sass'
+
+.schedule-container
+  background-color: #1E4F7C
+  width: 100%
+  padding: 30px 0px
+  height: fit-content
+
+
+.scheduleHeadingsDiv
+  padding: 10px
+  .scheduleSubText
+    font-family: 'Montserrat'
+    font-style: normal
+    font-weight: 700
+    text-align: center
+    font-size: 20px
+    line-height: 20px
+    text-transform: uppercase
+    color: #51AD28
+    @media #{$sm-and-less}
+      font-weight: 500
+  .scheduleMainHeading
+    font-family: 'Montserrat'
+    font-style: normal
+    text-align: center
+    font-weight: 700
+    font-size: 45px
+    text-transform: uppercase
+    color: #FFF
+    @media #{$sm-and-less}
+      font-size: 30px
+      font-weight: 500
+
+.datesList
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-evenly
+  align-items: center
+  width: 100%
+  background: rgba(217, 217, 217, 0.12)
+  border: 1px solid #FFFFFF
+  color: #FFFFFF
+  border-radius: 30px
+  width: 75%
+  margin: 0 auto
+  @media #{$sm-and-less}
+    width: 100%
+
+.dayinfo 
+  height: 100px
+  display: flex
+  padding: 10px 20px
+  flex-direction: column
+  align-items: center
+  justify-content: center
+
+.dayinfo .day 
+  color: #FFFFFF
+
+.dayinfo .date
+  margin-bottom: 12px
+
+.eventContainer
+  display: flex
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  background: rgba(217, 217, 217, 0.12)
+  border: 1px solid #FFFFFF
+  color: #FFFFFF
+  border-radius: 30px
+  padding: 15px
+  margin-top: 20px
+  @media #{$sm-and-less}
+    flex-direction: column
+
+.imageContainer
+  width: 15%
+  display: flex
+  justify-content: center
+  align-items: center
+  @media (max-width: 992px)
+    width: 25%
+  @media #{$sm-and-less}
+    width: 100%
+
+.speakerImage
+  width: 100px
+  height: 100px
+  margin: 0 10px
+  border-radius: 50%
+
+.eventData
+  justify-content: center
+  width: 65%
+  padding: 0 15px
+  padding-top: 10px
+  @media (max-width: 992px)
+    width: 75%
+  @media #{$sm-and-less}
+    width: 100%
+    text-align: center
+    margin-top: 15px
+
+.eventTitle
+  color: #FFFFFF
+  @media #{$sm-and-less}
+   font-size: 18px
+
+.eventSubtitle
+  color: #B7B7B7
+  font-weight: 500
+  display: flex
+  @media (max-width: 992px)
+    font-size: 16px
+    flex-direction: column
+
+.eventTitle, .eventSubtitle
+  overflow: hidden
+  text-overflow: ellipsis
+  line-height: 1.75rem
+
+.eventSubtitle .speakerName
+  color: #FFFFFF
+  font-weight: 600
+  margin: 0 5px
+
+.eventSubtitle .slash
+  margin: 0 5px
+  @media (max-width: 992px)    
+    display: none
+
+.eventSubTitle .speakerPosition
+  @media #{$sm-and-less}
+    display: block
+
+.viewMoreLink
+  text-decoration: none
+  color: #FFFFFF
+  display: flex
+  align-items: center
+  justify-content: center
+  &:hover
+    color: #FFFFFF
+
+.viewMoreBtn
+  background: linear-gradient(90deg, #14F195 0.8%, rgba(50, 225, 188, 0.847095) 49.87%, rgba(34, 174, 234, 0.930101) 99.97%,rgba(75, 212, 219, 0.720458) 99.98%, rgba(86, 206, 233, 0.666667) 99.99%, rgba(217, 217, 217, 0) 100%)
+  width: 150px
+  height: 50px
+  font-size: 20px
+  border: none
+  border-radius: 50px
+  outline: none
+  @media (max-width: 992px)
+    font-size: 16px
+
+.viewMoreLink.tabletLink
+  display: none
+  @media (max-width: 992px)
+    display: block
+  @media #{$sm-and-less}  
+    display: none
+
+.viewMoreLink.nonTabletLink
+  display: block
+  @media (max-width: 992px)
+    display: none
+  @media #{$sm-and-less}  
+    display: block
+
+.emptyMessage
+  font-family: 'Montserrat'
+  font-style: normal
+  text-align: center
+  font-size: 25px
+  color: #B2B6BB