gabehf/Prittee
1
0
Fork 0
mirror of https://github.com/gabehf/Prittee.git synced 2026-03-15 02:15:55 -07: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

26
src/Components/Header.jsx
View file

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