fixed a bit

components/TeamHeader.js

@@ -0,0 +1,38 @@
+'use client';
+import { useSession } from 'next-auth/react';
+import { useState, useEffect } from 'react';
+
+export default function TeamHeader() {
+    const { data: session } = useSession();
+    const [teamName, setTeamName] = useState(null);
+
+    useEffect(() => {
+        // Only fetch team info if user is logged in and not an admin
+        if (session?.user?.teamId && session?.user?.role !== 'admin') {
+            fetchTeamInfo();
+        }
+    }, [session]);
+
+    const fetchTeamInfo = async () => {
+        try {
+            const response = await fetch(`/api/teams/${session.user.teamId}`);
+            if (response.ok) {
+                const data = await response.json();
+                setTeamName(data.name);
+            }
+        } catch (error) {
+            console.error('Failed to fetch team info:', error);
+        }
+    };
+
+    // Don't render anything if no team name or user is admin
+    if (!teamName || session?.user?.role === 'admin') {
+        return null;
+    }
+
+    return (
+        <div className="team-header">
+            <div className="team-name">{teamName}</div>
+        </div>
+    );
+}