File Manager

X7ROOT File Manager

Current Path: /opt/alt/alt-nodejs12/root/usr/lib/node_modules/npm/docs/src/components

opt / alt / alt-nodejs12 / root / usr / lib / node_modules / npm / docs / src / components /

?? ..
?? Accordion.js(1.14 KB)
?? Button.js(478 B)
?? DocLinks.js(1.83 KB)
?? FoundTypo.js(815 B)
?? MobileSidebar.js(756 B)
?? Sidebar.js(619 B)
?? home
?? layout.js(604 B)
?? links.js(970 B)
?? navbar.js(3.17 KB)
?? scripts.js(610 B)
?? seo.js(1.72 KB)

Editing: Accordion.js

import React from 'react'
import styled from 'styled-components'
import downCarrot from '../images/down-carrot.svg'
import upCarrot from '../images/up-carrot.svg'

const SectionButton = styled.button`
  outline: none;
  background-color: transparent;
  cursor: pointer;
  color: red;
  border: none;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 0;
  transition: opacity .5s;

&:after {
    background: center / contain no-repeat url(${(props) => props.isOpen ? upCarrot : downCarrot});
    content: '';
    height: 11px;
    width: 28px;
    display: inline-block;
  }

&:hover {
    opacity: .6;
  }
`

class Accordion extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isOpen: true
    }
    this.onHide = this.onHide.bind(this)
  }

onHide () {
    this.setState({isOpen: !this.state.isOpen})
  }

render () {
    return (
      <div>
        <SectionButton isOpen={this.state.isOpen} onClick={this.onHide}>{this.props.section}</SectionButton>
        {this.state.isOpen &&
          <div>
            {this.props.children}
          </div>
        }
      </div>
    )
  }
}

export default Accordion

X7ROOT File Manager

Editing: Accordion.js

Upload File

Create Folder