CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-13 21:01:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fixed selected team style (#96)

Browse Source
This commit is contained in:
Zai Shi 2024-06-25 13:38:10 +02:00 committed by GitHub
parent 8819bfbb4d
commit d53c787ba3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/stack/src/components/selected-team-switcher.tsx
View File

@ -1,11 +1,18 @@
'use client';
import { useUser } from "..";
import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
import { Check } from "lucide-react";
import { useRouter } from "next/navigation";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
Typography,
} from "@stackframe/stack-ui";
import { useMemo } from "react";
import { Typography, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "@stackframe/stack-ui";
type SelectedTeamSwitcherProps = {
projectUrlMap?: (projectId: string) => string,
@ -27,17 +34,14 @@ export function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {
const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);
return (
<DropdownMenu>
<DropdownMenuTrigger>
<div style={{ display: 'flex', alignItems: 'center' }}>
<TeamIcon displayName={selectedTeam?.displayName || ''} />
<Typography>{selectedTeam?.displayName || 'Select team'}</Typography>
</div>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Teams</DropdownMenuLabel>
<Select>
<SelectTrigger className="stack-scope">
<SelectValue placeholder="Select team"/>
</SelectTrigger>
<SelectContent className="stack-scope">
{teams && teams.map(team => (
<DropdownMenuItem
<SelectItem
value={team.id}
key={team.id}
onClick={() => {
runAsynchronouslyWithAlert(async () => {
@ -47,16 +51,20 @@ export function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {
}
});
}}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div className="flex items-center">
<TeamIcon displayName={team.displayName} />
<Typography>{team.displayName}</Typography>
</div>
<Check style={{ marginLeft: '0.5rem', visibility: team.id === selectedTeam?.id ? 'visible' : 'hidden', height: '1rem', width: '1rem' }} />
</DropdownMenuItem>
</SelectItem>
))}
</DropdownMenuContent>
</DropdownMenu>
{teams?.length === 0 && (
<SelectGroup>
<SelectLabel>No teams</SelectLabel>
</SelectGroup>
)}
</SelectContent>
</Select>
);
}