Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 1x 1x | import React from "react"; import { Button, Paper, Tooltip, Typography } from "@mui/material"; import CopyToClipboard from "react-copy-to-clipboard"; import { makeStyles } from "@mui/styles"; interface Props { token?: string; } const useStyles = makeStyles({ token: { wordBreak: "break-all", color: "black", textAlign: "center", filter: "blur(5px)", "&:hover": { filter: "none" } }, container: { minWidth: "0" } }); const UserTokenDetails: React.FC<Props> = ({ token }) => { const classes = useStyles(); return ( <Paper className="fieldsetParent"> <fieldset className={classes.container}> <Typography component="legend" variant="h5" gutterBottom> API Token </Typography> <Typography gutterBottom className={classes.token}> {token} </Typography> <CopyToClipboard text={token ? token : ""}> <Tooltip title="Copy API Token"> <Button size="small" variant="text" color="primary" fullWidth> Copy API Token </Button> </Tooltip> </CopyToClipboard> </fieldset> </Paper> ); }; export default UserTokenDetails; |