lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add icons and make customer data cards editable

Browse source
This commit is contained in:
José Oliveira 2021-10-12 13:54:36 +01:00
parent 4b461c0a57
commit 5cc63d05a6
25 changed files with 431 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

24
new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.js
View file

@ -2,6 +2,11 @@ import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames'
import React from 'react'
import { ReactComponent as CustomerDataReversedIcon } from 'src/styling/icons/customer-nav/data/comet.svg'
import { ReactComponent as CustomerDataIcon } from 'src/styling/icons/customer-nav/data/white.svg'
import { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/customer-nav/overview/comet.svg'
import { ReactComponent as OverviewIcon } from 'src/styling/icons/customer-nav/overview/white.svg'
import styles from './CustomerSidebar.styles.js'
const useStyles = makeStyles(styles)
@ -11,24 +16,31 @@ const CustomerSidebar = ({ isSelected, onClick }) => {
const sideBarOptions = [
{
code: 'overview',
display: 'Overview'
display: 'Overview',
Icon: OverviewIcon,
InverseIcon: OverviewReversedIcon
},
{
code: 'customerData',
display: 'Customer Data'
display: 'Customer Data',
Icon: CustomerDataIcon,
InverseIcon: CustomerDataReversedIcon
}
]
return (
<div className={classes.sidebar}>
{sideBarOptions?.map(it => (
{sideBarOptions?.map(({ Icon, InverseIcon, display, code }) => (
<div
className={classnames({
[classes.activeLink]: isSelected(it),
[classes.activeLink]: isSelected(code),
[classes.link]: true
})}
onClick={() => onClick(it)}>
{it.display}
onClick={() => onClick(code)}>
<div className={classes.icon}>
{isSelected(code) ? <Icon /> : <InverseIcon />}
</div>
{display}
</div>
))}
</div>