Merge branch 'main' into play/pizza-menu

src/plays/expenses-tracker/ExpensesTracker.tsx

@@ -20,9 +20,14 @@ function ExpensesTracker(props: any) {
 
   const handleNewExpense = () => {
     const expense = localStoreExpenses[localStoreExpenses.length - 1];
-    data['id'] = expense !== undefined ? parseInt(expense.id) + 1 : 1;
-    setLocalStoreExpenses([...localStoreExpenses, data]);
-    setLocalStoreTotal(parseFloat(localStoreTotal) + parseFloat(data.amount));
+    // Ensure `amount` has a default value of 0 if not present
+    const sanitizedData = {
+      ...data,
+      amount: data.amount || 0
+    };
+    sanitizedData['id'] = expense !== undefined ? parseInt(expense.id) + 1 : 1;
+    setLocalStoreExpenses([...localStoreExpenses, sanitizedData]);
+    setLocalStoreTotal(parseFloat(localStoreTotal) + parseFloat(sanitizedData.amount));
     setOpen(false);
     setData(null);
   };
@@ -97,14 +102,14 @@ function ExpensesTracker(props: any) {
                             <td className="p-1 text-center">{expense.date}</td>
                             <td className="p-1 text-center">{expense.amount}</td>
                             <td className="p-1 flex justify-center space-x-2">
-                              <div className="bg-green-500 rounded-full p-[6px]">
+                              <div className="bg-green-500 cursor-pointer  rounded-full p-[6px]">
                                 <FiEdit
                                   className="text-white"
                                   size={16}
                                   onClick={() => openEditModal(expense)}
                                 />
                               </div>
-                              <div className="bg-red-500 rounded-full p-[6px]">
+                              <div className="bg-red-500 cursor-pointer rounded-full p-[6px]">
                                 <AiOutlineDelete
                                   className="text-white"
                                   size={16}

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/styles.css

@@ -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;
+}

src/plays/url-shortner/UrlShortner.jsx

@@ -10,6 +10,15 @@ function UrlShortner(props) {
   const [error, setError] = useState(null);
   const handleSubmit = async () => {
     try {
+      if (!userInput.trim()) {
+        toast('Please enter a valid URL.', {
+          position: 'top-center',
+          type: 'error',
+          autoClose: 1500
+        });
+
+        return;
+      }
       setShortenedLink('');
       const response = await axios.get(`https://tinyurl.com/api-create.php?url=${userInput}`);
       if (response.data) {
@@ -62,9 +71,10 @@ function UrlShortner(props) {
               <h1 className=" text-2xl font-medium text-blue-500 mb-4">
                 React <span className=" text-purple-600 font-bold">URL Shortener</span>
               </h1>
-              <div>
+              <div className="w-full flex flex-col max-w-md mx-auto items-center">
                 <input
-                  className="outline-none border-2 border-blue-500 rounded-md backdrop-blur-xl bg-white/20 shadow-md px-3 py-3"
+                  required
+                  className="outline-none border-2 border-blue-500 rounded-md backdrop-blur-xl bg-white/20 shadow-md px-3 py-2.5 leading-[1.5] placeholder:text-gray-400 w-full"
                   placeholder="Enter link to be shortened"
                   type="text"
                   value={userInput}
@@ -73,25 +83,31 @@ function UrlShortner(props) {
                   }}
                 />
                 <button
-                  class="ms-4 group relative h-12 w-48 overflow-hidden rounded-lg bg-white text-lg shadow"
+                  class="ms-4 group mt-4 relative h-12 px-6 overflow-hidden rounded-lg bg-white text-lg shadow"
                   onClick={handleSubmit}
                 >
                   <div class="absolute inset-0 w-3 bg-[#0087fe] transition-all duration-[250ms] ease-out group-hover:w-full" />
-                  <span class="relative text-black group-hover:text-white">Shorten This Link</span>
+                  <span class="relative text-black group-hover:text-white">Shorten URL</span>
                 </button>
               </div>
-              <div className="mt-5">
-                {error && <div className="text-red-500 mb-2">{error}</div>}
-                <div className="relative px-4 py-2 bg-white shadow-lg rounded-xl  bg-clip-padding bg-opacity-60 border border-gray-200 text-slate-500">
-                  {shortenedLink ? shortenedLink : 'Shorten An URL First'}
+              {error && <div className="text-red-500 mt-5">{error}</div>}
+              {shortenedLink && (
+                <div className="mt-5">
+                  <p>Here's your shortened URL:</p>
+
+                  <div className="flex justify-center items-center">
+                    <div className="relative px-4 py-2 bg-white shadow-lg rounded-xl  bg-clip-padding bg-opacity-60 border border-gray-200 text-slate-500">
+                      {shortenedLink}
+                    </div>
+                    <button
+                      className="border-2 px-5 py-2 ml-4 rounded-md font-medium 'border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white cursor-pointer"
+                      onClick={() => copyTextToClipboard(shortenedLink)}
+                    >
+                      Copy
+                    </button>
+                  </div>
                 </div>
-                <button
-                  className="mt-5 border-2 border-blue-500 text-blue-500 font-medium px-5 py-2 ml-4 rounded-md hover:bg-blue-500 hover:text-white"
-                  onClick={() => copyTextToClipboard(shortenedLink)}
-                >
-                  Copy URL to Clipboard
-                </button>
-              </div>
+              )}
             </div>
           </div>
         </div>