From e903af196d7c31109379ea847f67675d9384051f Mon Sep 17 00:00:00 2001
From: Kavan Gondalia <kavan155gondalia@gmail.com>
Date: Fri, 14 Jun 2024 22:11:21 +0530
Subject: [PATCH 1/2] fix: existing lint issues

---
 components/Agenda/agenda.js      |  5 +++--
 components/Footer/footer.js      |  9 +++------
 components/Form/Cfp/stepThree.js |  2 +-
 components/Form/select.js        |  2 +-
 components/Navbar/navbar.js      | 19 ++++++++++---------
 components/Select/select.js      |  2 +-
 components/Speaker/speaker.js    |  7 ++-----
 components/Venue/venue.js        |  3 ++-
 8 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/components/Agenda/agenda.js b/components/Agenda/agenda.js
index 6ee864f9..e6829c61 100644
--- a/components/Agenda/agenda.js
+++ b/components/Agenda/agenda.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import Heading from '../Typography/heading'
 import Paragraph from '../Typography/paragraph'
+import Image from 'next/image'
 
 function Agenda({ city }) {
   return (
@@ -39,7 +40,7 @@ function Agenda({ city }) {
 						  </div>
 						  {talk.speaker && typeof talk.speaker === 'number' ? <div className='flex items-center lg:mt-4'>
 							  <div className='w-[94px] h-[94px]'>
-								  <img src={city.speakers[talk.speaker - 1].img} alt={city.speakers[talk.speaker -1].name} className='object-cover rounded-full  w-full h-full'/>
+								  <Image src={city.speakers[talk.speaker - 1].img} alt={city.speakers[talk.speaker -1].name} className='object-cover rounded-full' height={'100%'} width={'100%'} />
 							  </div>
 							  <div className='ml-4 w-[300px] sm:w-[250px]'>
 								  <Heading typeStyle='heading-sm-semibold' className='text-white'>
@@ -54,7 +55,7 @@ function Agenda({ city }) {
 								  {talk.speaker.map((speak, i) => <div key={i} className='mt-6'>
 										  <div className='flex items-center lg:mt-4'>
 										  <div className='w-[94px] h-[94px]'>
-											  <img src={city.speakers[speak - 1].img} alt={city.speakers[speak - 1].name} className='object-cover rounded-full  w-full h-full' />
+											  <Image src={city.speakers[speak - 1].img} alt={city.speakers[speak - 1].name} className='object-cover rounded-full' height={'100%'} width={'100%'} />
 										  </div>
 										  <div className='ml-4 w-[300px] sm:w-[250px]'>
 								  <Heading typeStyle='heading-sm-semibold' className='text-white'>
diff --git a/components/Footer/footer.js b/components/Footer/footer.js
index 96bc009f..929c2160 100644
--- a/components/Footer/footer.js
+++ b/components/Footer/footer.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Image from 'next/image';
 
 function Footer() {
   const socials = [
@@ -21,7 +22,7 @@ function Footer() {
   return (
     <div className="container">
       <div className="w-full flex justify-between items-center p-4 sm:flex-col sm:gap-3">
-            <img src="/img/logo.png" alt="company logo" className="w-[150px]" />
+            <Image src="/img/logo.png" alt="company logo" width={150} height={42} />
             <div className="sm:hidden"> 
               {/* This div helps keep the text centered */}
             </div>
@@ -49,11 +50,7 @@ function Footer() {
                     rel="noreferrer"
                     className="w-12 h-12 rounded-lg border-[1.5px] border-[#556061] flex items-center justify-center hover:border-[#AD20E2] duration-150 ease-in-out"
                   >
-                    <img
-                      src={social.imgUrl}
-                      alt={social.name}
-                      className="w-8 h-8"
-                    />
+                    <Image src={social.imgUrl} alt={social.name} height={32} width={32} />
                   </a>
                 );
               })}
diff --git a/components/Form/Cfp/stepThree.js b/components/Form/Cfp/stepThree.js
index fa68ef2a..69d78fb9 100644
--- a/components/Form/Cfp/stepThree.js
+++ b/components/Form/Cfp/stepThree.js
@@ -37,7 +37,7 @@ function StepThree({ setStep, setForm, data }) {
   const [value, setValue] = useState({});
   useEffect(() => {
     setForm({ ...data, ...value});
-  }, [value]); 
+  }, [data, setForm, value]); 
   return (
     <form className="mt-3 w-[30rem] lg:w-[auto]" onSubmit={(e) => setStep(e, 4)}>
       <h1 className="text-white font-bold text-4xl lg:text-3xl">
diff --git a/components/Form/select.js b/components/Form/select.js
index d5e5a772..b390e7ba 100644
--- a/components/Form/select.js
+++ b/components/Form/select.js
@@ -45,7 +45,7 @@ function Dropdown({ options, title, setValue, multi }) {
     } else {
       setValue(selectedOption.value);
     }
-  }, [selectedOption]);
+  }, [multi, selectedOption, setValue]);
   return (
     <div className="relative inline-block w-full">
       <Select
diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js
index 1a004acc..54bb8875 100644
--- a/components/Navbar/navbar.js
+++ b/components/Navbar/navbar.js
@@ -1,11 +1,12 @@
 import Link from 'next/link';
 import Dropdown from '../illustration/dropdown';
-import { useState,useEffect,useRef} from 'react';
+import { useState,useEffect,useRef, useCallback} from 'react';
 import links from '../../config/links.json';
 import NavDrop from './navDrop';
 import Hamburger from '../illustration/hamburger';
 import { useMediaQuery } from 'react-responsive';
 import Cancel from '../illustration/cancel';
+import Image from 'next/image';
 
 
 
@@ -15,14 +16,14 @@ function Navbar() {
 	const [show, setShow] = useState(null);
 	const menuRef = useRef(null);
 	const svg = useRef(null);
-	function handleClosing(event) {
-		if (show && !event.target.closest('.subMenu')) {
-			setShow(false);
-		}
-	}
+    const handleClosing = useCallback((event) => {
+        if (show && !event.target.closest('.subMenu')) {
+            setShow(false);
+        }
+    }, [show]);
 	useEffect(() => {
 		document.addEventListener('mousedown', handleClosing);
-	}, [show]);
+	}, [handleClosing, show]);
 
 	const handleCloseMenu = (event) => {
 		if (menuRef .current && !menuRef .current.contains(event.target)) {
@@ -44,8 +45,8 @@ function Navbar() {
 				<div className='p-5 flex justify-between h-[75px] w-full items-center'>
 					<div className='flex items-center sm:justify-between sm:w-full'>
 						<Link href='/'>
-							<div className='flex items-center cursor-pointer w-[120px]'>
-								<img src='/img/logo.png' alt='conference logo' />
+							<div className='flex items-center cursor-pointer'>
+								<Image src='/img/logo.png' alt='conference logo' width={120} height={33} />
 							</div>
 						</Link>
 					</div>
diff --git a/components/Select/select.js b/components/Select/select.js
index b9fde89a..e2077ece 100644
--- a/components/Select/select.js
+++ b/components/Select/select.js
@@ -45,7 +45,7 @@ function Dropdown({ options, title, setValue, multi }) {
     } else {
       setValue(selectedOption.value);
     }
-  }, [selectedOption]);
+  }, [multi, selectedOption, setValue]);
   return (
     <div className="relative inline-block w-full">
       <Select
diff --git a/components/Speaker/speaker.js b/components/Speaker/speaker.js
index 97ad90f4..24104d6b 100644
--- a/components/Speaker/speaker.js
+++ b/components/Speaker/speaker.js
@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import React from 'react'
 
 function Speaker({details, location, className}) {
@@ -6,11 +7,7 @@ function Speaker({details, location, className}) {
 			className={`w-auto text-center flex flex-col items-center card h-auto rounded-md p-[27px] ${className}`}
 		>
 			<div className='w-[300px] h-[300px] lg:w-[250px] lg:h-[250px]'>
-				<img
-					src={details.img}
-					alt={details.name}
-					className='rounded-full w-full h-full object-cover'
-				/>
+				<Image src={details.img} alt={details.name} height={'100%'} width={'100%'} className='rounded-full w-full h-full object-cover' />
 			</div>
 			<div className='mt-[19px]'>
 				<h3 className='text-[23px] text-white'>{details.name}</h3>
diff --git a/components/Venue/venue.js b/components/Venue/venue.js
index 5640cbb0..a2b050b3 100644
--- a/components/Venue/venue.js
+++ b/components/Venue/venue.js
@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unescaped-entities */
 import React from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 
 function Venue({ className, city }) {
 	return (
@@ -14,7 +15,7 @@ function Venue({ className, city }) {
 							e.preventDefault()
 							window.open(city.map, '_blank', 'noopener')
 						}} className='w-8 h-8 bg-white rounded-xl flex items-center justify-center ml-auto'>
-							<img src='/img/mapIcon.svg' className='w-6' />
+							<Image src='/img/mapIcon.svg' alt='Map Icon' width={24} height={24} />
 						</button>
 					</div>
 					<div></div>

From 1b25e00f79525f24a9d4697e58c0afb0516fd816 Mon Sep 17 00:00:00 2001
From: Kavan Gondalia <kavan155gondalia@gmail.com>
Date: Fri, 14 Jun 2024 23:51:58 +0530
Subject: [PATCH 2/2] fix: speaker profile image size

---
 components/Speaker/speaker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Speaker/speaker.js b/components/Speaker/speaker.js
index 24104d6b..780a6749 100644
--- a/components/Speaker/speaker.js
+++ b/components/Speaker/speaker.js
@@ -7,7 +7,7 @@ function Speaker({details, location, className}) {
 			className={`w-auto text-center flex flex-col items-center card h-auto rounded-md p-[27px] ${className}`}
 		>
 			<div className='w-[300px] h-[300px] lg:w-[250px] lg:h-[250px]'>
-				<Image src={details.img} alt={details.name} height={'100%'} width={'100%'} className='rounded-full w-full h-full object-cover' />
+				<Image src={details.img} alt={details.name} width={0} height={0} sizes='100vw' className='rounded-full object-cover' />
 			</div>
 			<div className='mt-[19px]'>
 				<h3 className='text-[23px] text-white'>{details.name}</h3>