adeded validation in mobile input, added active style

.prettierrc

@@ -0,0 +1,3 @@
+{
+    "singleQuote": true
+}

src/App.tsx

@@ -6,7 +6,7 @@ import ChartsMaps from "./pages/ChartsMaps";
 
 import EditContactForm from "./components/EditContactForm";
 import ContactForm from "./components/ContactForm";
-import Sidebar from "./components/Sidebar";
+import SideBar from "./components/SideBar";
 
 
 function App() {
@@ -20,7 +20,7 @@ function App() {
         {pathname == "/chart" ? "Charts And Maps" : "Contact Management App"}
       </nav>
       <div className="flex w-full ">
-        <Sidebar />
+        <SideBar />
 
         <Routes>
           <Route path="/" element={<Contacts />} />

src/components/ContactForm.tsx

@@ -7,18 +7,18 @@ import { useNavigate } from "react-router-dom";
 import { addUser } from "../redux/UserReducer";
 
 const ContactForm = () => {
-  const [firstname, setfirstname] = useState("");
-  const [lastname, setlastname] = useState("");
-  const [mobile, setmobile] = useState("");
-  const [status, setstatus] = useState("active");
+  const [firstName, setfirstName] = useState("");
+  const [lastName, setlastName] = useState("");
+  const [mobile, setMobile] = useState("");
+  const [status, setStatus] = useState("active");
   const users = useSelector((state: any) => state.users);
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const handleSubmit = (e: { preventDefault: () => void }) => {
     //console.log("clicked")
     e.preventDefault();
     dispatch(
-      addUser({ id: users.length, firstname, lastname, mobile, status })
+      addUser({ id: users.length, firstName, lastName, mobile, status })
     );
     navigate("/");
   };
@@ -33,31 +33,33 @@ const ContactForm = () => {
         type="text"
         className="border-2 p-1  border-blue-500"
         name="first_name"
-        value={firstname}
-        onChange={(e) => setfirstname(e.target.value)}
+        value={firstName}
+        onChange={(e) => setfirstName(e.target.value)}
       />
       <input
         placeholder="LastName"
         type="text"
         className="border-2 p-1  border-blue-500"
         name="last_name"
-        value={lastname}
-        onChange={(e) => setlastname(e.target.value)}
+        value={lastName}
+        onChange={(e) => setlastName(e.target.value)}
       />
       <input
         placeholder="MobileNumber"
-        type="number"
+        type="tel"
+       maxLength={10}
         className="border-2 p-1  border-blue-500"
         name="mob"
         value={mobile}
-        onChange={(e) => setmobile(e.target.value)}
+        onChange={(e) => setMobile(e.target.value)}
+
       />
       <label>Status</label>
       <select
         className="w-full border border-gray-400 p-2 rounded-md"
         name="status"
         value={status}
-        onChange={(e) => setstatus(e.target.value)}
+        onChange={(e) => setStatus(e.target.value)}
       >
         <option value="active">Active</option>
         <option value="inactive">Inactive</option>

src/components/EditContactForm.tsx

@@ -38,10 +38,11 @@ const EditContactForm = () => {
       <input placeholder="LastName" type="text" className="border-2 p-1"  value={ulastname} onChange={e=> setlastname(e.target.value)}/>
       <input
         placeholder="MobileNumber"
-        type="number"
-
+        type="tel"
+       maxLength={10}
         className="border-2 p-1" value={umobile}
         onChange={e=> setmobile(e.target.value)}
+
       />
       <label>Status</label>
 

src/components/Popup.tsx → src/components/PopUp.tsx

@@ -12,7 +12,7 @@ interface PopupProps {
   close: Function;
   el: User;
 }
-const Popup = ({ close, el }: PopupProps) => {
+const PopUp = ({ close, el }: PopupProps) => {
   return (
     <div className="fixed top-0    text-black left-0 w-full h-full  bg-opacity-20 bg-black flex items-center justify-center">
       <div className="bg-white drop-shadow-md rounded-md p-4 w-mid">
@@ -41,4 +41,4 @@ const Popup = ({ close, el }: PopupProps) => {
   );
 };
 
-export default Popup;
+export default PopUp;

src/components/Sidebar.tsx → src/components/SideBar.tsx

@@ -3,20 +3,20 @@ import { Link } from "react-router-dom";
 import { FaChartLine } from "react-icons/fa";
 import { MdContacts } from "react-icons/md";
 
-const Sidebar = () => {
+const SideBar = () => {
   return (
     <div className=" flex flex-col gap-6 w-60 h-screen border-r-2 p-3 ">
       <h1 className="text-xl ">Dashboard</h1>
 
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-4  hover:bg-blue-200 p-2 rounded">
         <MdContacts className="text-2xl" />
 
-        <Link to="/" className="text-sm">
+        <Link to="/" className="text-sm " >
           Contacts
         </Link>
       </div>
 
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-4 hover:bg-blue-200 p-2 rounded">
         <FaChartLine className="text-2xl" />
 
         <Link to="/chart" className="text-sm">
@@ -27,4 +27,4 @@ const Sidebar = () => {
   );
 };
 
-export default Sidebar;
+export default SideBar;

src/components/WorldMap.tsx

@@ -1,6 +1,6 @@
 import { Marker, Popup } from "react-leaflet"
-import L from 'leaflet';
-import markerIcon from '../assets/marker_icon.png';
+import L from "leaflet";
+import markerIcon from "../assets/marker_icon.png";
 const WorldMap=(countries:any)=>{
 
   const {countriesData}=countries

src/main.tsx

@@ -1,14 +1,14 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react"
+import ReactDOM from "react-dom/client"
+import App from "./App.tsx"
+import "./index.css"
 
-import { Provider } from 'react-redux'
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { configureStore } from '@reduxjs/toolkit'
+import { Provider } from "react-redux"
+import { QueryClient, QueryClientProvider } from "react-query"
+import { configureStore } from "@reduxjs/toolkit"
 
-import UserReducer from './redux/UserReducer.ts'
-import { BrowserRouter as Router} from 'react-router-dom'
+import UserReducer from "./redux/UserReducer.ts"
+import { BrowserRouter as Router} from "react-router-dom"
 
 const store = configureStore({
   reducer :{

src/pages/ChartsMaps.tsx

@@ -1,7 +1,7 @@
-import  { useEffect } from 'react';
-import {  useQuery } from 'react-query';
+import  { useEffect } from "react";
+import {  useQuery } from "react-query";
 import { Line } from "react-chartjs-2";
-import 'leaflet/dist/leaflet.css';
+import "leaflet/dist/leaflet.css";
 
 import { MapContainer, TileLayer } from "react-leaflet";
 import { CategoryScale, Chart as ChartJS, Legend, LineElement, LinearScale, PointElement, Title, Tooltip } from 'chart.js';
@@ -30,8 +30,8 @@ const ChartsMaps = () => {
     fetchChartData();
     fetchCountryData();
   }, []);
- console.log(chartData)
- console.log(countriesData)
+//  console.log(chartData)
+//  console.log(countriesData)
 
 
 

src/pages/Contacts.tsx

@@ -7,7 +7,7 @@ import { deleteUser } from "../redux/UserReducer";
 import contact from "../assets/searchimg1.jpg";
 import contactpfp from "../assets/icon-profile.png";
 
-import Popup from "../components/Popup";
+import PopUp from "../components/PopUp";
 
 
 interface Contact {
@@ -77,7 +77,7 @@ const Contacts = () => {
                 />
                 <div>
                   {isOpen && (
-                    <Popup close={() => togglePopup( data )} el={singleContact } />
+                    <PopUp close={() => togglePopup( data )} el={singleContact } />
                   )}
 
                 </div>