58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import { ApplicationRole } from '@kit/accounts/types/accounts';
|
|
import { getTeamAccountSidebarConfig } from '@kit/shared/config';
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarHeader,
|
|
SidebarNavigation,
|
|
} from '@kit/ui/shadcn-sidebar';
|
|
|
|
type AccountModel = {
|
|
label: string | null;
|
|
value: string | null;
|
|
image: string | null;
|
|
application_role: ApplicationRole | null;
|
|
};
|
|
|
|
export function TeamAccountLayoutSidebar(props: {
|
|
account: string;
|
|
accountId: string;
|
|
accounts: AccountModel[];
|
|
}) {
|
|
return (
|
|
<SidebarContainer
|
|
account={props.account}
|
|
accountId={props.accountId}
|
|
accounts={props.accounts}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function SidebarContainer(props: {
|
|
account: string;
|
|
accountId: string;
|
|
accounts: AccountModel[];
|
|
}) {
|
|
const { account, accounts } = props;
|
|
|
|
const config = getTeamAccountSidebarConfig(account);
|
|
const collapsible = config.sidebarCollapsedStyle;
|
|
|
|
const selectedAccount = accounts.find(({ value }) => value === account);
|
|
const accountName = selectedAccount?.label || account;
|
|
|
|
return (
|
|
<Sidebar collapsible={collapsible}>
|
|
<SidebarHeader className="h-24 justify-center">
|
|
<div className="mt-24 flex items-center">
|
|
<h5>{accountName}</h5>
|
|
</div>
|
|
</SidebarHeader>
|
|
|
|
<SidebarContent>
|
|
<SidebarNavigation config={config} />
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
);
|
|
}
|