✨ Started the work to add social links

plop-templates/play.hbs

@@ -6,7 +6,7 @@
     path: '/plays/{{folder}}',
     level: '{{level}}',
     tags: '{{tags}}',
-    github: '{{github}}',
+    github: 'https://github.com/{{github}}',
     blog: '{{blog}}',
     video: '{{video}}'
   }, //replace new play item here

src/common/index.js

@@ -3,12 +3,14 @@ import Footer from './footer/Footer';
 import Header from './header/Header';
 import Home from './home/Home';
 import Modal from './modal';
+import PlayLinks from './playlinks';
 
 export {
   Header,
   Footer,
   Home,
   PageNotFound,
-  Modal
+  Modal,
+  PlayLinks
 };
 

src/common/playlinks/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+const PlayLinks = ({play}) => {
+  console.log(play);
+
+  return(
+    <ul className="play-links">
+      { play.path && 
+        <li>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`https://github.com/atapas/react-play/tree/main/src${play.path}`}>GitHub
+          </a>
+        </li> 
+      }
+      { play.blog && 
+        <li>
+          <a
+            target="_blank"
+            rel="noopener noreferrer" 
+            href={play.blog}>Blog
+          </a>
+        </li> 
+      }
+      { play.video && 
+        <li>
+          <a
+            target="_blank"
+            rel="noopener noreferrer" 
+            href={play.video}>Video
+          </a>
+        </li> 
+      }
+    </ul>  
+  );
+};
+
+export default React.memo(PlayLinks);

src/common/playlists/PlayList.js

