mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 19:49:50 +02:00
feat: search bar
This commit is contained in:
TrèsAbhi committed
1 parent
728a11efa4
commit
b906b42998
1 file changed
+91
-92
@@ -1,9 +1,8 @@
|
|||||||
import { DiscordLogoIcon } from '@radix-ui/react-icons';
|
import { HamburgerMenuIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
|
||||||
import { Flex, Text, Theme } from '@radix-ui/themes';
|
import { Flex, IconButton, TextField } from '@radix-ui/themes';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useFullScreen } from '../../hooks/useFullScreen';
|
import { useFullScreen } from '../../hooks/useFullScreen';
|
||||||
import { BlitzkriegWormWide } from '../../icons/BlitzkriegWormWide';
|
import { BlitzkriegWormWide } from '../../icons/BlitzkriegWormWide';
|
||||||
import { PatreonIcon } from '../../icons/Patreon';
|
|
||||||
import { theme } from '../../stitches.config';
|
import { theme } from '../../stitches.config';
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
@@ -12,101 +11,101 @@ export default function Navbar() {
|
|||||||
if (isFullScreen) return null;
|
if (isFullScreen) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Theme radius="none">
|
<div
|
||||||
<div
|
style={{
|
||||||
style={{
|
position: 'fixed',
|
||||||
position: 'fixed',
|
top: 0,
|
||||||
top: 0,
|
left: 0,
|
||||||
left: 0,
|
width: '100%',
|
||||||
width: '100%',
|
zIndex: 1,
|
||||||
zIndex: 1,
|
padding: '1rem',
|
||||||
padding: '1rem',
|
background: theme.colors.appBackground1_alpha,
|
||||||
background: theme.colors.appBackground1_alpha,
|
borderBottom: theme.borderStyles.nonInteractive,
|
||||||
borderBottom: theme.borderStyles.nonInteractive,
|
backdropFilter: 'blur(4rem)',
|
||||||
backdropFilter: 'blur(4rem)',
|
boxSizing: 'border-box',
|
||||||
boxSizing: 'border-box',
|
}}
|
||||||
}}
|
>
|
||||||
>
|
<Flex justify="center">
|
||||||
<Flex justify="center">
|
<Flex
|
||||||
<Flex
|
justify="between"
|
||||||
justify="between"
|
align="center"
|
||||||
align="center"
|
style={{ maxWidth: 800, width: '100%', padding: '0 16px' }}
|
||||||
style={{ maxWidth: 800, width: '100%', padding: '0 16px' }}
|
gap="4"
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
style={{
|
||||||
|
color: 'inherit',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Flex justify="center" align="center" gap="2">
|
<BlitzkriegWormWide />
|
||||||
<Link
|
</Link>
|
||||||
href="/"
|
|
||||||
style={{
|
|
||||||
color: 'inherit',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<BlitzkriegWormWide />
|
|
||||||
</Link>
|
|
||||||
<Text size="2">❤️</Text>
|
|
||||||
<Text size="2">
|
|
||||||
<Link
|
|
||||||
href="https://tresabhi.github.io/"
|
|
||||||
style={{ color: 'inherit', textDecoration: 'none' }}
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
by TrèsAbhi
|
|
||||||
</Link>
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex justify="center" align="center" gap="4">
|
<TextField.Root
|
||||||
<Link
|
placeholder="Search player, tanks, clans, anything..."
|
||||||
href="https://discord.gg/nDt7AjGJQH"
|
style={{ flex: 1 }}
|
||||||
target="_blank"
|
>
|
||||||
style={{
|
<TextField.Slot>
|
||||||
color: 'inherit',
|
<MagnifyingGlassIcon />
|
||||||
display: 'flex',
|
</TextField.Slot>
|
||||||
alignItems: 'center',
|
</TextField.Root>
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DiscordLogoIcon width={16} height={16} />
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Link
|
<IconButton variant="ghost">
|
||||||
href="https://ko-fi.com/tresabhi"
|
<HamburgerMenuIcon />
|
||||||
target="_blank"
|
</IconButton>
|
||||||
style={{
|
|
||||||
color: 'inherit',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="https://i.imgur.com/QdqgdP2.png"
|
|
||||||
style={{
|
|
||||||
width: 20,
|
|
||||||
height: 20,
|
|
||||||
objectFit: 'contain',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Link
|
{/* <Flex justify="center" align="center" gap="4">
|
||||||
href="https://www.patreon.com/tresabhi"
|
<Link
|
||||||
target="_blank"
|
href="https://discord.gg/nDt7AjGJQH"
|
||||||
|
target="_blank"
|
||||||
|
style={{
|
||||||
|
color: 'inherit',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DiscordLogoIcon width={16} height={16} />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="https://ko-fi.com/tresabhi"
|
||||||
|
target="_blank"
|
||||||
|
style={{
|
||||||
|
color: 'inherit',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="https://i.imgur.com/QdqgdP2.png"
|
||||||
style={{
|
style={{
|
||||||
color: 'inherit',
|
width: 20,
|
||||||
display: 'flex',
|
height: 20,
|
||||||
alignItems: 'center',
|
objectFit: 'contain',
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
}}
|
||||||
>
|
/>
|
||||||
<PatreonIcon width={14} height={14} />
|
</Link>
|
||||||
</Link>
|
|
||||||
</Flex>
|
<Link
|
||||||
</Flex>
|
href="https://www.patreon.com/tresabhi"
|
||||||
|
target="_blank"
|
||||||
|
style={{
|
||||||
|
color: 'inherit',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PatreonIcon width={14} height={14} />
|
||||||
|
</Link>
|
||||||
|
</Flex> */}
|
||||||
</Flex>
|
</Flex>
|
||||||
</div>
|
</Flex>
|
||||||
</Theme>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user