Play state

src/meta/play-meta.js

@@ -10,6 +10,8 @@ import {
   RandomMemeGenerator,
   ReactTodoApp,
   //import play here
+States,
+//import play here
 } from "plays";
 
 export const plays = [
@@ -80,10 +82,11 @@ export const plays = [
     github: 'murtuzaalisurti',
     featured: true
   }, {
-    id: 'pl-states',
-    name: 'States',
+    id: 'pl-states', 
+    name: 'States', 
     description: 'States in Functional Components',
-    component: () => { return <States /> },
+    component: () => {return <States />},
+
     path: '/plays/states',
     level: 'Beginner',
     tags: 'Hooks,State,JSX',
@@ -125,6 +128,7 @@ export const plays = [
     github: 'nirban256',
     cover: 'https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png',
     blog: '',
+    blog: 'https://abhishek-90.github.io/My-Portfolio/',
     video: ''
   }, //replace new play item here
 ];

src/plays/states/States.css

@@ -4,6 +4,10 @@
   flex-direction: column;
 }
 
+.play-area-result {
+  margin-left: 2rem;
+}
+
 .play-area {
   border-right-width: 0.1rem;
   border-right-style: solid;
@@ -26,12 +30,28 @@
 .submit-button {
   height: 2rem;
   width: 6rem;
-  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 1rem;
   background: rgb(108, 226, 252);
   border: none;
   outline: none;
   margin-top: 1.2rem;
   margin-left: 4rem;
   border-radius: 1rem;
+}
+
+@media only screen and (max-width: 760px)  {
+  .play-area-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 3rem;
+  }
+
+  .play-area {
+    border: none;
+  }
+
+  .play-area-result {
+    margin-left: 0.5rem;
+    margin-top: 1.5rem;
+  }
 }

src/plays/states/States.jsx

@@ -3,10 +3,9 @@ import { getPlayById } from "meta/play-meta-util";
 import PlayHeader from "common/playlists/PlayHeader";
 import "./states.css";
 
-function States(props) {
-  // Do not remove the below lines.
-  // The following code is to fetch the current play from the URL
-  const { id } = props;
+function States() {
+  const location = useLocation();
+  const { id } = location.state;
   const play = getPlayById(id);
 
   // Your Code Start below.
@@ -34,6 +33,21 @@ function States(props) {
   const handleDurationChange = (e) => {
     setDuration(e.target.value);
   };
+=======
+
+import { useLocation } from 'react-router-dom';
+import { getPlayById } from 'meta/play-meta-util';
+
+import PlayHeader from 'common/playlists/PlayHeader';
+
+function States() {
+  // Do not remove the below lines. 
+  // The following code is to fetch the current play from the URL
+  const location = useLocation();
+  const { id } = location.state;
+  const play = getPlayById(id);
+
+  // Your Code Start below.
 
   return (
     <>
@@ -82,9 +96,9 @@ function States(props) {
 
               <div className="play-area-result">
                 {!display ? (
-                  <p style={{marginLeft: '2rem'}}>Enter Details of the Message</p>
+                  <p >Enter Details of the Message</p>
                 ) : (
-                  <h3 style={{marginLeft: '2rem'}}>Welcome to State Play, {name} </h3>
+                  <h3 >Welcome to State Play, {name} </h3>
                 )}
               </div>
             </div>

src/plays/states/states.css

@@ -4,6 +4,10 @@
   flex-direction: column;
 }
 
+.play-area-result {
+  margin-left: 2rem;
+}
+
 .play-area {
   border-right-width: 0.1rem;
   border-right-style: solid;
@@ -26,12 +30,28 @@
 .submit-button {
   height: 2rem;
   width: 6rem;
-  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 1rem;
   background: rgb(108, 226, 252);
   border: none;
   outline: none;
   margin-top: 1.2rem;
   margin-left: 4rem;
   border-radius: 1rem;
+}
+
+@media only screen and (max-width: 760px)  {
+  .play-area-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 3rem;
+  }
+
+  .play-area {
+    border: none;
+  }
+
+  .play-area-result {
+    margin-left: 0.5rem;
+    margin-top: 1.5rem;
+  }
 }