32 lines
920 B
TypeScript
32 lines
920 B
TypeScript
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[]
|
|
isRegional?: boolean
|
|
}
|
|
|
|
const TeamListButton: React.FC<TeamListButtonProps> = ({ teams, isRegional }) => {
|
|
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} isRegional={isRegional} />
|
|
</Sheet>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default TeamListButton; |