Restructured components and refactored topbar to functional

This commit is contained in:
Maciek Głowacki
2020-08-17 22:05:13 +02:00
parent 4f7bc8aaa4
commit 55bb7945c9
24 changed files with 321 additions and 466 deletions

View File

@@ -0,0 +1,57 @@
import React from 'react';
import Modal from '@material-ui/core/Modal';
import './index.scss';
import Fade from '@material-ui/core/Fade';
import Input from '@material-ui/core/Input';
import { makeStyles } from '@material-ui/core/styles';
import styled from 'styled-components';
interface TransferProps {
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
isOpen: boolean;
}
const useStyles = makeStyles({
wrapper: {
display: 'flex',
justifyContent: 'center',
textAlign: 'center',
alignItems: 'center',
},
});
export const Transfer = ({ handleClose, isOpen }: TransferProps) => {
const classes = useStyles();
return (
<div>
<Modal
className={classes.wrapper}
open={isOpen}
onClose={handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
<Fade in={isOpen}>
<div className="transfer">
<div className="transfer__give">
<div className="transfer__text">Oddam</div>
<div className="transfer__input2">
{' '}
<Input
placeholder="Wyszukaj..."
inputProps={{ 'aria-label': 'description' }}
className="top-bar__input-field"
/>
</div>
</div>
<div className="transfer__receive">
<div className="transfer__text">Przyjmę</div>
<input className="transfer__input"></input>
</div>
</div>
</Fade>
</Modal>
</div>
);
};