feat: add pizza-menu play

src/common/playlists/playlist.css

@@ -351,7 +351,7 @@
     margin-top: 0.4rem;
     padding-top: 0.4rem;
   }
-  .header-rightcol{
+  .header-rightcol {
     max-width: 95%;
   }
 

src/plays/Selection-Sort-Visualizer/SelectionSortVisualizer.js

@@ -78,16 +78,22 @@ function SelectionSortVisualizer() {
       </div>
       <div className="visualizer-input-container">
         <input
-          type="number"
           className="input-field"
+          type="number"
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
         />
-        <button className="button-green" onClick={handleAdd}>Add</button>
-        <button className="button-blue" onClick={handleSort}>Sort</button>
-        <button className="button-blue" onClick={handleReset}>Reset</button>
+        <button className="button-green" onClick={handleAdd}>
+          Add
+        </button>
+        <button className="button-blue" onClick={handleSort}>
+          Sort
+        </button>
+        <button className="button-blue" onClick={handleReset}>
+          Reset
+        </button>
       </div>
-      <div id="output-visualizer"></div>
+      <div id="output-visualizer" />
     </div>
   );
 }

src/plays/Selection-Sort-Visualizer/select.css

@@ -1,96 +1,96 @@
 /* Scoped styles for the Selection Sort Visualizer */
 .visualizer-body {
-    background-color: papayawhip;
-  }
-  
-  .visualizer-container * {
-    font-size: 16px;
-    font-weight: bold;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-  }
-  
-  .visualizer-head {
-    margin-top: 20px;
-    margin-right: 20vw;
-    margin-left: 20vw;
-    text-align: center;
-    font-size: 30px;
-    background-color: greenyellow;
-    color: white;
-    border-radius: 19px;
-    font-weight: bolder;
-  }
-  
-  .visualizer-input-container {
-    display: flex;
-    flex-direction: row;
-    margin: 2rem 5rem;
-  }
-  
-  .input-field {
-    width: 180px;
-    height: 40px;
-    border: 1px solid black;
-    border-radius: 5px;
-    outline: none;
-    text-align: center;
-  }
-  
-  .button-blue,
-  .button-green {
-    width: 100px;
-    text-align: center;
-    margin-left: 10px;
-    border: 1px solid black;
-    border-radius: 5px;
-    height: 40px;
-    color: white;
-  }
-  
-  .button-green {
-    background-color: #4cd430;
-  }
-  
-  .button-blue {
-    background-color: #3478d5;
-  }
-  
-  #input-visualizer {
-    margin: 0 5rem;
-    margin-top: 2rem;
-    display: flex;
-    text-align: center;
-  }
-  
-  #input-visualizer div {
-    margin-right: 10px;
-    background-color: #e6852c;
-    border: 1px solid black;
-    border-radius: 5px;
-    padding: 10px;
-    width: 50px;
-    color: white;
-  }
-  
-  #output-visualizer {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  #output-visualizer div {
-    margin: 0 5rem;
-    margin-top: 2rem;
-    display: flex;
-    text-align: center;
-  }
-  
-  #output-visualizer div span {
-    margin-right: 10px;
-    background-color: #3478d5;
-    border: 1px solid black;
-    border-radius: 5px;
-    padding: 10px;
-    width: 50px;
-    color: white;
-  }
-  
+  background-color: papayawhip;
+}
+
+.visualizer-container * {
+  font-size: 16px;
+  font-weight: bold;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva,
+    Verdana, sans-serif;
+}
+
+.visualizer-head {
+  margin-top: 20px;
+  margin-right: 20vw;
+  margin-left: 20vw;
+  text-align: center;
+  font-size: 30px;
+  background-color: greenyellow;
+  color: white;
+  border-radius: 19px;
+  font-weight: bolder;
+}
+
+.visualizer-input-container {
+  display: flex;
+  flex-direction: row;
+  margin: 2rem 5rem;
+}
+
+.input-field {
+  width: 180px;
+  height: 40px;
+  border: 1px solid black;
+  border-radius: 5px;
+  outline: none;
+  text-align: center;
+}
+
+.button-blue,
+.button-green {
+  width: 100px;
+  text-align: center;
+  margin-left: 10px;
+  border: 1px solid black;
+  border-radius: 5px;
+  height: 40px;
+  color: white;
+}
+
+.button-green {
+  background-color: #4cd430;
+}
+
+.button-blue {
+  background-color: #3478d5;
+}
+
+#input-visualizer {
+  margin: 0 5rem;
+  margin-top: 2rem;
+  display: flex;
+  text-align: center;
+}
+
+#input-visualizer div {
+  margin-right: 10px;
+  background-color: #e6852c;
+  border: 1px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  width: 50px;
+  color: white;
+}
+
+#output-visualizer {
+  display: flex;
+  flex-direction: column;
+}
+
+#output-visualizer div {
+  margin: 0 5rem;
+  margin-top: 2rem;
+  display: flex;
+  text-align: center;
+}
+
+#output-visualizer div span {
+  margin-right: 10px;
+  background-color: #3478d5;
+  border: 1px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  width: 50px;
+  color: white;
+}

