1 files changed, 26 insertions, 28 deletions

diff --git a/app/lib/camera/component/hedear.tsx b/app/lib/camera/component/hedear.tsx
index 81f5d01..37935bd 100644
--- a/app/lib/camera/component/hedear.tsx
+++ b/app/lib/camera/component/hedear.tsx
@@ -1,4 +1,3 @@
-// components/Header.tsx
 "use client";
 
 import Image from "next/image";
@@ -7,48 +6,47 @@ import { Button } from "@mui/material";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
+interface AuthPayload {
+  token?: string;
+  email?: string;
+  name?: string;
+  [k: string]: unknown;
+}
+
 export default function Header() {
   const router = useRouter();
   const [mounted, setMounted] = useState(false);
-  const [auth, setAuth] = useState<any>(null);
+  const [auth, setAuth] = useState<AuthPayload | string | null>(null);
 
   useEffect(() => {
     setMounted(true);
-    try {
-      setAuth(getAuth());
-    } catch {
-      setAuth(null);
-    }
+    const a = getAuth() as AuthPayload | string | null;
+    setAuth(a);
   }, []);
 
-  const handleSignOut = () => {
+  const onLogout = () => {
     deleteAuth();
     router.push("/login");
   };
 
+  if (!mounted) return null;
+
   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
-          />
+    <header className="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm">
+      <div className="max-w-screen-xl mx-auto flex items-center justify-between p-3">
+        <div className="flex items-center gap-2">
+          <Image src="/favicon.ico" width={32} height={32} alt="logo" />
+          <span className="font-semibold">indoteknik</span>
         </div>
-        <div>
-          {mounted && auth ? (
-            <Button size="small" onClick={handleSignOut}>
-              Logout
-            </Button>
-          ) : (
-            <span className="inline-block h-8 w-16" aria-hidden />
-          )}
+        <div className="flex items-center gap-3">
+          <span className="text-sm text-gray-600">
+            {typeof auth === "object" && auth?.email ? auth.email : ""}
+          </span>
+          <Button size="small" variant="text" color="error" onClick={onLogout}>
+            Logout
+          </Button>
         </div>
       </div>
-    </nav>
+    </header>
   );
 }