Create a banner on ReactPlay main site to Showcase the upcoming initi…

…ative (reactplay#897)

* Dynamic activity banner info to display in react play.

* Chaning folder structure.

* Updating right size images.

* Adding countdown timer banner.

* Fixing moblie view and env check issues.

* Showing the counter with padding 0

---------

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

.env.development

@@ -3,3 +3,5 @@ REACT_APP_NHOST_VERSION=v1
 REACT_APP_NHOST_ENDPOINT=graphql
 REACT_APP_PLAY_WEB_SVC=https://api.reactplay.io/.netlify/functions/server
 DISABLE_ESLINT_PLUGIN=true
+REACT_APP_ACTIVITIES_ON=false
+REACT_APP_ACTIVITY_ID=2playsamonth

package.json

@@ -35,6 +35,7 @@
  "react": "^18.0.0",
  "react-codemirror2": "^7.2.1",
  "react-confetti": "^6.1.0",
+ "react-countdown": "^2.3.5",
  "react-dom": "^18.0.0",
  "react-error-boundary": "^3.1.4",
  "react-helmet": "^6.1.0",

src/common/activities/hackathon/HackathonBanner.jsx → src/common/activities/ActivityBanner.jsx

@@ -2,35 +2,30 @@ import React from 'react';
 import { BsGithub } from 'react-icons/bs';
 import { FiStar } from 'react-icons/fi';
 import { IoIosRocket } from 'react-icons/io';
-import HackerBannerImage from './img-hero-coders.png';
-import HRPLogo from './Logo.png';
 import useFetch from 'common/hooks/useFetch';
-import './hackathonBanner.css';
+import { activities } from './activitiesConfig';
+import './activityBanner.css';
 
-function HackathonBanner() {
+function ActivityBanner({ currentActivity }) {
  const { data } = useFetch('https://api.github.com/repos/reactplay/react-play');
+ const activity = activities.filter((a) => a.id === currentActivity);
+ const { name, subtitle, description, logo, heroImage } = activity[0];
 
  return (
  <div className="flex flex-col lg:flex-row justify-between w-[98%] max-w-[600px] md:max-w-[992px] lg:max-w-[1200px] mt-16 m-auto text-white">
  <div className="w-[100%] lg:w-[60%] text-center lg:text-left">
  <span className="text-lg md:text-xl lg:text-2xl">ReactPlay Presents</span>
  <h1 className=" uppercase text-5xl md:text-6xl lg:text-8xl font-bold text-cyan-300 text-center lg:text-left">
- <span className="sr-only">HACK-R-PLAY</span>
+ <span className="sr-only">{name}</span>
  <img
  alt="HRP Logo"
  className="w-10/12 md:w-64 lg:w-auto ml-auto mr-auto lg:ml-0 lg:mr-0 lg:inline-block"
- src={HRPLogo}
+ src={require(`${logo}`)}
  />
  </h1>
  <div className="my-2 md:my-4 md:text-xl">
- <p className="text-2xl font-bold mt-8 mb-4 text-center lg:text-left">
- Developers and Hacking are inseparable!
- </p>
- <p className="text-base opacity-50 mt-4 mb-8 text-center lg:text-left">
- ReactPlay brings you the opportunity to take part in the Hackathon and learn from it.
- Showcase your mindblowing ideas, build projects, and create content - there are also
- chances to win exciting prizes.
- </p>
+ <p className="text-2xl font-bold mt-8 mb-4 text-center lg:text-left">{subtitle}</p>
+ <p className="text-base opacity-50 mt-4 mb-8 text-center lg:text-left">{description}</p>
  </div>
  <div className="">
  <div className="body-c2a body-c2a-hackathon">
@@ -61,10 +56,10 @@ function HackathonBanner() {
  </div>
  </div>
  <div>
- <img alt="" className="hackathon-banner-image" src={HackerBannerImage} />
+ <img alt="" className="hackathon-banner-image" src={require(`${heroImage}`)} />
  </div>
  </div>
  );
 }
 
-export default HackathonBanner;
+export default ActivityBanner;

src/common/activities/activitiesConfig.js

@@ -0,0 +1,20 @@
+export const activities = [
+ {
+ id: 'hackrplay',
+ name: 'HACK-R-PLAY',
+ subtitle: 'Developers and Hacking are inseparable!',
+ description:
+ 'ReactPlay brings you the opportunity to take part in the Hackathon and learn from it. Showcase your mindblowing ideas, build projects, and create content - there are also chances to win exciting prizes.',
+ logo: './hackathon/Logo.png',
+ heroImage: './hackathon/img-hero-coders.png'
+ },
+ {
+ id: '2playsamonth',
+ name: '#2Plays-A-Month',
+ subtitle: 'Learning is a journey than a destination.',
+ description:
+ 'ReactPlay brings you an opportunity to participate in the month-long drive to learn and contribute to Open Source. Join the #2PlaysAMonth and build two projects(plays) in the month of February. You will learn from expert code reviews while contributing to Open Source - you may also win some exciting prizes.',
+ logo: './2playsamonth/BannerLogo.png',
+ heroImage: './2playsamonth/HeroCoders.png'
+ }
+];

src/common/header/Header.jsx

@@ -3,6 +3,7 @@ import SearchPlays from 'common/search/SearchPlays';
 import HeaderNav from './HeaderNav';
 import { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
+import Countdown from 'react-countdown';
 import './header.css';
 
 const Header = () => {
@@ -20,7 +21,8 @@ const Header = () => {
  const [showHideBits, setShowHideBits] = useState({
  showSearch: false,
  showBrowse: false,
- setHeaderStyle: true
+ setHeaderStyle: true,
+ showActivityTimer: false
  });
 
  useEffect(() => {
@@ -31,7 +33,8 @@ const Header = () => {
  setShowHideBits({
  showSearch: false,
  showBrowse: true,
- setHeaderStyle: false
+ setHeaderStyle: false,
+ showActivityTimer: true
  });
  } else if (pathName === '/ideas' || pathName === '/tech-stacks') {
  setShowHideBits({
@@ -54,26 +57,64 @@ const Header = () => {
  }
  }, [pathName]);
 
+ const Completionist = () => (
+ <div className="activity-timer-banner">#2PlaysAMonth event has been started 🚀.</div>
+ );
+
+ // Renderer callback with condition
+ const activityTimerRenderer = ({ days, hours, minutes, seconds, completed }) => {
+ const paddedDays = days < 10 ? `0${days}` : days;
+ const paddedHours = hours < 10 ? `0${hours}` : hours;
+ const paddedMins = minutes < 10 ? `0${minutes}` : minutes;
+ const paddedSecs = seconds < 10 ? `0${seconds}` : seconds;
+
+ if (completed) {
+ return <Completionist />;
+ } else {
+ return (
+ <div className="activity-timer-banner">
+ #2PlaysAMonth event starts in{' '}
+ <span style={{ minWidth: '72px', marginLeft: '4px' }}>
+ {paddedDays}:{paddedHours}:{paddedMins}:{paddedSecs}
+ </span>{' '}
+ 🚀.
+ <a
+ className="event-link"
+ href="https://www.stack-stream.com/case/reactplay-2playsamonth-event-launch"
+ target="_blank"
+ >
+ Join the Launch
+ </a>
+ </div>
+ );
+ }
+ };
+
  return (
- <header
- className={`app-header ${showHideBits.setHeaderStyle ? '' : ' app-header-home'}`}
- data-testid="app-header"
- >
- <span>
- <Link className="app-logo" data-testid="app-logo" to="/">
- <span className="sr-only">React Play</span>
- </Link>
- </span>
- <div className="app-header-search">
- {showHideBits.showSearch && (
- <>
- <SearchPlays reset={reset} />
- <FilterPlays reset={reset} />
- </>
- )}
- </div>
- <HeaderNav showBrowse={showHideBits.showBrowse} />
- </header>
+ <>
+ <header
+ className={`app-header ${showHideBits.setHeaderStyle ? '' : ' app-header-home'}`}
+ data-testid="app-header"
+ >
+ <span>
+ <Link className="app-logo" data-testid="app-logo" to="/">
+ <span className="sr-only">React Play</span>
+ </Link>
+ </span>
+ <div className="app-header-search">
+ {showHideBits.showSearch && (
+ <>
+ <SearchPlays reset={reset} />
+ <FilterPlays reset={reset} />
+ </>
+ )}
+ </div>
+ <HeaderNav showBrowse={showHideBits.showBrowse} />
+ </header>
+ {process.env.REACT_APP_ACTIVITIES_ON === 'true' && showHideBits.showActivityTimer && (
+ <Countdown date={new Date(1675209600000)} renderer={activityTimerRenderer} />
+ )}
+ </>
  );
 };
 

src/common/header/header.css

@@ -53,6 +53,10 @@
  margin-right: 0;
  background-position: center center;
  }
+ .activity-timer-banner {
+ display: flex;
+ flex-direction: column;
+ }
 }
 
 .navbar-toggler {
@@ -481,3 +485,21 @@
  font-weight: var(--fw-bold);
  color: var(--color-neutral-90);
 }
+
+.activity-timer-banner {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fad900;
+ min-height: 32px;
+ position: fixed;
+ z-index: 99;
+ margin-top: 56px;
+ width: 100%;
+}
+
+.event-link {
+ text-decoration: underline;
+ margin-left: 5px;
+ cursor: pointer;
+}

src/common/home/Home.jsx

@@ -12,7 +12,7 @@ import ExtendedFooter from 'common/footer/ExtendedFooter';
 import { useSearchContext } from 'common/search/search-context';
 import { Tweet } from 'react-twitter-widgets';
 import Spinner from '../spinner/spinner';
-import HackathonBanner from 'common/activities/hackathon/HackathonBanner';
+import ActivityBanner from 'common/activities/ActivityBanner';
 import DefaultBanner from 'common/defaultBanner/DefaultBanner';
 
 const Home = () => {
@@ -49,6 +49,9 @@ const Home = () => {
  // Function to handle the tweets loading state after tweets have been loaded.
  const tweetLoadHandler = () => setTweetsLoading(false);
 
+ // eslint-disable-next-line no-console
+ console.log('process.env.REACT_APP_ACTIVITIES_ON', process.env.REACT_APP_ACTIVITIES_ON);
+
  return (
  <main>
  <section className="app-home-body">
@@ -58,7 +61,11 @@ const Home = () => {
  <Flower className="home-bg-graphics-lg" />
  </div>
  <div className="app-home-body-content">
- {!process.env.REACT_APP_ACTIVITIES_ON ? <DefaultBanner /> : <HackathonBanner />}
+ {process.env.REACT_APP_ACTIVITIES_ON && process.env.REACT_APP_ACTIVITIES_ON === 'true' ? (
+ <ActivityBanner currentActivity={process.env.REACT_APP_ACTIVITY_ID} />
+ ) : (
+ <DefaultBanner />
+ )}
  </div>
  </section>
  <section className="home-features">