57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import { CSSProperties } from 'react'
|
|
|
|
import addIcon from '../assets/addIcon.svg'
|
|
import filterIcon from '../assets/filterIcon.svg'
|
|
import userIcon from '../assets/userIcon.svg'
|
|
|
|
const styles = {
|
|
navBar: {
|
|
backgroundColor: 'var(--bs-success)',
|
|
height: 56,
|
|
width: '100%',
|
|
} as CSSProperties,
|
|
navBarGroup: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
height: '100%',
|
|
margin: 'auto',
|
|
} as CSSProperties,
|
|
navBarElement: {
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
} as CSSProperties,
|
|
}
|
|
|
|
type BottomNavBarProps = {
|
|
width: number,
|
|
toggleFilters: (state: boolean) => void,
|
|
}
|
|
|
|
function BottomNavBar({ width, toggleFilters }: BottomNavBarProps) {
|
|
return (
|
|
<div style={styles.navBar}>
|
|
<div style={{ ...styles.navBarGroup, width: width }}>
|
|
|
|
<a href='#' style={styles.navBarElement} onClick={() => toggleFilters(true)}>
|
|
<img src={filterIcon} alt='Фильтровать объявления' title='Фильтровать объявления' />
|
|
</a>
|
|
|
|
<Link style={styles.navBarElement} to='/add' >
|
|
<img src={addIcon} alt='Опубликовать объявление' title='Опубликовать объявление' />
|
|
</Link>
|
|
|
|
<Link style={styles.navBarElement} to='/user' >
|
|
<img src={userIcon} alt='Личный кабинет' title='Личный кабинет' />
|
|
</Link>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BottomNavBar
|