// 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