mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
root form component
This commit is contained in:
parent
24e8494028
commit
63e48672a1
25
src/components/atoms/Form/Form.module.scss
Normal file
25
src/components/atoms/Form/Form.module.scss
Normal file
@ -0,0 +1,25 @@
|
||||
@import '../../../styles/variables';
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
margin-top: 4rem;
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.formHeader {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
.formTitle {
|
||||
font-size: $font-size-h2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.formDescription {
|
||||
margin-bottom: 0;
|
||||
margin-top: $spacer / 2;
|
||||
}
|
24
src/components/atoms/Form/Form.tsx
Normal file
24
src/components/atoms/Form/Form.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import styles from './Form.module.scss'
|
||||
|
||||
const Form = ({
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
...props
|
||||
}: {
|
||||
title: string
|
||||
description: string
|
||||
children: any
|
||||
}) => (
|
||||
<form className={styles.form} {...props}>
|
||||
<header className={styles.formHeader}>
|
||||
<h1 className={styles.formTitle}>{title}</h1>
|
||||
<p className={styles.formDescription}>{description}</p>
|
||||
</header>
|
||||
|
||||
{children}
|
||||
</form>
|
||||
)
|
||||
|
||||
export default Form
|
Loading…
Reference in New Issue
Block a user