Added MorseCodeTranslator.jsx file for kitchen sink (#772)

* Added CountDownTimer.jsx file also added svg files in assets folder.

* Added BmiCalculator.jsx file

* Added MorseCodeTranslator.jsx file for kitchen sink

packages/kitchen-sink/src/examples/BmiCalculator.jsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { block } from "million/react";
+
+const BmiCalculator = block( function BmiComponent() {
+  const [age, setAge] = useState('');
+  const [gender, setGender] = useState('male');
+  const [heightFeet, setHeightFeet] = useState('');
+  const [heightInches, setHeightInches] = useState('');
+  const [weight, setWeight] = useState('');
+  const [bmi, setBmi] = useState(null);
+  const [bmiCategory, setBmiCategory] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const calculateBmi = () => {
+    if (age === '' || heightFeet === '' || heightInches === '' || weight === '') {
+      setErrorMessage('Please fill in all fields.');
+      return;
+    } else {
+      setErrorMessage('');
+    }
+
+    const heightInCentimeters = (parseInt(heightFeet, 10) * 30.48) + (parseInt(heightInches, 10) * 2.54);
+    const heightInMeters = heightInCentimeters / 100;
+    const calculatedBmi = weight / (heightInMeters * heightInMeters);
+    const finalBmi = parseFloat(calculatedBmi.toFixed(2));
+    setBmi(finalBmi);
+
+    if (finalBmi < 18.5) {
+      setBmiCategory('Underweight');
+    } else if (finalBmi >= 18.5 && finalBmi < 24.9) {
+      setBmiCategory('Normal');
+    } else if (finalBmi >= 25 && finalBmi < 29.9) {
+      setBmiCategory('Overweight');
+    } else {
+      setBmiCategory('Obese');
+    }
+  };
+
+  return (
+    <div>
+      <h1 style={{textAlign:'center'}}>BMI Calculator</h1>
+      <div style={{display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center'}}>
+        <div style={{display:'flex',flexDirection:'row',justifyContent:'space-between',alignItems:'flex-start',gap:'20px'}}>
+          <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start'}}>
+            <label>Age * :</label>
+            <input type="number" placeholder='Enter your age' value={age} onChange={(e) => setAge(e.target.value)} />
+          </div>
+
+          <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start'}}>
+            <label>Gender * :</label>
+            <select value={gender} onChange={(e) => setGender(e.target.value)}
+            style={{width:'230px',height:'40px',border:'none',backgroundColor:'#353535',padding:'0.55rem',color:'#f7f7f7',borderRadius:'0.25rem'}}>
+              <option value="male">Male</option>
+              <option value="female">Female</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div style={{display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center',marginTop:'20px'}}>
+        <div style={{display:'flex',flexDirection:'row',justifyContent:'space-between',alignItems:'flex-start',gap:'20px'}}>
+          <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start'}}>
+            <label>Height (in feet and inches) * :</label>
+            <input type="number" placeholder="Enter your height in feet" value={heightFeet} onChange={(e) => setHeightFeet(e.target.value)} />
+          </div>
+
+          <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start'}}>
+            <label>&nbsp;</label>
+            <input type="number" placeholder="Enter your height in inch" value={heightInches} onChange={(e) => setHeightInches(e.target.value)} />
+          </div>
+        </div>
+      </div>
+
+      <div style={{display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center',marginTop:'20px'}}>
+        <div style={{display:'flex',flexDirection:'row',justifyContent:'space-between',alignItems:'flex-start',gap:'20px'}}>
+          <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start'}}>
+            <label>Weight (in kg) * :</label>
+            <input type="number" placeholder='Enter you weight' value={weight} onChange={(e) => setWeight(e.target.value)} />
+          </div>
+
+          <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start'}}>
+            <label>&nbsp;</label>
+            <button type="button" onClick={calculateBmi} style={{width:'230px',color:'black',backgroundColor:'orange'}}>Calculate BMI</button>
+          </div>
+        </div>
+      </div>
+
+      {errorMessage && <p style={{color:'darksalmon',textAlign:'center'}}>{errorMessage}</p>}
+
+      {bmi !== null && (
+        <div style={{border:'2px solid yellow',marginTop:'20px',padding:'20px'}}>
+          <p style={{textAlign:'center',fontSize:'40px',margin:'0px'}}>Your BMI: {bmi}</p>
+          <p style={{textAlign:'center',fontSize:'30px',margin:'0px',color:'tomato'}}>Category: {bmiCategory}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+)
+
+export default BmiCalculator;

packages/kitchen-sink/src/examples/CountDownTimer.jsx

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import { block } from "million/react";
+import StartSVG from '../../assets/play.svg'
+import StopSVG from '../../assets/stop.svg'
+import FlagSVG from '../../assets/flag.svg'
+import ResetSVG from '../../assets/close.svg'
+
+const CountDownTimer = block( function TimerComponent() {
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [seconds, setSeconds] = useState(0);
+  const [milliseconds, setMilliseconds] = useState(0);
+  const [isRunning, setIsRunning] = useState(false);
+  const [recordedTimes, setRecordedTimes] = useState([]);
+
+  const startTimer = () => {
+    setIsRunning(true);
+  };
+
+  const stopTimer = () => {
+    setIsRunning(false);
+  };
+
+  const recordTime = () => {
+    const currentTime = `${hours.toString().padStart(2, '0')}h ${minutes.toString().padStart(2, '0')}m ${seconds.toString().padStart(2, '0')}s ${milliseconds.toString().padStart(2, '0')}ms`;
+    setRecordedTimes([...recordedTimes, currentTime]);
+  };
+
+  const handleHourChange = (e) => {
+    const value = parseInt(e.target.value);
+    if (!isNaN(value) && value >= 0) {
+      setHours(value);
+    }
+  };
+
+  const handleMinuteChange = (e) => {
+    const value = parseInt(e.target.value);
+    if (!isNaN(value) && value >= 0 && value < 60) {
+      setMinutes(value);
+    }
+  };
+
+  const resetTimer = () => {
+    setHours(0);
+    setMinutes(0);
+    setSeconds(0);
+    setMilliseconds(0);
+  };
+
+  const clearFlagData = () => {
+    setRecordedTimes([]);
+  };
+
+
+  useEffect(() => {
+    let interval;
+    if (isRunning) {
+      interval = setInterval(() => {
+        if (hours === 0 && minutes === 0 && seconds === 0 && milliseconds === 0) {
+          clearInterval(interval);
+          setIsRunning(false);
+        } else {
+          if (milliseconds > 0) {
+            setMilliseconds(milliseconds - 1);
+          } else {
+            if (seconds > 0) {
+              setSeconds(seconds - 1);
+              setMilliseconds(99);
+            } else {
+              if (minutes > 0) {
+                setMinutes(minutes - 1);
+                setSeconds(59);
+                setMilliseconds(99);
+              } else {
+                if (hours > 0) {
+                  setHours(hours - 1);
+                  setMinutes(59);
+                  setSeconds(59);
+                  setMilliseconds(99);
+                }
+              }
+            }
+          }
+        }
+      }, 10);
+    }
+    return () => clearInterval(interval);
+  }, [isRunning, hours, minutes, seconds, milliseconds]);
+
+  return (
+    <div>
+      <div>
+        <div>
+          <h1 style={{fontSize:'80px',textAlign:'center'}}>
+            {`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}:${milliseconds.toString().padStart(2, '0')}`}
+          </h1>
+        </div>
+
+        <div style={{display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center'}}>
+          <div style={{display:'flex',flexDirection:'row',justifyContent:'space-between',alignItems:'flex-start',gap:'20px'}}>
+            <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start'}}>
+              <label htmlFor='hourInput'>Hours</label>
+              <input id='hourInput' type="number" value={hours} onChange={handleHourChange}/>
+            </div>
+
+            <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start'}}>
+              <label htmlFor='minuteInput'>Minutes</label>
+              <input id='minuteInput' type="number" value={minutes} onChange={handleMinuteChange}/>
+            </div>
+          </div>
+
+          <div style={{display:'flex',flexDirection:'row',justifyContent:'space-between',alignItems:'center',gap:'20px',marginTop:'20px'}}>
+            <button onClick={startTimer} style={{backgroundColor:'#FF0054',borderRadius:'100px',border: '0px'}}>
+              <img src={StartSVG} alt='play'/>
+            </button>
+
+            <button onClick={stopTimer} style={{backgroundColor:'#FF0054',borderRadius:'100px',border: '0px'}}>
+              <img src={StopSVG} alt='stop' />
+            </button>
+
+            <button onClick={recordTime} style={{backgroundColor:'#FF0054',borderRadius:'100px',border: '0px'}}>
+              <img src={FlagSVG} alt='flag' />
+            </button>
+
+            <button onClick={resetTimer} style={{backgroundColor:'#FF0054',borderRadius:'100px',border: '0px'}}>
+              <img src={ResetSVG} alt='reset' />
+            </button>
+          </div>
+        </div>
+
+        <div style={{display:'flex',justifyContent:'center',alignItems:'center',marginTop:'60px'}}>
+          <ul>
+            {recordedTimes.map((time, index) => (
+              <li key={index}>{time}</li>
+            ))}
+          </ul>
+        </div>
+
+        {recordedTimes.length > 0 && (
+          <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
+          <button onClick={clearFlagData} style={{backgroundColor:'#00c2cb',width:'120px',color:'black'}}>Clear</button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+)
+
+export default CountDownTimer;