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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 1x 2x 2x 2x 2x 6x 1x 1x 1x 1x | import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { WebAppsUXContext } from '../Context'; const GridSelect = props => { const { id, label, helpText, wrapperClassName, labelClassName, options, onSelect, ...rest } = props; const { theme } = useContext(WebAppsUXContext); const labelClasses = classNames( 'block', 'mb-2', 'text-sm', 'font-medium', 'text-gray-700', 'dark:text-gray-300', labelClassName, ) return ( <div className={wrapperClassName} {...rest}> <label className={labelClasses} htmlFor={id}>{label}</label> <div className={`grid grid-cols-1 md:col-span-3 sm:grid-cols-${options.length / 2} xl:grid-cols-${options.length} gap-y-2 gap-x-4 mt-1 xl:mt-0 w-full dark:text-white`}> { Object(options).map(function (option) { return (option.selected) ? ( <div key={option.value} onClick={() => onSelect(option.value)} className={`border-2 border-white dark:border-gray-800 w-full bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform hover:-translate-y-2 cursor-pointer ring-4 ring-${theme}-600 dark:ring-${theme}-500 ring-opacity-50`}> <div className="flex justify-center h-14 p-2 bg-gray-300 dark:bg-gray-700 not-sr-only"> {option.object} </div> </div> ) : ( <div key={option.value} onClick={() => onSelect(option.value)} className="border-2 border-white dark:border-gray-800 w-full bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform hover:-translate-y-2 cursor-pointer"> <div className="flex justify-center h-14 p-2 bg-gray-300 dark:bg-gray-700 not-sr-only"> {option.object} </div> </div> ) }) } </div> {(helpText !== '') ? <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{helpText}</p> : null} </div> ) } GridSelect.propTypes = { id: PropTypes.string, label: PropTypes.string, helpText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), wrapperClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), labelClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), onSelect: PropTypes.func, } GridSelect.defaultProps = { id: '', label: '', helpText: '', wrapperClassName: 'mb-6', labelClassName: '', options: [], } export default GridSelect; |