Restructured components and refactored topbar to functional
This commit is contained in:
57
src/components/Transfer/Transfer.tsx
Normal file
57
src/components/Transfer/Transfer.tsx
Normal 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>
|
||||
);
|
||||
};
|
Reference in New Issue
Block a user