This is an automated email from the ASF dual-hosted git repository. leonardcs pushed a commit to branch feature/community-tab in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit ddf0f9a8509953cb9c11024925f0bb5a9890c4fd Author: Leonard <[email protected]> AuthorDate: Tue Jun 27 13:39:35 2023 +0200 Add button component --- src/components/buttons/Button/index.tsx | 23 +++++++++++++++++++++++ src/components/buttons/Button/style.module.css | 20 ++++++++++++++++++++ 2 files changed, 43 insertions(+) diff --git a/src/components/buttons/Button/index.tsx b/src/components/buttons/Button/index.tsx new file mode 100644 index 0000000..efc9e6e --- /dev/null +++ b/src/components/buttons/Button/index.tsx @@ -0,0 +1,23 @@ +import styles from './style.module.css'; + +interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> { + children: React.ReactNode; + size?: 'sm' | 'md'; +} + +export const Button: React.FC<ButtonProps> = props => { + const classes = [ + 'nx-rounded', + 'nx-transition-colors', + styles.btn, + props.className + ]; + if (props.size === 'sm') { + classes.push(styles['btn-sm']); + } + return ( + <button {...props} className={classes.join(' ')}> + {props.children} + </button> + ); +}; diff --git a/src/components/buttons/Button/style.module.css b/src/components/buttons/Button/style.module.css new file mode 100644 index 0000000..bdaf05d --- /dev/null +++ b/src/components/buttons/Button/style.module.css @@ -0,0 +1,20 @@ +.btn { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background-color: hsl(var(--nextra-primary-hue) 100% 45%); + color: white; + font-weight: bold; + font-size: smaller; +} + +.btn:hover { + background-color: hsl(var(--nextra-primary-hue) 100% 55%); +} + +.btn.btn-sm { + padding: 0.3rem 0.6rem; + font-size: smaller; +}
