✨ Now countdown timer has got the header

src/meta/play-meta.js

@@ -40,7 +40,8 @@ const plays = [
  path: '/plays/countdown',
  level: 'Intermediate',
  tags: 'Schedule, Component Structure, Hooks, Custom Hooks',
- github: 'atapas'
+ github: 'atapas',
+ blog: 'https://blog.greenroots.info/how-to-create-a-countdown-timer-using-react-hooks',
  },
  {
  id: 'pl-0004',

src/plays/date-time-counter/CdTimerComp.js

@@ -1,7 +1,15 @@
+import PlayHeader from "common/playlists/PlayHeader";
 import { useState } from "react";
+import { useLocation } from "react-router-dom";
+import { getPlayById } from "meta/play-meta";
 import CountDownTimer from "./CountDownTimer";
 
 const CdTimerComp = () => {
+ // The following code is to fetch the current play from the URL
+ const location = useLocation();
+ const { id } = location.state;
+ const play = getPlayById(id);
+
  const THREE_DAYS_IN_MS = 3 * 24 * 60 * 60 * 1000;
  const NOW_IN_MS = new Date().getTime();
 
@@ -20,19 +28,27 @@ const CdTimerComp = () => {
  };
 
  return (
- <div className="countdown-container">
- <h2>Countdown Timer</h2>
- <form>
- <label htmlFor="countdown-date-time">Select a Date and Time:</label>
- <input
- type="datetime-local"
- id="countdown-date-time"
- name="countdown-date-time"
- onChange={handleChange}
- />
- </form>
- <CountDownTimer targetDate={targetDate} />
- </div>
+ <>
+ <div className="play-details">
+ <PlayHeader play={play} />
+ <div className="play-details-body">
+ <div className="countdown-container">
+ <form>
+ <label htmlFor="countdown-date-time">
+ Select a Date and Time:
+ </label>
+ <input
+ type="datetime-local"
+ id="countdown-date-time"
+ name="countdown-date-time"
+ onChange={handleChange}
+ />
+ </form>
+ <CountDownTimer targetDate={targetDate} />
+ </div>
+ </div>
+ </div>
+ </>
  );
 };