Get motivated play (reactplay#745)

* Unline moved to the back of the text

* motivate me play added

* header removed
Review issues resolved

* preview added

* css file name changed

* Compresed imaged

Co-authored-by: Tapas Adhikary <[email protected]>

src/plays/motivate-me/MotivateMe.js

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+import { quotes as Quotes } from './data';
+import Header from './components/header';
+import './motivate_me_style.css';
+import Container from './container';
+import PlayHeader from 'common/playlists/PlayHeader';
+function GetMotivated(props) {
+ const [author, setAuthor] = useState('');
+ return (
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="motivate-me-main">
+ <Header />
+ <Container author={author} handleAuthorChange={(value)=> setAuthor(value)} Quotes={Quotes} />
+ </div>
+ </div>
+ );
+}
+
+export default GetMotivated;

src/plays/motivate-me/README.md

@@ -0,0 +1,23 @@
+<img src="./assets/background1.jpg" alt="30 Seconds of Interviews logo">
+
+## Foreword
+
+When you hit your low point motivation is what you need. This play is designed to do that.
+
+## Play Demographic
+
+- Language: JavaScript
+- Level: Intermediate
+
+## Creator Information
+
+- User: Hamza Ali
+- Github Link: https://github.com/hat52
+- Blog: null
+
+## What will you learn?
+
+- Functional Component.
+- Hooks
+- JavaScript array methods
+- JavaScript basic

src/plays/motivate-me/components/cards/index.css

@@ -0,0 +1,41 @@
+.card-container-main{
+ position: relative;
+ width: 100%;
+ min-height: 100px;
+ border-radius: 15px;
+ box-shadow: 0 0.4rem 0.8rem -0.1rem rgb(0 32 128 / 10%), 0 0 0 1px #f0f2f7;
+ padding: 0 48px;
+ overflow: hidden;
+ padding-bottom: 0;
+ padding-top: 15px;
+}
+.motivate-me-question__tag {
+ position: absolute;
+ top: 0;
+ right: -65px;
+ transform: rotate(45deg);
+ color: #fff;
+ width: 125px;
+ height: 40px;
+}
+.motivate-me-even_div{
+ background: linear-gradient(130deg,#FDC5B8,#FDC5B8);
+}
+.motivate-me-odd_div{
+ background: linear-gradient(130deg,#45CCDF,#45CCDF);
+}
+.motivate-me-quote{
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 1.25;
+ text-align: center;
+}
+.motivate-me-author-name {
+ position: absolute;
+ left: 50%;
+ bottom:5%;
+ color:#45CCDF;
+ transform: translateX(-50%);
+ font-weight: bold;
+ font-style: italic;
+}

src/plays/motivate-me/components/cards/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.css'
+export default function Card ({index,author,quote}) {
+ return(
+ <div className='card-container-main' key={index}>
+ <div className={`motivate-me-question__tag ${index % 2 === 0?'motivate-me-even_div':'motivate-me-odd_div'}`}></div>
+ <p className="motivate-me-quote">
+ {quote}
+ </p>
+ <div className="motivate-me-author-name">
+ {author}
+ </div>
+
+ </div>
+ )
+}

src/plays/motivate-me/components/header/index.css

@@ -0,0 +1,7 @@
+.motivate-me-header {
+ position: relative;
+ height: 650px;
+ width: 100%;
+ background: url('../../assets/background1.jpg');
+ background-size: 100% 100%;
+}

src/plays/motivate-me/components/header/index.js

@@ -0,0 +1,4 @@
+import "./index.css"
+export default function Header () {
+ return <div className="motivate-me-header"></div>
+}

src/plays/motivate-me/components/search-bar/index.css

@@ -0,0 +1,104 @@
+/* search bar */
+.motivate-me-search_bar{
+ /* background-color:yellow; */
+ /* height: 20px; */
+ position:relative;
+ width: 100%;
+ }
+ .motivate-me-Dropdown_items{
+ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
+ color: #51526f;
+ line-height: 1.6;
+ box-sizing: inherit;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ position: absolute;
+ background: #fff;
+ top: 100%;
+ visibility: hidden;
+ box-shadow: 0 16px 24px -4px rgba(0,32,128,.2);
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ width: 200px;
+ border: 1px solid #c8cbf2;
+ overflow: hidden;
+ border-radius: 4px;
+ transition: transform .2s,opacity .2s,visibility .2s;
+ opacity: 0;
+ transform: rotateX(-20deg) scale(.97);
+ will-change: transform;
+ transform-origin: top left;
+ }
+
+ .motivate-me-Dropdown_items{
+ tab-size: 4;
+ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
+ color: #51526f;
+ line-height: 1.6;
+ visibility: hidden;
+ list-style-type: none;
+ box-sizing: inherit;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ }
+ .motivate-me-Dropdown_button{
+ padding: 12px 15px;
+ border-radius: 0 0 4px 4px;
+ border-top: none;
+ font-size: 15px;
+ width: 100%;
+ transition: box-shadow .12s;
+ }
+ .motivate-me-btn{
+ background: #fff;
+ border: none;
+ color: #8385aa;
+ border: 1px solid #c8cbf2;
+ font-weight: 700;
+ font-size: 17px;
+ padding: 8px 16px;
+ transition: background .12s,color .12s,border-color .12s;
+ outline: 0;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .motivate-me-Dropdown_label{
+ display: block;
+ font-weight: 700;
+ background: linear-gradient(170deg,#92bbff,#4485f1);
+ color: #fff;
+ padding: 6px 20px;
+ border-radius: 4px 4px 0 0;
+ text-align: center;
+ font-size: 15px;
+ }
+ .motivate-me-Dropdown:hover .motivate-me-Dropdown_items {
+ visibility: visible;
+ opacity: 1;
+ transform: rotateX(0) scale(1);
+ }
+ .motivate-me-Dropdown{
+ position: relative;
+ perspective: 600px;
+ z-index: 2;
+ min-height: 90px;
+ width: 20%;
+ }
+ .motivate-me-Dropdown_items li {
+ padding: 12px 0;
+ text-align: center;
+ font-size: 18px;
+ cursor: pointer;
+ color: inherit;
+ transition: background .1s,color .1s;
+ }
+ .motivate-me-Dropdown_items li:hover{
+ background: linear-gradient(130deg,#FDC5B8,#FDC5B8);;
+ color: #fff;
+ }
+
+ .motivate-me-selected_author{
+ background: linear-gradient(130deg,#45CCDF,#45CCDF);;
+ color: #fff !important;
+ }

src/plays/motivate-me/components/search-bar/index.js

@@ -0,0 +1,25 @@
+import './index.css'
+export default function SearchBar ({Quotes,author,setAuthor}) {
+ return (
+ <div className="motivate-me-search_bar">
+ <div className="motivate-me-Dropdown">
+ <div>
+ <label className="motivate-me-Dropdown_label">Author</label>
+ </div>
+ <button className="motivate-me-btn motivate-me-Dropdown_button">
+ <span>All</span>
+ <i><svg xmlns="http:https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-down btn__icon"><polyline points="6 9 12 15 18 9"></polyline></svg></i>
+ </button>
+ <ul className="motivate-me-Dropdown_items">
+ {
+ Object.keys(Quotes).map((name,index)=>{
+ return(
+ <li key={`${name}${index}`} onClick={()=>setAuthor(name)} className={`${author === name&&"motivate-me-selected_author"}`}>{name}</li>
+ )
+ })
+ }
+ </ul>
+ </div>
+ </div>
+ )
+}

src/plays/motivate-me/container/index.js

@@ -0,0 +1,19 @@
+import Card from '../components/cards';
+import SearchBar from '../components/search-bar';
+import './motivational_quote_card_container_main.css';
+export default function Container({ Quotes, handleAuthorChange, author }) {
+ return (
+ <div className="card-main-container">
+ <SearchBar author={author} setAuthor={handleAuthorChange} Quotes={Quotes} />
+ {author === ''
+ ? Object.keys(Quotes).map((name) => {
+ return Quotes[name].map((quote, index) => {
+ return <Card key={index} index={index} quote={quote} author={name} />;
+ });
+ })
+ : Quotes[author].map((quote, index) => {
+ return <Card key={index} index={index} quote={quote} author={author} />;
+ })}
+ </div>
+ );
+}

src/plays/motivate-me/container/motivational_quote_card_container_main.css

@@ -0,0 +1,8 @@
+.card-main-container{
+ display:flex;
+ flex-direction: column;
+ margin-bottom:5%;
+ padding-top:5%;
+ gap:25px;
+ width:60%
+}

src/plays/motivate-me/data.js

@@ -0,0 +1,37 @@
+export const quotes = {
+ 'Muhammad Ali Jinnah': [
+ 'With faith, discipline and selfless devotion to duty, there is nothing worthwhile that you cannot achieve',
+ 'Think 100 time before you take a decision, but once that decision is taken, stand by it as one man',
+ 'Failure is a word unknown to me',
+ 'Expect the best, prepare for the worst',
+ 'Its not the life that matters, but the courage, fortitude and determination you bring to it'
+ ],
+ 'Abraham Lincoln': [
+ 'Always bear in mind that your resolution to succeed is more important than any other one thing',
+ 'My concern is not whether God is on our side; my concern is to be on the side of God, because God is always right',
+ 'Most folks are as happy as they make their lives to be',
+ "And at the end, its not the years in your life that count. It's the life in your years"
+ ],
+ 'Benjamin Franklin': [
+ 'An investment in knowledge pays the best interest',
+ "Some people die at 25 and aren't buried till 75",
+ 'By failing to prepare, you are preparing to fail'
+ ],
+ 'Winston Churchill': [
+ 'Success is not final, failure is not fatal, it is the courage to continue that counts',
+ 'We make a living by what we get, but we make a life by what we give',
+ 'Courage is what it takes to stand up and speak; courage is also what it takes to sit down and listen',
+ 'To improve is to change; to be perfect is to change often'
+ ],
+ 'Martin Luther King Jr': [
+ 'Love is the only force capable of transforming an enemy to a friend',
+ "Faith is taking the first step, even if you don't see the whole staircase",
+ "Darkness can't drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that",
+ 'Even if I knew that tomorrow the world would go to pieces, I would still plant my apple tree'
+ ],
+ 'Dalai Lama': [
+ 'Opportunities are like sunrises, If you wait too long, you miss them',
+ 'Silence is sometimes the best answer',
+ 'Remember that the bes relationship is the one in which your love for each other exceeds the need for each other.'
+ ]
+};

src/plays/motivate-me/motivate_me_style.css

@@ -0,0 +1,6 @@
+.motivate-me-main {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}