chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(aklive2d): use scss, stylelint, and postcss

Browse Source
This commit is contained in:
Haoyu Xu
2023-03-14 13:20:58 -04:00
parent 56e0d8178a
commit f14b8fc079
24 changed files with 1326 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
directory/src/component/dropdown.jsx
View File

@@ -2,7 +2,7 @@ import React, {
useState
} from 'react'
import PropTypes from 'prop-types';
import './dropdown.css'
import classes from './dropdown.module.scss'
export default function Dropdown(props) {
const [hidden, setHidden] = useState(true)
@@ -13,34 +13,34 @@ export default function Dropdown(props) {
return (
<>
<section className={`dropdown ${props.className ? props.className : ''} ${hidden ? '' : 'active'}`} >
<section className={`${classes.dropdown} ${hidden ? '' : classes.active} ${props.className ? props.className : ''}`} >
<section
className='text'
className={classes.text}
onClick={() => toggleDropdown()}
>
<span className='content'>{props.text}</span>
<span className='icon'></span>
<span className={classes.content}>{props.text}</span>
<span className={classes.icon}></span>
</section>
<ul className='menu' style={props.activeColor}>
<ul className={classes.menu} style={props.activeColor}>
{
props.menu.map((item) => {
return (
<li
key={item.name}
className={`item${item.name === props.text || (props.activeRule && props.activeRule(item)) ? ' active' : ''}`}
className={`${classes.item} ${item.name === props.text || (props.activeRule && props.activeRule(item)) ? classes.active : ''}`}
onClick={() => {
props.onClick(item)
toggleDropdown()
}}
>
<section className="text">{item.name}</section>
<section className={classes.text}>{item.name}</section>
</li>
)
})
}
</ul>
<section
className='overlay'
className={classes.overlay}
hidden={hidden}
onClick={() => toggleDropdown()}
/>