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

fix: media

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-09-15 14:55:26 -05:00
1 parent 6b4dc4ca8d
commit 8670e5f9a7
2 files changed
+123 -98
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/Navbar.astro
+13 -98
View File
@@ -21,6 +21,7 @@ import { BRANCH_NAMES } from '../constants/branches';
import { NAVBAR_HEIGHT } from '../constants/navbar';
import { homeTool, TOOLS } from '../constants/tools';
import { PatreonIcon } from './PatreonIcon';
import { NavbarAccount } from './NavbarAccount';
const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
const tools = [homeTool, ...toolsFiltered];
@@ -39,7 +40,6 @@ const isBranchNamed =
}
.expander {
--min-width: 768px;
--navbar-height: 48px;
transition-duration: 250ms;
@@ -48,10 +48,6 @@ const isBranchNamed =
backdrop-filter: blur(4rem) brightness(0.75);
-webkit-backdrop-filter: blur(4rem) brightness(0.75);
@media (min-width: var(--min-width)) {
max-height: var(--navbar-height);
}
&[data-expanded='false'] {
max-height: var(--navbar-height);
@@ -72,18 +68,24 @@ const isBranchNamed =
.hamburger {
display: inline-flex;
@media (min-width: var(--min-width)) {
display: none;
}
}
.tools {
display: none;
}
@media (min-width: var(--min-width)) {
@media (min-width: 768px) {
.hamburger {
display: none;
}
.tools {
display: flex;
}
.expander {
max-height: var(--navbar-height);
}
}
</style>
@@ -195,95 +197,8 @@ const isBranchNamed =
>
<GearIcon />
</Link>
<!-- <Popover.Root>
<Popover.Trigger>
<IconButton variant="ghost" color="gray">
<PersonIcon />
</IconButton>
</Popover.Trigger>
<Popover.Content
align="end"
width="320px"
onOpenAutoFocus={(event) => event.preventDefault()}
>
{
(patreonLogin.token || wargamingLogin.token) && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Logged in accounts
</Text>
{patreonLogin.token && (
<Flex align="center" gap="2" justify="center">
<PatreonIcon width={15} height={15} />
<Text>Patreon</Text>
<Button
color="red"
variant="ghost"
onClick={() => {
$patreonLogin.set({ token: undefined });
}}
>
Logout
</Button>
</Flex>
)}
{wargamingLogin.token && (
<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={() => {
$wargamingLogin.set({ token: undefined });
}}
>
Logout
</Button>
</Flex>
)}
</Flex>
)
}
{
!patreonLogin.token !== !wargamingLogin.token && (
<Inset side="x">
<Separator my="4" size="4" />
</Inset>
)
}
{
(!patreonLogin.token || !wargamingLogin.token) && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Log in with...
</Text>
{!patreonLogin.token && (
<Link style={{ width: '100%' }} href={patreonLoginUrl()}>
<Button style={{ width: '100%' }} color="tomato">
<PatreonIcon width={15} height={15} /> Patreon
</Button>
</Link>
)}
{!wargamingLogin.token && <WargamingLoginButton />}
</Flex>
)
}
</Popover.Content>
</Popover.Root> -->
<NavbarAccount client:idle />
</Flex>
</Flex>
</Flex>
packages/website/src/components/NavbarAccount.tsx
+110
View File
@@ -0,0 +1,110 @@
import { patreonLoginUrl } from '@blitzkit/core';
import { useStore } from '@nanostores/react';
import { PersonIcon } from '@radix-ui/react-icons';
import {
Button,
Flex,
IconButton,
Inset,
Link,
Popover,
Separator,
Skeleton,
Text,
} from '@radix-ui/themes';
import { Suspense } from 'react';
import { $patreonLogin } from '../stores/patreonLogin';
import { $wargamingLogin } from '../stores/wargamingLogin';
import { PatreonIcon } from './PatreonIcon';
import { WargamingAccountName } from './WargamingAccountName';
import { WargamingIcon } from './WargamingIcon';
import { WargamingLoginButton } from './WargamingLoginButton';
export function NavbarAccount() {
const patreonLogin = useStore($patreonLogin);
const wargamingLogin = useStore($wargamingLogin);
return (
<Popover.Root>
<Popover.Trigger>
<IconButton variant="ghost" color="gray">
<PersonIcon />
</IconButton>
</Popover.Trigger>
<Popover.Content
align="end"
width="320px"
onOpenAutoFocus={(event) => event.preventDefault()}
>
{(patreonLogin.token || wargamingLogin.token) && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Logged in accounts
</Text>
{patreonLogin.token && (
<Flex align="center" gap="2" justify="center">
<PatreonIcon width={15} height={15} />
<Text>Patreon</Text>
<Button
color="red"
variant="ghost"
onClick={() => {
$patreonLogin.set({ token: undefined });
}}
>
Logout
</Button>
</Flex>
)}
{wargamingLogin.token && (
<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={() => {
$wargamingLogin.set({ token: undefined });
}}
>
Logout
</Button>
</Flex>
)}
</Flex>
)}
{!patreonLogin.token !== !wargamingLogin.token && (
<Inset side="x">
<Separator my="4" size="4" />
</Inset>
)}
{(!patreonLogin.token || !wargamingLogin.token) && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Log in with...
</Text>
{!patreonLogin.token && (
<Link style={{ width: '100%' }} href={patreonLoginUrl()}>
<Button style={{ width: '100%' }} color="tomato">
<PatreonIcon width={15} height={15} /> Patreon
</Button>
</Link>
)}
{!wargamingLogin.token && <WargamingLoginButton />}
</Flex>
)}
</Popover.Content>
</Popover.Root>
);
}