// const menuOptions = [
// {
// labelId: 'menu.account',
// icon: (<Icon>account_circle</Icon>),
// component: (<AccountInfo info={props} />)
// },
// {
// labelId: 'menu.favorite',
// icon: (<Icon>favorite</Icon>),
// component: (<Favourites info={props} />)
// },
// {
// labelId: 'password',
// icon: (<Icon>enhanced_encryption</Icon>),
// component: (<Password info={props} />)
// }
// ]
// // when credit enabled
// if (isCreditEnabled){
// menuOptions.push({
// name: 'credit wallet',
// labelId: 'credit.wallet',
// icon: (<Purse/>),
// component: (<CreditManager />)
// })
// }
// const [index, setIndex] = useState(showFavorites ? 1 : showWallet ? 3 : 0)
// const [open, setOpen] = useState('')
{/* <div className="row">
<Paper className="paperContainer" style={{paddingRight:'1rem', height:'fit-content', width:'fit-content'}}>
<Tabs
orientation="vertical"
value={index}
onChange={(e, i) => setIndex(i)}
indicatorColor="primary"
textColor="primary"
style={{width:'20rem'}}
>
{menuOptions.map((option, i)=>
<Tab
key={i}
index={i}
label={<FormattedMessage id={option.labelId} />}
icon={option.icon}
name={option.name}
/>CreditManager
)}
</Tabs>
</Paper>
{menuOptions[index].component}
</div> */}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter