ffcs/src/components/ui/Navbar.tsx at 06a3309519caa6d9fa53fcbc41e5395214f517aa · CodeChefVIT/ffcs · GitHub

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
"use client";

import React, { useState } from "react";
import { CCButton, FFCSButton, ZButton } from "./Buttons";
import { useRouter } from "next/navigation";
import { useSession, signIn, signOut } from "next-auth/react";
import Popup from "./Popup";

type NavbarProps = {
  page: "landing" | "404" | "slots" | "saved" | "shared" | "mobile" | "placeholder";
};

export default function Navbar({ page }: NavbarProps) {
  const router = useRouter();
  const { data: session } = useSession();
  const loggedin = !!session;
  const [showLoginPopup, setShowLoginPopup] = useState(false);
  const [showLoginPopupSaved, setShowLoginPopupSaved] = useState(false);
  const [showLogoutPopup, setShowLogoutPopup] = useState(false);

  let userName = "User";
  if (loggedin) {
    userName =
      (session?.user?.name ?? "").trim().split(" ").slice(0, -1).join(" ") || userName;
  }

  return (
    <>
      {showLoginPopup && (
        <Popup
          type="login"
          closeLink={() => setShowLoginPopup(false)}
          action={() => signIn("google", { callbackUrl: "/", redirect: true })}
        />
      )}
      {showLoginPopupSaved && (
        <Popup
          type="login"
          closeLink={() => setShowLoginPopupSaved(false)}
          action={() => signIn("google", { callbackUrl: "/saved", redirect: true })}
        />
      )}
      {showLogoutPopup && (
        <Popup
          type="logout"
          closeLink={() => setShowLogoutPopup(false)}
          action={() => signOut({ callbackUrl: "/" })}
        />
      )}

      <div className="absolute top-0 left-0 w-full z-10">
        <div className="flex justify-between items-center p-4">
          <div className="flex gap-4 items-center">
            {(page === "landing" || page === "404" || page === "placeholder") && (
              <>
                <CCButton />
                <ZButton
                  type="long"
                  text="Slot View"
                  color="yellow"
                  onClick={() => router.push("/slots")}
                />
              </>
            )}

            {(page === "slots" || page === "saved" || page === "shared") && (
              <>
                <FFCSButton />
                <div
                  className="text-4xl font-[pangolin] cursor-pointer"
                  onClick={() => router.push("/")}
                >
                  FFCS-inator
                </div>
              </>
            )}

            {page === "mobile" && (
              <div
                className="text-3xl font-[pangolin] cursor-pointer"
                onClick={() => router.push("/")}
              >
                FFCS-inator
              </div>
            )}
          </div>

          <div className="flex gap-4 items-center">
            {(page === "landing" || page === "404" || page === "shared" || page === "slots") && (
              <ZButton
                type="long"
                text="Saved Timetables"
                color="blue"
                onClick={
                  loggedin ? () => router.push("/saved") : () => setShowLoginPopupSaved(true)
                }
              />
            )}

            {page === "saved" && (
              <ZButton
                type="long"
                text="Slot View"
                color="yellow"
                onClick={() => router.push("/slots")}
              />
            )}

            {(page === "landing" ||
              page === "404" ||
              page === "shared" ||
              page === "saved" ||
              page === "slots") &&
              (!loggedin ? (
                <ZButton
                  type="long"
                  text="Log In"
                  color="green"
                  onClick={() => setShowLoginPopup(true)}
                />
              ) : (
                <ZButton
                  type="long"
                  text={userName}
                  color="purple"
                  onClick={() => setShowLogoutPopup(true)}
                />
              ))}

            {page === "mobile" &&
              loggedin && (
                <ZButton
                  type="regular"
                  text="Log Out"
                  color="purple"
                  onClick={() => signOut({ callbackUrl: "/" })}
                />
              )}
          </div>
        </div>
      </div>
    </>
  );
}