Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/az-golf-gurus. www.azgolfgurus.com
astro datocms typescript
Something went wrong. Try again.
1.1 kB · 67 lines
JSX
at v1
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768import React from 'react'import PropTypes from 'prop-types'import { Text } from 'rebass'
const inputSharedStyles = { display: 'block', width: '100%', border: 1, borderColor: 'grays.4', borderRadius: 1, paddingY: 2, paddingX: 3,
'&::placeholder': { color: 'grays.6', opacity: 1, },}
const Label = ({ sx, children, ...props }) => ( <Text as="label" sx={{ display: 'block', marginBottom: 2, fontSize: 2, fontFamily: 'geomanist', fontWeight: 'medium', ...sx, }} {...props} > {children} </Text>)
Label.propTypes = { sx: PropTypes.object, children: PropTypes.node.isRequired,}
const Input = ({ sx, ...props }) => ( <Text as="input" sx={{ ...inputSharedStyles, ...sx }} {...props} />)
Input.propTypes = { sx: PropTypes.object,}
const Textarea = ({ sx, ...props }) => ( <Text as="textarea" rows="4" sx={{ resize: 'vertical', ...inputSharedStyles, ...sx, }} {...props} />)
Textarea.propTypes = { sx: PropTypes.object,}
export { Label, Input, Textarea }