Untitled

////this is what I tried 

import { Typography } from "@mui/material";
import Button from "@mui/material/Button";
import axios from "axios";
import router from "next/router";
import {useSetRecoilState} from "recoil";
import { userState } from "store";

export default function Appbar({ admin,loading }:{admin:any,loading:any}) {
const setUser=useSetRecoilState(userState);

if(loading){
    return <></>;
}

  if (!admin) {
    return (
      <div style={{
        display: "flex",
        justifyContent: "space-between",
        padding: 4,
        zIndex: 1
      }}>
        <div style={{ marginLeft: 10, cursor: "pointer" }}>
          <Typography variant={"h6"}>Coursera</Typography>
        </div>

        <div style={{ display: "flex" }}>
          <div style={{ marginRight: 10 }}>
            <Button
              variant={"contained"}
              onClick={() => {
                router.push("/admin/signup");
              }}
            >
              Signup
            </Button>
          </div>
          <div>
            <Button
              variant={"contained"}
              onClick={() => {
                router.push("/admin/signin");
              }}
            >
              Signin
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={{
      display: "flex",
      justifyContent: "space-between",
      padding: 4,
      zIndex: 1
    }}>
      <div style={{ marginLeft: 10, cursor: "pointer" }}>
        <Typography variant={"h6"}>Coursera</Typography>
      </div>

      <div style={{ display: "flex" }}>
        <div style={{ marginRight: 10 }}>
          <Button
            onClick={() => {
              router.push("/admin/addcourse");
            }}
          >
            Add course
          </Button>
        </div>

        <div style={{ marginRight: 10 }}>
          <Button
            onClick={() => {
              router.push("/courses");
            }}
          >
            Courses
          </Button>
        </div>

        <Button
          variant={"contained"}
          onClick={() => {
            setUser({
              isLoading: false,
              userEmail: null
          })
            axios.post('/api/admin/logout');
            router.push('/admin/signin');
          }}
        >
          Logout
        </Button>
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  const admin = await axios.get('/api/admin/me');
  const loading = !admin;

  return {
    props: {
      admin: admin.data,
      loading
    }
  };
}