Continue typescript conversion

components/CardsLanding.js

@@ -20,7 +20,7 @@ const CardsLanding = () => (
 			<CardLanding
 				image={cardPage}
 				text="7 pages fully designed and easily customizable"
-				title="Templates"
+				title='"Templates"'
 			/>
 			<CardLanding
 				image={cardServer}

components/Nav.tsx

@@ -8,11 +8,16 @@ import Image from 'next/image';
 import Link from 'next/link';
 import Logo from 'public/logo.svg';
 
-const Nav = (props: any) => {
+type NavProps = {
+	user: Record<string, unknown>;
+	signOut: () => void;
+};
+
+const Nav = ({ user, signOut }: NavProps): JSX.Element => {
 	// Modify you menu directly here
 	const NavMenu = (
 		<>
-			{props.user && (
+			{user && (
 				<Link href="/dashboard">
 					<a className="nav-btn">Dashboard</a>
 				</Link>
@@ -26,8 +31,8 @@ const Nav = (props: any) => {
 				<a className="nav-btn">Contact Us</a>
 			</Link>
 
-			{props.user ? (
-				<button className="btn btn-xs text-xs" onClick={() => props.signOut()}>
+			{user ? (
+				<button className="btn btn-xs text-xs" onClick={() => signOut()}>
 					<LogOut size={12} className="mr-2" />
 					Logout
 				</button>

components/UI/CardLanding.tsx

@@ -4,14 +4,19 @@ This card is used on the landing page
 
 import Image from 'next/image';
 
-const CardLanding = (props) => {
-	const { image, title, text } = props;
+type CardLandingProps = {
+	image: string;
+	title: string;
+	text: string;
+};
+
+const CardLanding = ({ image, title, text }: CardLandingProps): JSX.Element => {
 	return (
 		<div className="w-80 h-48 p-5 sm:ml-5 mb-5 bg-base-100 flex">
 			<div>
 				<div className="rounded-full w-12 h-12 border flex bg-neutral-content">
 					<div className="m-auto flex">
-						<Image src={image} width={24} height={24} />
+						<Image src={image} width={24} height={24} alt={`${title} logo`} />
 					</div>
 				</div>
 			</div>

components/UI/KeyFeature.tsx

@@ -4,12 +4,16 @@ This card is used on the landing page
 
 import { FiStar } from 'react-icons/fi';
 
-const KeyFeature = (props) => (
+type KeyFeatureProps = {
+	children: JSX.Element;
+};
+
+const KeyFeature = ({ children }: KeyFeatureProps): JSX.Element => (
 	<div className="shadow-sm p-5 mb-5 bg-base-100 flex italic">
 		<div className="p-2 bg-accent-focus w-12 h-12 text-white rounded-sm my-auto flex">
 			<FiStar className="text-2xl m-auto" />
 		</div>
-		<div className="m-auto ml-3">{props.children}</div>
+		<div className="m-auto ml-3">{children}</div>
 	</div>
 );
 

components/UI/Login.tsx

@@ -3,36 +3,39 @@ import router from 'next/router';
 import { toast } from 'react-toastify';
 import { useState } from 'react';
 
-const Login = (props) => {
+type LoginProps = {
+	resetPassword: (email: string) => Promise<{ error: { message: string } }>;
+	signIn: ({}) => Promise<{ data: Record<string, unknown>; error: { message: string } }>;
+};
+
+const Login = ({ resetPassword, signIn }: LoginProps): JSX.Element => {
 	const [email, setEmail] = useState('');
 	const [password, setPassword] = useState('');
 	const [forgot, setForgot] = useState(false);
 
-	const resetPassword = () => {
-		props.resetPassword(email).then((result) => {
+	const resetPasswordLogin = () => {
+		resetPassword(email).then((result: { error: { message: string } }) => {
 			if (result.error) {
 				toast.error(result.error.message);
 			} else toast.success('Check your email to reset your password!');
 		});
 	};
 
-	const login = (e) => {
+	const login = (e: React.SyntheticEvent<HTMLButtonElement>) => {
 		e.preventDefault();
 
 		// Handle the login. Go to the homepage if success or display an error.
-		props
-			.signIn({
-				email,
-				password,
-			})
-			.then((result) => {
-				if (result.data) {
-					router.push('/');
-				}
-				if (result.error) {
-					toast.error(result.error.message);
-				}
-			});
+		signIn({
+			email,
+			password,
+		}).then((result: { data: Record<string, unknown>; error: { message: string } }) => {
+			if (result.data) {
+				router.push('/');
+			}
+			if (result.error) {
+				toast.error(result.error.message);
+			}
+		});
 	};
 
 	return (
@@ -99,11 +102,10 @@ const Login = (props) => {
 							</span>
 							<div className="flex flex-col space-y-4">
 								<button
-									href="#"
 									className="flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-base-200 rounded-md group hover:bg-base-300 focus:outline-none "
 									onClick={(event) => {
 										event.preventDefault();
-										props.signIn({ provider: 'google' });
+										signIn({ provider: 'google' });
 									}}
 								>
 									<div className="text-base-content">
@@ -141,7 +143,7 @@ const Login = (props) => {
 								className="btn btn-primary w-full btn-sm"
 								onClick={(event) => {
 									event.preventDefault();
-									resetPassword();
+									resetPasswordLogin();
 								}}
 							>
 								Recover my password