Merge pull request #35 from the-collab-lab/nr-dtp-iconbutton

Issue #14.3: Create <IconButton> Component
the-collab-lab · Sep 28, 2024 · a3596ce · a3596ce
2 parents 8040f53 + ea081ad
commit a3596ce
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
@@ -12,8 +12,12 @@
 		/>
 		<link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
 		<meta name="color-scheme" content="dark light" />
-		<title>Smart Shopping List</title>
+		<title>CollabShop</title>
 		<script type="module" src="/src/index.jsx" async></script>
+		<script
+			src="https://kit.fontawesome.com/06840d40e8.js"
+			crossorigin="anonymous"
+		></script>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
@@ -20,8 +20,9 @@ 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>
 );

diff --git a/src/components/IconButton.jsx b/src/components/IconButton.jsx
@@ -0,0 +1,15 @@
+import '../views/Layout.css';
+
+export function IconButton({
+	as: Component = 'button',
+	icon,
+	label,
+	...props
+}) {
+	return (
+		<Component {...props}>
+			{icon && <i className={icon}></i>} <br />
+			{label && <span>{label}</span>}
+		</Component>
+	);
+}
diff --git a/src/views/Layout.css b/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;
@@ -70,4 +71,5 @@
 .Nav-link.active {
 	text-decoration-thickness: 0.22em;
 	text-underline-offset: 0.1em;
+	background-color: var(--color-border);
 }
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -1,5 +1,5 @@
-import { NavLink, 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, SignOutButton } from '../api/useAuth.jsx';
@@ -21,8 +21,7 @@ export function Layout() {
 					<h1>Smart shopping list</h1>
 					{!!user ? (
 						<div>
-							<span>Signed in as {auth.currentUser.displayName}</span> (
-							<SignOutButton />)
+							<span>Signed in as {auth.currentUser.displayName}</span>
 						</div>
 					) : (
 						<SignInButton />
@@ -33,15 +32,26 @@ export function Layout() {
 				</main>
 				<nav className="Nav">
 					<div className="Nav-container">
-						<NavLink to="/" className="Nav-link" end>
-							Home
-						</NavLink>
-						<NavLink to="/list" className="Nav-link" end>
-							List
-						</NavLink>
-						<NavLink to="/manage-list" className="Nav-link" end>
-							Manage List
-						</NavLink>
+						<IconButton
+							as={NavLink}
+							className="Nav-link"
+							icon="fa-solid fa-list"
+							label="View Lists"
+							to="/"
+						/>
+						<IconButton
+							as={NavLink}
+							className="Nav-link"
+							icon="fa-solid fa-cart-plus"
+							label="Add Item"
+							to="/manage-list"
+						/>
+						<IconButton
+							as={SignOutButton}
+							className="Nav-link"
+							icon="fa-solid fa-right-from-bracket"
+							label="Sign Out"
+						/>
 					</div>
 				</nav>
 			</div>