Merge pull request #435 from ianshulx/main-616

update

Author: ianshulx

Asteroid_Dodger/src/components/AsteroidDodger.jsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { useTranslate, T } from '@tolgee/react';
 
 const BMICalculator = () => {
+  const [unit, setUnit] = useState('metric'); // 'metric' or 'imperial'
   const { t } = useTranslate();
   const [height, setHeight] = useState('');
   const [weight, setWeight] = useState('');
@@ -21,22 +22,31 @@ const BMICalculator = () => {
 
   const calculateBMI = (e) => {
     e.preventDefault();
+    if (!height || !weight || height <= 0 || weight <= 0) {
+  alert("Please enter valid height and weight!");
+  return;
+}
     if (height && weight) {
-      const bmiValue = (weight / (height * height)).toFixed(2);
-      setBMI(bmiValue);
+      let bmiValue;
+      if (unit === 'metric') {
+        bmiValue = weight / (height * height);
+      } else {
+        bmiValue = (weight / (height * height)) * 703;
+      }
+      setBMI(bmiValue.toFixed(2));
       setIsCalculated(true);
 
       if (bmiValue < 18.5) {
-        setMessage(t('bmi-calculator-underweight'));
+        setMessage(t('Underweight '));
       } else if (bmiValue < 24.9) {
-        setMessage(t('bmi-calculator-normal-weight'));
+        setMessage(t('normal weight'));
       } else if (bmiValue < 29.9) {
-        setMessage(t('bmi-calculator-overweight'));
+        setMessage(t('overweight'));
       } else {
-        setMessage(t('bmi-calculator-obese'));
+        setMessage(t('obese'));
       }
     } else {
-      setMessage(t('bmi-calculator-invalid-input'));
+      setMessage(t('invalid-input'));
     }
   };
 
@@ -72,34 +82,46 @@ const BMICalculator = () => {
       <h1 className="text-2xl font-bold mb-4 transition-transform duration-300 hover:scale-105">
         <T keyName="bmi-calculator-title" />
       </h1>
+
+       <div className="mb-4 -ml-10 mr-5 mt-10">
+        <label className="mr-2 font-medium -ml-20">Units:</label>
+        <select
+          value={unit}
+          onChange={(e) => { setUnit(e.target.value); resetForm(); }}
+          className="border rounded px-2 py-1"
+        >
+          <option value="metric">Metric (m, kg)</option>
+          <option value="imperial">Imperial (in, lbs)</option>
+        </select>
+      </div>
 
       <form onSubmit={calculateBMI} className="mb-4">
         <div className="mb-4 transition-all duration-300">
           <label className="block text-left font-medium text-gray-700 mb-1 transition-colors duration-300">
-            <T keyName="bmi-calculator-height-label" />
+            <T keyName="Height"/>
           </label>
           <input
             type="number"
             value={height}
             onChange={(e) => setHeight(e.target.value)}
             step="0.01"
             className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 hover:border-blue-300"
-            placeholder={t('bmi-calculator-height-placeholder')}
+            placeholder={t(`Enter height in ${unit==="metric"?"Meters":"Inches"}`)}
             required
           />
         </div>
 
         <div className="mb-6 transition-all duration-300">
           <label className="block text-left font-medium text-gray-700 mb-1 transition-colors duration-300">
-            <T keyName="bmi-calculator-weight-label" />
+            <T keyName="Weight" />
           </label>
           <input
             type="number"
             value={weight}
             onChange={(e) => setWeight(e.target.value)}
             step="0.1"
             className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 hover:border-blue-300"
-            placeholder={t('bmi-calculator-weight-placeholder')}
+            placeholder={t(`Enter weight in ${unit==="metric"?"Kgs":"Pounds"}`)}
             required
           />
         </div>
@@ -108,7 +130,7 @@ const BMICalculator = () => {
           type="submit"
           className="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-md hover:shadow-lg"
         >
-          <T keyName="bmi-calculator-calculate-button" />
+          <T keyName="Calculate-BMI" />
         </button>
       </form>
 
@@ -119,15 +141,15 @@ const BMICalculator = () => {
             ${isAnimating ? 'scale-110 opacity-90' : 'scale-100 opacity-100'}
           `}
         >
-          <div className="bg-gradient-to-r from-blue-50 to-green-50 p-6 rounded-lg border-2 border-gray-100 shadow-inner">
+          <div className="bg-linear-to-r from-blue-50 to-green-50 p-6 rounded-lg border-2 border-gray-100 shadow-inner">
             <div className="flex items-center justify-center mb-4">
               <div className={`text-4xl font-bold ${getBMIColor()} transition-all duration-500 transform hover:scale-110`}>
                 {bmi}
               </div>
             </div>
 
             <p className="text-lg font-semibold mb-2 transition-colors duration-300">
-              <T keyName="bmi-calculator-your-bmi" params={{ bmi }} />
+              <T keyName="is Your-Bmi" params={{ bmi }} />
             </p>
 
             <div
@@ -159,7 +181,7 @@ const BMICalculator = () => {
               onClick={resetForm}
               className="mt-6 px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-all duration-300 transform hover:scale-105 active:scale-95 w-full"
             >
-              <T keyName="bmi-calculator-reset-button" />
+              <T keyName="Reset" />
             </button>
           </div>
         </div>

BMI-Calculator/src/components/BMICalculator.jsx

@@ -2,9 +2,21 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
+import { TolgeeProvider } from "@tolgee/react";
+import { Tolgee, DevTools } from "@tolgee/web";
 
-createRoot(document.getElementById('root')).render(
+const tolgee = Tolgee()
+  .use(DevTools())
+  .init({
+    apiUrl: "https://app.tolgee.io",
+    language: "en",
+    fallbackLanguage: "en",
+  });
+
+createRoot(document.getElementById("root")).render(
   <StrictMode>
-    <App />
-  </StrictMode>,
-)
+    <TolgeeProvider tolgee={tolgee}>
+      <App />
+    </TolgeeProvider>
+  </StrictMode>
+);

BMI-Calculator/src/main.jsx

@@ -7,6 +7,7 @@ import { useState } from "react"
 import Navbar from "./landing page/Navbar";
 import Footer from "./landing page/Footer";
 import Modal from "./components/Modal";
+import Category from "./pages/Category.jsx";
 
 
 function App() {
@@ -41,6 +42,7 @@ function App() {
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/cart" element={<Cart />} />
+        <Route path="/category/:slug" element={<Category />} />
       </Routes>
 
       <Footer />

Blinkit clone/src/App.jsx

@@ -1,11 +1,28 @@
 import Card from "./Card.jsx"
+import { useNavigate } from "react-router-dom"
+
+export default function CategoryRow({ category, items, onSeeAll }) {
+    const navigate = useNavigate()
+
+    const handleSeeAll = () => {
+        if (typeof onSeeAll === "function") return onSeeAll(category)
+        const slug = encodeURIComponent(category.toLowerCase().replace(/\s+/g, "-"))
+        // pass the items (and category) via navigation state so the Category page can render them vertically
+        navigate(`/category/${slug}`, { state: { category, items } })
+    }
 
-export default function CategoryRow({ category, items }) {
     return (
         <div className="mb-8 mx-12">
             <div className="flex justify-between items-center mb-3">
                 <h2 className="text-lg font-bold">{category}</h2>
-                <button className="text-green-600 text-sm font-medium hover:underline">see all</button>
+                <button
+                    type="button"
+                    aria-label={`See all ${category}`}
+                    className="text-green-600 text-sm font-medium hover:underline"
+                    onClick={handleSeeAll}
+                >
+                    see all
+                </button>
             </div>
 
             <div className="flex space-x-4 overflow-x-auto scrollbar-hide">

Blinkit clone/src/landing page/CategoryRow.jsx

@@ -17,12 +17,12 @@ export default function Navbar({ handleModalOpen }) {
             <div className="nav-container justify-between flex border-b items-center px-6 fixed bg-white w-full top-0 z-10 h-20">
 
             <NavLink to="/">
-            <div className="h-full border-r items-center flex hover:bg-slate-100 pr-4">
+            <div className="h-full border-r items-center flex pr-4">
                     <Logo />
                 </div>
             </NavLink>
 
-                <div className="item-container flex hover:bg-slate-100 gap-6 px-4 flex-grow">
+                <div className="item-container flex gap-6 px-4 flex-grow">
                     <div className="delivery text-xs">
                         <h1 className='font-bold'>Deliver in 8 minutes</h1>
                         <p className='w-45'>B62, Pocket B, South City I, Sector...<ArrowDropDownIcon /> </p>