feat(#14.3) create IconButton component and render in Layout.jsx. Use…

… Layout.jsx css.
the-collab-lab · Sep 26, 2024 · 919d09c · 919d09c
1 parent 8040f53
commit 919d09c
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 3 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/components/IconButton.jsx b/src/components/IconButton.jsx
@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import '../views/Layout.css';
+
+export function IconButton({ icon, label, link }) {
+	const navigate = useNavigate();
+	const [clicked, setClicked] = useState(false);
+
+	const handleClick = () => {
+		// e.preventDefault();
+		navigate(link);
+		setClicked(true);
+	};
+
+	return (
+		<button onClick={handleClick} className={clicked ? 'clicked-link' : ''}>
+			{icon && <i className={icon}></i>} <br />
+			{label && <span>{label}</span>}
+		</button>
+	);
+}
diff --git a/src/views/Layout.css b/src/views/Layout.css
@@ -67,7 +67,13 @@
 	text-underline-offset: 0.1em;
 }
 
+/* .Nav-link.active {
+	text-decoration-thickness: 0.22em;
+	text-underline-offset: 0.1em;
+} */
+
 .Nav-link.active {
 	text-decoration-thickness: 0.22em;
 	text-underline-offset: 0.1em;
+	background-color: green;
 }
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -1,5 +1,5 @@
 import { NavLink, Outlet } 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';
@@ -33,6 +33,9 @@ export function Layout() {
 				</main>
 				<nav className="Nav">
 					<div className="Nav-container">
+						<NavLink to="/list" className="Nav-link" end>
+							<IconButton icon="fa-solid fa-right-to-bracket" label="Login" />
+						</NavLink>
 						<NavLink to="/" className="Nav-link" end>
 							Home
 						</NavLink>