-
Notifications
You must be signed in to change notification settings - Fork 0
/
SidebarProjectButton.jsx
63 lines (55 loc) · 1.75 KB
/
SidebarProjectButton.jsx
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
import React from 'react'
import { get } from 'lodash'
import classNames from 'classnames'
import styles from './SidebarProjectButton.css'
import { Link } from 'react-router'
import book from 'stemn-shared/assets/images/pure-vectors/book.svg'
import tutorial from 'stemn-shared/assets/images/pure-vectors/monitor-click.svg'
import Drive from 'stemn-shared/assets/icons/providers/drive.js'
import Dropbox from 'stemn-shared/assets/icons/providers/dropbox.js'
export default (props) => {
const iconStyle = { width: '22px', height: '22px' }
const { item, key, to, clickFn, icon } = props
const getIcon = (provider) => {
if (provider == 'dropbox') {
return <Dropbox size={ 14 } />
} else if (provider == 'drive') {
return <Drive size={ 14 } />
}
return <img src={ icon == 'tutorial' ? tutorial : book } style={ iconStyle } />
}
const inner = (
<div className="layout-row layout-align-start-center">
<div style={ iconStyle } className="layout-column layout-align-center-center">
{ getIcon(get(item, 'remote.provider')) }
</div>
<div className={ `${styles.text} flex` }>{ item.name }</div>
</div>
)
if (item) {
if (to) {
return (
<Link
className={ classNames(styles.sidebarButton) }
activeClassName="active"
key={ key }
to={ to }
onClick={ () => { if (clickFn) { clickFn() } } }
>
{ inner }
</Link>
)
}
return (
<a
className={ classNames(styles.sidebarButton) }
key={ key }
onClick={ () => { if (clickFn) { clickFn() } } }
>
{ inner }
</a>
)
}
return null
}
// <img src={props.icon == 'tutorial' ? tutorial : book} style={iconStyle}/>