summaryrefslogtreecommitdiff
path: root/app/lib/camera/component/hedear.tsx
blob: 81f5d018bbb8319e24b00ecfbebf424c07634e28 (plain)
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
// components/Header.tsx
"use client";

import Image from "next/image";
import { deleteAuth, getAuth } from "../../api/auth";
import { Button } from "@mui/material";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function Header() {
  const router = useRouter();
  const [mounted, setMounted] = useState(false);
  const [auth, setAuth] = useState<any>(null);

  useEffect(() => {
    setMounted(true);
    try {
      setAuth(getAuth());
    } catch {
      setAuth(null);
    }
  }, []);

  const handleSignOut = () => {
    deleteAuth();
    router.push("/login");
  };

  return (
    <nav className="fixed top-0 left-0 w-full bg-white border-b-2 border-red-500 py-4 px-4 sm:px-96 z-50 shadow-md">
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          <Image
            src="/images/indoteknik-logo.png"
            alt="Logo"
            width={120}
            height={60}
            className="rounded-full"
            priority
          />
        </div>
        <div>
          {mounted && auth ? (
            <Button size="small" onClick={handleSignOut}>
              Logout
            </Button>
          ) : (
            <span className="inline-block h-8 w-16" aria-hidden />
          )}
        </div>
      </div>
    </nav>
  );
}