File size: 2,008 Bytes
ece5841 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types';
import { NavLink, Text, ThemeIcon } from '@mantine/core'
import { GearIcon, HomeIcon, PlayIcon } from '@radix-ui/react-icons'
const NavbarLinks = () => {
const [active, setActive] = useState(null);
const links = linksList.map((link, index) => <NavbarLink key={index} label={link.label} icon={link.icon} to={link.to} index={index} active={active} setActive={setActive} />)
return (
<div>{links}</div>
)
}
const NavbarLink = ({ label, icon, to, index, active, setActive }) => {
return (
<NavLink
sx={(theme) => ({
width: '100%',
padding: theme.spacing.xs,
// borderRadius: theme.radius.sm,
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
'&:hover': {
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
},
})}
active={active === index}
onClick={() => setActive(index)}
component={Link}
to={to}
icon={
<ThemeIcon variant="filled" color={active === index ? 'gray' : 'lime'}>
{icon}
</ThemeIcon>
}
label={
<Text size="sm">{label}</Text>
}
color='lime'
variant='filled'
>
</NavLink>
)
}
NavbarLink.propTypes = {
label: PropTypes.string,
icon: PropTypes.object,
to: PropTypes.string,
index: PropTypes.number,
active: PropTypes.number,
setActive: PropTypes.func
}
const linksList = [
{ label: 'Home', icon: <HomeIcon />, to: "/home" },
{ label: 'Play Chess', icon: <PlayIcon />, to: "/play" },
{ label: 'Settings', icon: <GearIcon />, to: "/settings" },
]
export default NavbarLinks |