@@ -8,7 +8,7 @@ const PlayList = () => {
     <ul>
       {plays.map((play, index) => (
         <li key={play.id}>
-          <Link to={play.path}>{play.name}</Link>
+          <Link to={play.path} state={{ id: play.id }}>{play.name}</Link>
         </li>
       ))}
     </ul>

src/meta/play-meta.js

@@ -18,17 +18,19 @@ const plays = [
     index: true,
     level: 'Beginner',
     tags: 'JSX',
-    github: 'atapas'
+    github: 'https://github.com/atapas'
   },
   {
     id: 'pl-0002',
-    name: 'Current Timer',
+    name: 'Clock',
     description: 'This application shows the current time and it increases every second',
     component: () => {return <CurrentTimer />},
     path: '/plays/clock',
     level: 'Beginner',
     tags: 'JSX, Schedule',
-    github: 'atapas'
+    github: 'https://github.com/atapas',
+    blog: 'https://blog.greenroots.info',
+    video: 'https://youtube.com/tapasadhikary'
   },
   {
     id: 'pl-0003',
@@ -38,7 +40,7 @@ const plays = [
     path: '/plays/countdown',
     level: 'Intermediate',
     tags: 'Schedule, Component Structure, Hooks, Custom Hooks',
-    github: 'atapas'
+    github: 'https://github.com/atapas'
   },
   {
     id: 'pl-0004',
@@ -48,7 +50,7 @@ const plays = [
     path: '/plays/movies',
     level: 'Intermediate',
     tags: 'Fetch Data, Hooks',
-    github: 'atapas'
+    github: 'https://github.com/atapas'
   },
   {
     id: 'pl-0005',
@@ -58,7 +60,7 @@ const plays = [
     path: '/plays/basic-family-tree',
     level: 'Intermediate',
     tags: 'Recursion, Tree',
-    github: 'green-roots'
+    github: 'https://github.com/green-roots'
   }, {
     id: 'pl-counter', 
     name: 'Counter', 
@@ -67,14 +69,18 @@ const plays = [
     path: '/plays/Counter',
     level: 'Beginner',
     tags: 'JSX, State, Props',
-    github: 'murtuzaalisurti'
+    github: 'https://github.com/murtuzaalisurti'
   }, //replace new play item here
 ];
 
 const getAllPlays = () => {
   return plays;
 };
 
+const getPlayById = id => {
+  return plays.find(play => play.id === id);
+};
+
 const getPlaysOnSearch = searchTerm => {
   return plays.filter(play => {
     return (play.name.toLowerCase().includes(searchTerm.toLowerCase())
@@ -126,6 +132,7 @@ const getAllLevels = () => {
 
 export {
   getAllPlays,
+  getPlayById,
   getPlaysOnSearch,
   getPlaysByLevel,
   getPlaysByTags,

src/plays/clock/CurrentTimer.js

@@ -1,7 +1,14 @@
 
 import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { getPlayById } from 'meta/play-meta';
+import { PlayLinks } from 'common';
 
 const CurrentTimer = () => {
+  // The following code is to fetch the current play from the URL
+  const location = useLocation();
+  const { id } = location.state;
+  const play = getPlayById(id);
   // Create a real-time date time counter
   const [date, setDate] = useState(new Date());
 
@@ -14,10 +21,13 @@ const CurrentTimer = () => {
   }, []);
 
   return(
-
-    <div className="counter">
-      Current Time: <h1>{date.toLocaleTimeString()}</h1>
-    </div>
+    <>
+      <PlayLinks play={play} />
+      <div className="counter">
+        Current Time: <h1>{date.toLocaleTimeString()}</h1>
+      </div>
+    </>
+
   );
 }
 

src/plays/Counter/CounterApp.js → src/plays/counter/CounterApp.js

@@ -11,10 +11,10 @@ function CounterApp() {
     setInput("");
   }
   return (
-    <div class="counter-container">
+    <div className="counter-container">
       <h1>Counter</h1>
       <p>A simple counter</p>
-      <p class="counter-desc">Specify the limit and click the circle below to increment the value until the limit has been reached. After that it will reset to zero.</p>
+      <p className="counter-desc">Specify the limit and click the circle below to increment the value until the limit has been reached. After that it will reset to zero.</p>
       <div className="input_field">
         <input value={input} onChange={e => setInput(e.target.value)} className="no_of_times" type="text" />
         <button onClick={register}>Submit</button>

src/plays/counter/counter.css

@@ -0,0 +1,66 @@
+.counter-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100vw;
+}
+.counter-desc{
+  text-align: center;
+}
+button:hover{
+  cursor: pointer;
+}
+.input_field {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+  width: 90%;
+  margin: 0 1rem;
+}
+.input_field input {
+  width: 100%;
+  max-width: 15rem;
+  outline: none;
+  border: 3px solid rgb(220, 182, 255);
+  border-radius: 0.6rem;
+  padding: 0.5rem;
+  text-align: center;
+}
+.input_field button,
+.reset_btn {
+  background-color: rgb(111, 78, 138);
+  margin-left: 1rem;
+  outline: none;
+  color: white;
+  border: none;
+  border-radius: 0.5rem;
+  padding: 0 0.5rem;
+}
+.reset_btn {
+  margin: 0;
+  padding: 0.5rem 1rem;
+}
+.counter {
+  margin-top: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.reset_btn {
+  margin-top: 0.5rem;
+}
+.counter_btn {
+  height: 7rem;
+  width: 7rem;
+  background-color: rgb(199, 139, 255);
+  border-radius: 50%;
+  border: none;
+  font-size: 2.5rem;
+  transition: border 0.01s ease-in;
+}
+.counter_btn:active {
+  border: 3px solid rgb(73, 0, 141);
+}
+.counter_btn::selection {
+  background-color: transparent;
+}

src/plays/index.js

@@ -5,5 +5,5 @@ export { default as CdTimerComp } from 'plays/date-time-counter/CdTimerComp';
 export { default as BasicTree } from 'plays/family-tree/BasicTree';
 export { default as MovieContainer } from 'plays/movies/MovieContainer';
 export { default as WhyReact } from 'plays/why-react/WhyReact';
-export { default as CounterApp } from 'plays/Counter/CounterApp';
+export { default as CounterApp } from 'plays/counter/CounterApp';
 //add export here