stats reorg, upcoming refinement

src/features/tournaments/components/upcoming-tournament/team-list-button.tsx

@@ -0,0 +1,31 @@
+import ListButton from "@/components/list-button"
+import Sheet from "@/components/sheet/sheet"
+import TeamList from "@/features/teams/components/team-list"
+import { TeamInfo } from "@/features/teams/types"
+import { useSheet } from "@/hooks/use-sheet"
+import { UsersIcon } from "@phosphor-icons/react"
+import { useMemo } from "react"
+
+interface TeamListButtonProps {
+  teams: TeamInfo[]
+}
+
+const TeamListButton: React.FC<TeamListButtonProps> = ({ teams }) => {
+  const count = useMemo(() => teams.length, [teams]);
+  const { open, isOpen, toggle } = useSheet();
+  return (
+    <>
+      <ListButton
+        label={`View Teams (${count})`}
+        Icon={UsersIcon}
+        onClick={open}
+      />
+
+      <Sheet title="Enrolled Teams" opened={isOpen} onChange={toggle}>
+        <TeamList teams={teams} />
+      </Sheet>
+    </>
+  )
+}
+
+export default TeamListButton;