API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 27th, 2017
365
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 14.68 KB | None | 0 0
raw download clone embed print report
  1. import React, {Component} from 'react';
  2. import {TabContent, TabPane, Nav, NavItem, NavLink, Progress, Label, Input} from 'reactstrap';
  3. import classnames from 'classnames';
  4.  
  5. class Aside extends Component {
  6.   constructor(props) {
  7.     super(props);
  8.  
  9.     this.toggle = this.toggle.bind(this);
  10.     this.state = {
  11.       activeTab: '1'
  12.     };
  13.   }
  14.  
  15.   toggle(tab) {
  16.     if (this.state.activeTab !== tab) {
  17.       this.setState({
  18.         activeTab: tab
  19.       });
  20.     }
  21.   }
  22.  
  23.   render() {
  24.     return (
  25.       <aside className="aside-menu">
  26.         <Nav tabs>
  27.           <NavItem>
  28.             <NavLink className={classnames({ active: this.state.activeTab === '1' })}
  29.                      onClick={() => { this.toggle('1'); }}>
  30.               <i className="icon-list"></i>
  31.             </NavLink>
  32.           </NavItem>
  33.           <NavItem>
  34.             <NavLink className={classnames({ active: this.state.activeTab === '2' })}
  35.                      onClick={() => { this.toggle('2'); }}>
  36.               <i className="icon-speech"></i>
  37.             </NavLink>
  38.           </NavItem>
  39.           <NavItem>
  40.             <NavLink className={classnames({ active: this.state.activeTab === '3' })}
  41.                      onClick={() => { this.toggle('3'); }}>
  42.               <i className="icon-settings"></i>
  43.             </NavLink>
  44.           </NavItem>
  45.         </Nav>
  46.         <TabContent activeTab={this.state.activeTab}>
  47.           <TabPane tabId="1">
  48.             <div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
  49.               <small><b>Today</b></small>
  50.             </div>
  51.             <hr className="transparent mx-3 my-0"/>
  52.             <div className="callout callout-warning m-0 py-3">
  53.               <div className="avatar float-right">
  54.                 <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  55.               </div>
  56.               <div>Meeting with <strong>Lucas</strong></div>
  57.               <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
  58.               <small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
  59.             </div>
  60.             <hr className="mx-3 my-0"/>
  61.             <div className="callout callout-info m-0 py-3">
  62.               <div className="avatar float-right">
  63.                 <img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  64.               </div>
  65.               <div>Skype with <strong>Megan</strong></div>
  66.               <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 5pm</small>
  67.               <small className="text-muted"><i className="icon-social-skype"></i>&nbsp; On-line</small>
  68.             </div>
  69.             <hr className="transparent mx-3 my-0"/>
  70.             <div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
  71.               <small><b>Tomorrow</b></small>
  72.             </div>
  73.             <hr className="transparent mx-3 my-0"/>
  74.             <div className="callout callout-danger m-0 py-3">
  75.               <div>New UI Project - <strong>deadline</strong></div>
  76.               <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 10 - 11pm</small>
  77.               <small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
  78.               <div className="avatars-stack mt-2">
  79.                 <div className="avatar avatar-xs">
  80.                   <img src={'img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  81.                 </div>
  82.                 <div className="avatar avatar-xs">
  83.                   <img src={'img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  84.                 </div>
  85.                 <div className="avatar avatar-xs">
  86.                   <img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  87.                 </div>
  88.                 <div className="avatar avatar-xs">
  89.                   <img src={'img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  90.                 </div>
  91.                 <div className="avatar avatar-xs">
  92.                   <img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  93.                 </div>
  94.               </div>
  95.             </div>
  96.             <hr className="mx-3 my-0"/>
  97.             <div className="callout callout-success m-0 py-3">
  98.               <div><strong>#10 Startups.Garden</strong> Meetup</div>
  99.               <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
  100.               <small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
  101.             </div>
  102.             <hr className="mx-3 my-0"/>
  103.             <div className="callout callout-primary m-0 py-3">
  104.               <div><strong>Team meeting</strong></div>
  105.               <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 6pm</small>
  106.               <small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
  107.               <div className="avatars-stack mt-2">
  108.                 <div className="avatar avatar-xs">
  109.                   <img src={'img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  110.                 </div>
  111.                 <div className="avatar avatar-xs">
  112.                   <img src={'img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  113.                 </div>
  114.                 <div className="avatar avatar-xs">
  115.                   <img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  116.                 </div>
  117.                 <div className="avatar avatar-xs">
  118.                   <img src={'img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  119.                 </div>
  120.                 <div className="avatar avatar-xs">
  121.                   <img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  122.                 </div>
  123.                 <div className="avatar avatar-xs">
  124.                   <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  125.                 </div>
  126.                 <div className="avatar avatar-xs">
  127.                   <img src={'img/avatars/8.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  128.                 </div>
  129.               </div>
  130.             </div>
  131.             <hr className="mx-3 my-0"/>
  132.           </TabPane>
  133.           <TabPane tabId="2" className="p-3">
  134.             <div className="message">
  135.               <div className="py-3 pb-5 mr-3 float-left">
  136.                 <div className="avatar">
  137.                   <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  138.                   <span className="avatar-status badge-success"></span>
  139.                 </div>
  140.               </div>
  141.               <div>
  142.                 <small className="text-muted">Lukasz Holeczek</small>
  143.                 <small className="text-muted float-right mt-1">1:52 PM</small>
  144.               </div>
  145.               <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
  146.               <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  147.                 tempor incididunt...
  148.               </small>
  149.             </div>
  150.             <hr/>
  151.             <div className="message">
  152.               <div className="py-3 pb-5 mr-3 float-left">
  153.                 <div className="avatar">
  154.                   <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  155.                   <span className="avatar-status badge-success"></span>
  156.                 </div>
  157.               </div>
  158.               <div>
  159.                 <small className="text-muted">Lukasz Holeczek</small>
  160.                 <small className="text-muted float-right mt-1">1:52 PM</small>
  161.               </div>
  162.               <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
  163.               <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  164.                 tempor incididunt...
  165.               </small>
  166.             </div>
  167.             <hr/>
  168.             <div className="message">
  169.               <div className="py-3 pb-5 mr-3 float-left">
  170.                 <div className="avatar">
  171.                   <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  172.                   <span className="avatar-status badge-success"></span>
  173.                 </div>
  174.               </div>
  175.               <div>
  176.                 <small className="text-muted">Lukasz Holeczek</small>
  177.                 <small className="text-muted float-right mt-1">1:52 PM</small>
  178.               </div>
  179.               <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
  180.               <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  181.                 tempor incididunt...
  182.               </small>
  183.             </div>
  184.             <hr/>
  185.             <div className="message">
  186.               <div className="py-3 pb-5 mr-3 float-left">
  187.                 <div className="avatar">
  188.                   <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  189.                   <span className="avatar-status badge-success"></span>
  190.                 </div>
  191.               </div>
  192.               <div>
  193.                 <small className="text-muted">Lukasz Holeczek</small>
  194.                 <small className="text-muted float-right mt-1">1:52 PM</small>
  195.               </div>
  196.               <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
  197.               <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  198.                 tempor incididunt...
  199.               </small>
  200.             </div>
  201.             <hr/>
  202.             <div className="message">
  203.               <div className="py-3 pb-5 mr-3 float-left">
  204.                 <div className="avatar">
  205.                   <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
  206.                   <span className="avatar-status badge-success"></span>
  207.                 </div>
  208.               </div>
  209.               <div>
  210.                 <small className="text-muted">Lukasz Holeczek</small>
  211.                 <small className="text-muted float-right mt-1">1:52 PM</small>
  212.               </div>
  213.               <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
  214.               <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  215.                 tempor incididunt...
  216.               </small>
  217.             </div>
  218.           </TabPane>
  219.           <TabPane tabId="3" className="p-3">
  220.             <h6>Settings</h6>
  221.  
  222.             <div className="aside-options">
  223.               <div className="clearfix mt-4">
  224.                 <small><b>Option 1</b></small>
  225.                 <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
  226.                   <Input type="checkbox" className="switch-input" defaultChecked/>
  227.                   <span className="switch-label" data-on="On" data-off="Off"></span>
  228.                   <span className="switch-handle"></span>
  229.                 </Label>
  230.               </div>
  231.               <div>
  232.                 <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  233.                   tempor incididunt ut labore et dolore magna aliqua.
  234.                 </small>
  235.               </div>
  236.             </div>
  237.  
  238.             <div className="aside-options">
  239.               <div className="clearfix mt-3">
  240.                 <small><b>Option 2</b></small>
  241.                 <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
  242.                   <Input type="checkbox" className="switch-input"/>
  243.                   <span className="switch-label" data-on="On" data-off="Off"></span>
  244.                   <span className="switch-handle"></span>
  245.                 </Label>
  246.               </div>
  247.               <div>
  248.                 <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  249.                   tempor incididunt ut labore et dolore magna aliqua.
  250.                 </small>
  251.               </div>
  252.             </div>
  253.  
  254.             <div className="aside-options">
  255.               <div className="clearfix mt-3">
  256.                 <small><b>Option 3</b></small>
  257.                 <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
  258.                   <Input type="checkbox" className="switch-input"/>
  259.                   <span className="switch-label" data-on="On" data-off="Off"></span>
  260.                   <span className="switch-handle"></span>
  261.                 </Label>
  262.               </div>
  263.             </div>
  264.  
  265.             <div className="aside-options">
  266.               <div className="clearfix mt-3">
  267.                 <small><b>Option 4</b></small>
  268.                 <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
  269.                   <Input type="checkbox" className="switch-input" defaultChecked/>
  270.                   <span className="switch-label" data-on="On" data-off="Off"></span>
  271.                   <span className="switch-handle"></span>
  272.                 </Label>
  273.               </div>
  274.             </div>
  275.  
  276.             <hr/>
  277.             <h6>System Utilization</h6>
  278.  
  279.             <div className="text-uppercase mb-1 mt-4">
  280.               <small><b>CPU Usage</b></small>
  281.             </div>
  282.             <Progress className="progress-xs" color="info" value="25"/>
  283.             <small className="text-muted">348 Processes. 1/4 Cores.</small>
  284.  
  285.             <div className="text-uppercase mb-1 mt-2">
  286.               <small><b>Memory Usage</b></small>
  287.             </div>
  288.             <Progress className="progress-xs" color="warning" value="70"/>
  289.             <small className="text-muted">11444GB/16384MB</small>
  290.  
  291.             <div className="text-uppercase mb-1 mt-2">
  292.               <small><b>SSD 1 Usage</b></small>
  293.             </div>
  294.             <Progress className="progress-xs" color="danger" value="95"/>
  295.             <small className="text-muted">243GB/256GB</small>
  296.  
  297.             <div className="text-uppercase mb-1 mt-2">
  298.               <small><b>SSD 2 Usage</b></small>
  299.             </div>
  300.             <Progress className="progress-xs" color="success" value="10"/>
  301.             <small className="text-muted">25GB/256GB</small>
  302.           </TabPane>
  303.         </TabContent>
  304.       </aside>
  305.     )
  306.   }
  307. }
  308.  
  309. export default Aside;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!