gabehf/Prittee
1
0
Fork 0
mirror of https://github.com/gabehf/Prittee.git synced 2026-03-07 21:48:14 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add NavIcon component

Browse source
This commit is contained in:
Jack Davenport 2024-04-04 02:38:35 +00:00 • committed by GitHub
parent 7aa133a900
commit 8e0df8c6fc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/Components/Header.jsx
View file

@ -1,7 +1,7 @@
import { Box, Container } from "@mui/material"
import { NavLink } from "react-router-dom";
import { AccountBoxOutlined, PostAdd, LeaderboardOutlined } from '@mui/icons-material';
import { useNavigate } from "react-router-dom";
import NavIcon from "./NavIcon";
export default function Header() {
@ -14,16 +14,22 @@ export default function Header() {
<p className="text-md text-slate-300">An <span className='text-sky-400 italic'>unofficial</span> alternate front end for Pithee</p>
</Box>
<Box className='flex flex-row justify-between m-auto mb-6' width={125}>
<Box>
<NavLink to='/me'><AccountBoxOutlined /></NavLink>
</Box>
<Box>
<NavLink to='/leaderboard'><LeaderboardOutlined /></NavLink>
</Box>
<Box>
<NavLink to='/post'><PostAdd /></NavLink>
</Box>
<NavIcon
label="Profile"
href="/me"
icon={AccountBoxOutlined}
/>
<NavIcon
label="Leaderboard"
href="/leaderboard"
icon={LeaderboardOutlined}
/>
<NavIcon
label="Add Post"
href="/post"
icon={PostAdd}
/>
</Box>
</Container>
)
}
}

17
src/Components/NavIcon.jsx Normal file
View file

@ -0,0 +1,17 @@
import { Box, Tooltip } from "@mui/material"
import { NavLink, useLocation } from "react-router-dom";
export default function NavIcon({ label, href, icon }) {
const location = useLocation()
const IconComponent = icon
const isActive = location.pathname === href
return (
<Tooltip title={label}>
<Box>
<NavLink to={href}>
<IconComponent color={isActive ? "primary" : undefined} />
</NavLink>
</Box>
</Tooltip>
)
}