feat: add steps play (#1572)

* feat: add steps play

* chore: avoid targeting elements directly use classnames instead

---------

Co-authored-by: Priyankar Pal <[email protected]>

Author: aaqib605

src/plays/steps/App.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import StepsWrapper from './components/StepsWrapper';
+
+const App = () => {
+  return <StepsWrapper />;
+};
+
+export default App;

src/plays/steps/Readme.md

@@ -0,0 +1,27 @@
+# Steps
+
+A web app with “next” and “previous” navigation buttons, where the “next” button helps users move forward through steps, similar to the flow in e-commerce applications, and the “previous” button allows them to step back.
+
+## 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/steps/Steps.tsx

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

src/plays/steps/components/Button.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode, MouseEventHandler } from 'react';
+
+interface ButtonProps {
+  bgColor: string;
+  textColor: string;
+  disable: boolean;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  children: ReactNode;
+}
+
+export default function Button({ textColor, bgColor, onClick, disable, children }: ButtonProps) {
+  const disabledStyles = { background: 'grey', color: 'white', cursor: 'not-allowed' };
+
+  return (
+    <button
+      style={disable ? disabledStyles : { backgroundColor: bgColor, color: textColor }}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

src/plays/steps/components/StepMessage.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface StepMessageProps {
+  step: number;
+  children: React.ReactNode;
+}
+
+export default function StepMessage({ step, children }: StepMessageProps) {
+  return (
+    <div className="steps_message">
+      <h3>Step {step}</h3>
+      {children}
+    </div>
+  );
+}

src/plays/steps/components/StepsWrapper.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+
+import StepMessage from './StepMessage';
+import Button from './Button';
+
+export default function StepsWrapper() {
+  const [step, setStep] = useState(1);
+
+  const messages = ['Learn React ⚛️', 'Apply for jobs 💼', 'Invest your new income 🤑'];
+
+  function handlePrevious() {
+    if (step > 1) setStep((s) => s - 1);
+  }
+
+  function handleNext() {
+    if (step < 3) {
+      setStep((s) => s + 1);
+    }
+  }
+
+  return (
+    <div>
+      <div className="steps">
+        <div className="steps_numbers">
+          <div className={step >= 1 ? 'steps_active' : ''}>1</div>
+          <div className={step >= 2 ? 'steps_active' : ''}>2</div>
+          <div className={step >= 3 ? 'steps_active' : ''}>3</div>
+        </div>
+
+        <StepMessage step={step}>{messages[step - 1]}</StepMessage>
+
+        <div className="steps_buttons">
+          <Button bgColor="#7950f2" disable={step === 1} textColor="#fff" onClick={handlePrevious}>
+            <span>👈</span> Previous
+          </Button>
+
+          <Button bgColor="#7950f2" disable={step === 3} textColor="#fff" onClick={handleNext}>
+            Next <span>👉</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/plays/steps/cover.png

@@ -0,0 +1,69 @@
+.steps {
+  width: 600px;
+  background-color: #f7f7f7;
+  border-radius: 7px;
+  padding: 25px 100px;
+  margin: 100px auto;
+}
+
+.steps_numbers {
+  display: flex;
+  justify-content: space-between;
+}
+
+.steps_numbers > div {
+  height: 40px;
+  aspect-ratio: 1;
+  background-color: #e7e7e7;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+
+.steps_numbers .steps_active {
+  background-color: #7950f2;
+  color: #fff;
+}
+
+.steps_message {
+  text-align: center;
+  font-size: 20px;
+  margin: 40px 0;
+  font-weight: bold;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.steps_buttons {
+  display: flex;
+  justify-content: space-between;
+}
+
+.steps_buttons button {
+  border: none;
+  cursor: pointer;
+  padding: 10px 15px;
+  border-radius: 100px;
+  font-size: 14px;
+  font-weight: bold;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-width: 8rem;
+}
+
+.steps_buttons button span {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.steps_message h3 {
+  margin: 0;
+  text-transform: uppercase;
+}