84271a31a8
This commit introduces the Card Button component to the UI package and improves URL matching by allowing end to be a boolean or function. Navigation menu components now support both cases. Additionally, changes have been made to improve the visual and functional aspects of various components throughout the application. This includes changes in pricing display, route active checking, and the introduction of new files such as HomeAddAccountButton and HomeAccountsList.
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import {
|
|
BorderedNavigationMenu,
|
|
BorderedNavigationMenuItem,
|
|
} from '@kit/ui/bordered-navigation-menu';
|
|
import { If } from '@kit/ui/if';
|
|
|
|
import { AppLogo } from '~/components/app-logo';
|
|
import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
|
|
import featuresFlagConfig from '~/config/feature-flags.config';
|
|
import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
|
|
|
|
// home imports
|
|
import { HomeAccountSelector } from '../_components/home-account-selector';
|
|
import { UserNotifications } from '../_components/user-notifications';
|
|
import { type UserWorkspace } from '../_lib/server/load-user-workspace';
|
|
|
|
export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
|
|
const { workspace, user, accounts } = props.workspace;
|
|
|
|
const routes = personalAccountNavigationConfig.routes.reduce<
|
|
Array<{
|
|
path: string;
|
|
label: string;
|
|
Icon?: React.ReactNode;
|
|
end?: boolean | ((path: string) => boolean);
|
|
}>
|
|
>((acc, item) => {
|
|
if ('children' in item) {
|
|
return [...acc, ...item.children];
|
|
}
|
|
|
|
if ('divider' in item) {
|
|
return acc;
|
|
}
|
|
|
|
return [...acc, item];
|
|
}, []);
|
|
|
|
return (
|
|
<div className={'flex w-full flex-1 justify-between'}>
|
|
<div className={'flex items-center space-x-8'}>
|
|
<AppLogo />
|
|
|
|
<BorderedNavigationMenu>
|
|
{routes.map((route) => (
|
|
<BorderedNavigationMenuItem {...route} key={route.path} />
|
|
))}
|
|
</BorderedNavigationMenu>
|
|
</div>
|
|
|
|
<div className={'flex justify-end space-x-2.5'}>
|
|
<If condition={featuresFlagConfig.enableTeamAccounts}>
|
|
<HomeAccountSelector
|
|
userId={user.id}
|
|
accounts={accounts}
|
|
collapsed={false}
|
|
/>
|
|
</If>
|
|
|
|
<UserNotifications userId={user.id} />
|
|
|
|
<ProfileAccountDropdownContainer
|
|
collapsed={true}
|
|
user={user}
|
|
account={workspace}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|