Skip to content

Instantly share code, notes, and snippets.

@maacpiash
Created July 11, 2023 12:17
Show Gist options
  • Save maacpiash/f9b4c27481f2ab720236bc23b42e6555 to your computer and use it in GitHub Desktop.
Save maacpiash/f9b4c27481f2ab720236bc23b42e6555 to your computer and use it in GitHub Desktop.
Button
import { children, JSX, mergeProps } from 'solid-js'
export interface ButtonProps {
bgColor?: string
hoverColor?: string
activeColor?: string
children: JSX.Element
}
export default function Button(props: ButtonProps) {
const childProp = children(() => props.children)
const mergedProps = mergeProps({ bgColor: '#4d84c4', hoverColor: '#2f5694', activeColor: '#2f5694' }, props)
const buttonstyle = {
button: {
padding: '10px 15px',
'font-size': '18px',
'text-align': 'center',
outline: 'none',
color: '#fff',
'background-color': mergedProps.bgColor,
border: 'none',
'border-radius': '10px',
'box-shadow': '0 3px #999',
},
}
return (
<button
style={{
padding: '10px 15px',
'font-size': '18px',
'text-align': 'center',
outline: 'none',
color: '#fff',
'background-color': mergedProps.bgColor,
border: 'none',
'border-radius': '10px',
'box-shadow': '0 3px #999',
'& button:hover': {
'background-color': mergedProps.hoverColor,
},
'& button:focus-visible': {
'box-shadow': '0 0 3px 3px',
},
'&:active': {
'background-color': mergedProps.activeColor,
'box-shadow': '0 5px #666',
transform: 'translateY(3px)',
},
}}
>
{childProp}
</button>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment