handy.md

import { useTranslation } from "react-i18next";
  const { t } = useTranslation();
{t("Prepaid")}

---

import { makeStyles } from "@material-ui/core/styles";
import { createUseStyles } from "react-jss";

const useStyles = makeStyles((theme) => ({
  button: {
    border: "1px solid #fff",
    borderRadius: "12px",
    padding: "5px 13px",
  },
}));
  const classes = useStyles();

---

import { RouteComponentProps } from "react-router";
 type HomeProps = RouteComponentProps & {};
 const Home: React.FC<HomeProps> = (props: HomeProps) => {
}

input icons

import Input from "@material-ui/core/Input";

import CrossIcon from "components/Icons/Tick";
      <Input
        color="secondary"
              placeholder={"Enter Game"}
              startAdornment={
                  <CrossIcon />
              }
        endAdornment={
            <CrossIcon />
        }
      />

import { useHistory } from "react-router-dom";

  const history = useHistory();

changing color of border bottom of Input components of material ui

const useStyles = makeStyles((theme) => ({
  notchedOutline: {
    "&:before": {
      borderBottom: `2px solid blue !important`,
    },
  },
}));

      <Input
        classes={{
          underline:classes.notchedOutline
        }}
      />
      

animate translate

const useStyles = makeStyles((theme) => ({
 "@keyframes animate ": {
   from: {
     width: 0,
   },
   to: {
     width: "500px",
   },
 },

 span: {
   animation: "$animate 1s linear infinite",
 },
}));

async await in useEffect

  useEffect(() => {
    const test = async () => {
    };
    test();
  }, [playing]);