Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 1x 4x 4x 4x 4x 4x 1x 1x | import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import Link from './Link'; import { WebAppsUXContext } from '../Context/index'; const DropDownItem = props => { const { active, align, shade, darkShade, className, children, ...attributes } = props; const { theme } = useContext(WebAppsUXContext); const color = (props.color === 'brand') ? theme : props.color; const classes = classNames( `text-${align}`, 'py-2', 'px-4', 'outline-none', 'focus:outline-none', 'ease-linear', 'transition-all', 'duration-150', `text-${color}-${shade}`, `dark:text-${color}-${darkShade}`, 'bg-transparent', 'hover:font-semibold', `hover:bg-gray-100`, `dark:hover:bg-gray-600`, (active) ? 'font-semibold bg-gray-100 dark:bg-gray-600' : '', className ); return (props.href !== undefined || props.to !== undefined) ? <Link className={classes} {...attributes}>{children}</Link> : <button type="button" className={classes} {...attributes}>{children}</button> } DropDownItem.propTypes = { active: PropTypes.bool, align: PropTypes.oneOf(['left', 'right', 'center']), color: PropTypes.string, shade: PropTypes.string, darkShade: PropTypes.string, } DropDownItem.defaultProps = { active: false, align: 'center', color: 'brand', shade: '600', darkShade: '400', } export default DropDownItem; |