Merge pull request #13 from HellBus1/bug-fix-nan-input

bugfix : nan input

Author: HellBus1

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "investcount",
   "private": false,
-  "version": "1.1.2",
+  "version": "1.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,6 +24,7 @@
   },
   "pre-commit": "lint-staged",
   "dependencies": {
+    "motion": "^12.6.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",

package.json

@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion' // Import Framer Motion
 import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import {
   BarChart,
@@ -153,15 +154,42 @@ const DepositRateComparisonSection = () => {
   }, [])
 
   return (
-    <div className='py-10 bg-base-200 min-h-screen w-full'>
-      <h1 className='text-center text-2xl md:text-3xl font-bold text-charter-blue-600 mt-8 mb-4'>
+    <motion.div
+      className='py-10 bg-base-200 min-h-screen w-full'
+      initial='hidden'
+      whileInView='visible'
+      viewport={{ once: true, amount: 0.2 }}
+      variants={{
+        hidden: { opacity: 0, y: 20 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.8, staggerChildren: 0.2 } }
+      }}
+    >
+      <motion.h1
+        className='text-center text-2xl md:text-3xl font-bold text-charter-blue-600 mt-8 mb-4'
+        variants={{
+          hidden: { opacity: 0, y: 20 },
+          visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
+        }}
+      >
         Deposit Rate Comparison
-      </h1>
-      <p className='text-center text-charter-blue text-lg md:text-xl mx-4 md:mx-20 lg:mx-36 mb-16'>
+      </motion.h1>
+      <motion.p
+        className='text-center text-charter-blue text-lg md:text-xl mx-4 md:mx-20 lg:mx-36 mb-16'
+        variants={{
+          hidden: { opacity: 0, y: 20 },
+          visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
+        }}
+      >
         Compare the deposit rates of different Indonesian banks based on the selected tenure and
         minimum balance. Select a tenure and minimum balance to see the corresponding rates.
-      </p>
-      <div className='mb-8 flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 justify-center items-center'>
+      </motion.p>
+      <motion.div
+        className='mb-8 flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 justify-center items-center'
+        variants={{
+          hidden: { opacity: 0, y: 20 },
+          visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
+        }}
+      >
         <div>
           <label
             htmlFor='tenure'
@@ -222,12 +250,26 @@ const DepositRateComparisonSection = () => {
             <option value='rate'>Rate</option>
           </select>
         </div>
-      </div>
+      </motion.div>
       {loading ? (
-        <p className='text-charter-blue'>Loading...</p>
+        <motion.p
+          className='text-charter-blue'
+          variants={{
+            hidden: { opacity: 0 },
+            visible: { opacity: 1, transition: { duration: 0.6 } }
+          }}
+        >
+          Loading...
+        </motion.p>
       ) : (
-        <div className='mx-4 md:mx-20 lg:mx-36 mb-10'>
-          <ResponsiveContainer width='100%' height={600} className={''}>
+        <motion.div
+          className='mx-4 md:mx-20 lg:mx-36 mb-10'
+          variants={{
+            hidden: { opacity: 0, y: 20 },
+            visible: { opacity: 1, y: 0, transition: { duration: 0.8 } }
+          }}
+        >
+          <ResponsiveContainer width='100%' height={600}>
             <BarChart
               data={data}
               layout='vertical'
@@ -236,7 +278,7 @@ const DepositRateComparisonSection = () => {
               <XAxis
                 type='number'
                 label={{ value: EMPTY_STRING }}
-                tick={{ fontSize: 14, fontWeight: 'bold', fill: CHARTER_BLUE, dy: 5 }}
+                tick={{ fontSize: 14, fontWeight: 'bold', fill: CHARTER_BLUE, dy: 6 }}
               />
               <YAxis type='category' dataKey='bank' tick={renderCustomYAxisTick} width={125} />
               {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
@@ -253,9 +295,9 @@ const DepositRateComparisonSection = () => {
               </Bar>
             </BarChart>
           </ResponsiveContainer>
-        </div>
+        </motion.div>
       )}
-    </div>
+    </motion.div>
   )
 }