Refactor IconButton for flexibility

src/api/useAuth.jsx

@@ -20,8 +20,8 @@ export const SignInButton = () => (
 /**
  * A button that signs the user out of the app using Firebase Auth.
  */
-export const SignOutButton = () => (
-	<button type="button" onClick={() => auth.signOut()}>
+export const SignOutButton = ({ className }) => (
+	<button className={className} type="button" onClick={() => auth.signOut()}>
 		<i className="fa-solid fa-right-from-bracket"></i> <br />
 		Sign Out
 	</button>

src/components/IconButton.jsx

@@ -1,39 +1,15 @@
-import { useState } from 'react';
-import { auth } from '../api/config';
-import { useNavigate, NavLink } from 'react-router-dom';
 import '../views/Layout.css';
 
-export function IconButton({ as, icon, label, link }) {
-	const navigate = useNavigate();
-	const [clicked, setClicked] = useState(false);
-
-	const handleClick = () => {
-		e.preventDefault();
-		navigate(link);
-		setClicked(true);
-	};
-
-	if (as === 'NavLink') {
-		return (
-			<NavLink to={link} className="Nav-link">
-				{icon && <i className={icon}></i>} <br />
-				{label && <span>{label}</span>}
-			</NavLink>
-		);
-	} else if (as === 'SignOut') {
-		return (
-			<NavLink onClick={() => auth.signOut()} to={link} className="Nav-link">
-				{icon && <i className={icon}></i>} <br />
-				{label && <span>{label}</span>}
-			</NavLink>
-		);
-	} else {
-		<button
-			onClick={handleClick}
-			className={`${clicked ? 'clicked-link' : ''} Nav-link`}
-		>
+export function IconButton({
+	as: Component = 'button',
+	icon,
+	label,
+	...props
+}) {
+	return (
+		<Component {...props}>
 			{icon && <i className={icon}></i>} <br />
 			{label && <span>{label}</span>}
-		</button>;
-	}
+		</Component>
+	);
 }

src/views/Layout.css

@@ -57,7 +57,8 @@
 
 .Nav-link {
 	--color-text: var(--color-accent);
-
+	background: none;
+	border: none;
 	color: var(--color-text);
 	font-size: 1.4em;
 	flex: 0 1 auto;

src/views/Layout.jsx

@@ -1,8 +1,8 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, NavLink } from 'react-router-dom';
 import { IconButton } from '../components/IconButton';
 import './Layout.css';
 import { auth } from '../api/config.js';
-import { useAuth, SignInButton } from '../api/useAuth.jsx';
+import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
 
 /**
  * TODO: The links defined in this file don't work!
@@ -33,22 +33,24 @@ export function Layout() {
 				<nav className="Nav">
 					<div className="Nav-container">
 						<IconButton
-							as="NavLink"
+							as={NavLink}
+							className="Nav-link"
 							icon="fa-solid fa-list"
 							label="View Lists"
-							link="/"
+							to="/"
 						/>
 						<IconButton
-							as="NavLink"
+							as={NavLink}
+							className="Nav-link"
 							icon="fa-solid fa-cart-plus"
 							label="Add Item"
-							link="/manage-list"
+							to="/manage-list"
 						/>
 						<IconButton
-							as="SignOut"
+							as={SignOutButton}
+							className="Nav-link"
 							icon="fa-solid fa-right-from-bracket"
 							label="Sign Out"
-							link="/"
 						/>
 					</div>
 				</nav>