feat: add frontend components for activities, leaderboard, teams, users, and workouts; include environment configuration

octofit-tracker/frontend/src/components/Teams.jsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react'
+
+const codespaceName = import.meta.env.VITE_CODESPACE_NAME
+const API_BASE = codespaceName
+  ? `https://${codespaceName}-8000.app.github.dev/api`
+  : 'http://localhost:8000/api'
+
+function Teams() {
+  const [teams, setTeams] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    fetch(`${API_BASE}/teams/`)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        return res.json()
+      })
+      .then((data) => {
+        setTeams(Array.isArray(data) ? data : (data.results ?? []))
+        setLoading(false)
+      })
+      .catch((err) => {
+        setError(err.message)
+        setLoading(false)
+      })
+  }, [])
+
+  if (loading) return <p>Loading teams…</p>
+  if (error) return <p className="text-danger">Error: {error}</p>
+
+  return (
+    <div>
+      <h2>Teams</h2>
+      <table className="table table-striped">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Members</th>
+          </tr>
+        </thead>
+        <tbody>
+          {teams.map((team) => (
+            <tr key={team._id ?? team.id}>
+              <td>{team.name}</td>
+              <td>{Array.isArray(team.members) ? team.members.join(', ') : team.members}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {teams.length === 0 && <p>No teams found.</p>}
+    </div>
+  )
+}
+
+export default Teams