From 919d09cbbdd4520ed74fafcf01475e0925aad34c Mon Sep 17 00:00:00 2001 From: DoribelTerceroParker Date: Thu, 26 Sep 2024 14:40:34 -0400 Subject: [PATCH 1/6] feat(#14.3) create IconButton component and render in Layout.jsx. Use Layout.jsx css. --- index.html | 8 ++++++-- src/components/IconButton.jsx | 21 +++++++++++++++++++++ src/views/Layout.css | 6 ++++++ src/views/Layout.jsx | 5 ++++- 4 files changed, 37 insertions(+), 3 deletions(-) create mode 100644 src/components/IconButton.jsx diff --git a/index.html b/index.html index 5016fc3..41804b9 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -12,8 +12,12 @@ /> - Smart Shopping List + CollabShop +
diff --git a/src/components/IconButton.jsx b/src/components/IconButton.jsx new file mode 100644 index 0000000..b8cd243 --- /dev/null +++ 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 ( + + ); +} diff --git a/src/views/Layout.css b/src/views/Layout.css index 85be734..87aa415 100644 --- 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 index a905bb8..8547ab1 100644 --- 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() {