src/plays/daily-journa/Readme.md

@@ -11,8 +11,8 @@ This play is about writing daily entries, categorising them by mood or topic, an
 
 - User: GhadaRV
 - Gihub Link: https://github.com/GhadaRV
-- Blog: 
-- Video: 
+- Blog:
+- Video:
 
 ## Implementation Details
 

src/plays/dictionary/Readme.md

@@ -14,7 +14,7 @@ Display the definition, pronunciation, antonyms and synonyms of the word
 
 ## Implementation Details
 
-This implenmetation uses axios to call a remote API. The remote API returns the meaning as well as synonyms and antonyms of the word entered by the user, which is rendered. 
+This implenmetation uses axios to call a remote API. The remote API returns the meaning as well as synonyms and antonyms of the word entered by the user, which is rendered.
 
 ## Consideration
 

src/plays/pizza-menu/App.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Header from './components/Header';
+import Menu from './components/Menu';
+import Footer from './components/Footer';
+
+const App = () => {
+  return (
+    <div className="pizza-menu_container pizza-menu_body">
+      <Header />
+      <Menu />
+      <Footer />
+    </div>
+  );
+};
+
+export default App;

src/plays/pizza-menu/PizzaMenu.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import PlayHeader from 'common/playlists/PlayHeader';
+import App from './App';
+import './styles.css';
+
+function PizzaMenu(props: any) {
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          <App />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default PizzaMenu;

src/plays/pizza-menu/Readme.md

@@ -0,0 +1,27 @@
+# Pizza Menu
+
+A pizza menu that showcases a variety of pizzas, including detailed information such as ingredients, prices, and availability. Each pizza listing clearly indicates if it’s currently sold out, helping customers make quick and informed choices.
+
+## Play Demographic
+
+- Language: ts
+- Level: Beginner
+
+## Creator Information
+
+- User: aaqib605
+- Gihub Link: https://github.com/aaqib605
+- Blog: https://hashnode.com/@aaqib605
+- Video:
+
+## Implementation Details
+
+Update your implementation idea and details here
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+Update external resources(if any)

src/plays/pizza-menu/components/Footer.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Order from './Order';
+
+const Footer = () => {
+  const hour = new Date().getHours();
+  const openHour = 12;
+  const closeHour = 22;
+  const isOpen = hour >= openHour && hour <= closeHour;
+
+  return (
+    <footer className="pizza-menu_footer">
+      {isOpen ? (
+        <Order closeHour={closeHour} openHour={openHour} />
+      ) : (
+        <p>
+          We're happy to welcome you between {openHour}:00 and {closeHour}:00.
+        </p>
+      )}
+    </footer>
+  );
+};
+
+export default Footer;

src/plays/pizza-menu/components/Header.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Header = () => {
+  return (
+    <header className="pizza-menu_header">
+      <h1 className="pizza-menu_logo-title">Fast React Pizza Co.</h1>
+    </header>
+  );
+};
+
+export default Header;