TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-23 11:39:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade rest of them

Browse Source
This commit is contained in:
TrèsAbhi committed 2025-09-02 16:24:13 -05:00
1 parent fe4afdcbf0
commit 30e87743fc
63 files changed
+824 -1123
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/NavbarAccount/index.tsx
+60 -73
View File
@@ -1,4 +1,4 @@
import { PersonIcon } from '@radix-ui/react-icons';
import { PersonIcon } from "@radix-ui/react-icons";
import {
Button,
Flex,
@@ -6,91 +6,78 @@ import {
Popover,
Skeleton,
Text,
} from '@radix-ui/themes';
import { Suspense } from 'react';
import { App } from '../../stores/app';
import { BlitzKitTheme } from '../BlitzKitTheme';
import { WargamingAccountName } from '../WargamingAccountName';
import { WargamingIcon } from '../WargamingIcon';
import { WargamingLoginButton } from '../WargamingLoginButton';
} from "@radix-ui/themes";
import { Suspense } from "react";
import { App } from "../../stores/app";
import { BlitzKitTheme } from "../BlitzKitTheme";
import { WargamingAccountName } from "../WargamingAccountName";
import { WargamingIcon } from "../WargamingIcon";
import { WargamingLoginButton } from "../WargamingLoginButton";
export function NavbarAccount() {
return (
<App.Provider>
<Content />
</App.Provider>
);
}
function Content() {
const logins = App.use((state) => state.logins);
const mutateApp = App.useMutation();
return (
<App.Provider>
<Popover.Root>
<Popover.Trigger>
<IconButton variant="ghost" color="gray">
<PersonIcon />
</IconButton>
</Popover.Trigger>
<Popover.Root>
<Popover.Trigger>
<IconButton variant="ghost" color="gray">
<PersonIcon />
</IconButton>
</Popover.Trigger>
<BlitzKitTheme style={{ display: 'contents' }}>
<Popover.Content
align="end"
width="320px"
onOpenAutoFocus={(event) => event.preventDefault()}
>
{logins.wargaming && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Logged in accounts
</Text>
<BlitzKitTheme style={{ display: "contents" }}>
<Popover.Content
align="end"
width="320px"
onOpenAutoFocus={(event) => event.preventDefault()}
>
{logins.wargaming && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Logged in accounts
</Text>
{logins.wargaming && (
<Flex align="center" gap="2" justify="center">
<WargamingIcon width={15} height={15} />
<Text>
<Suspense
fallback={<Skeleton height="1em" width="5rem" />}
>
<WargamingAccountName />
</Suspense>
</Text>
<Button
color="red"
variant="ghost"
onClick={() => {
mutateApp((draft) => {
draft.logins.wargaming = undefined;
});
}}
>
Logout
</Button>
</Flex>
)}
</Flex>
)}
{logins.wargaming && (
<Flex align="center" gap="2" justify="center">
<WargamingIcon width={15} height={15} />
<Text>
<Suspense fallback={<Skeleton height="1em" width="5rem" />}>
<WargamingAccountName />
</Suspense>
</Text>
<Button
color="red"
variant="ghost"
onClick={() => {
App.mutate((draft) => {
draft.logins.wargaming = undefined;
});
}}
>
Logout
</Button>
</Flex>
)}
</Flex>
)}
{/* {!logins. !== !logins.wargaming && (
{/* {!logins. !== !logins.wargaming && (
<Inset side="x">
<Separator my="4" size="4" />
</Inset>
)} */}
{!logins.wargaming && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Log in with...
</Text>
{!logins.wargaming && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Log in with...
</Text>
{!logins.wargaming && <WargamingLoginButton />}
</Flex>
)}
</Popover.Content>
</BlitzKitTheme>
</Popover.Root>
</App.Provider>
{!logins.wargaming && <WargamingLoginButton />}
</Flex>
)}
</Popover.Content>
</BlitzKitTheme>
</Popover.Root>
);
}