58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
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>
|
|
);
|
|
};
|