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

feat: better ui

Browse Source
This commit is contained in:
tresabhi committed 2025-04-05 15:09:15 -05:00
1 parent 8a5b0c1170
commit f13165e77d
2 files changed
+62 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/MissingShellIcon.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export function MissingShellIcon(props: ComponentProps<'svg'>) {
{...props}
>
<path
d="M40.8038 14L50 23.1962M13.5 38.5L25.5 50.5M60 6.77686L57.2231 4C32.2774 18.0987 20.4352 28.1445 4 50.7438C4.15427 51.3609 4.7405 53.3355 7.70248 56.2975C10.6645 59.2595 12.6391 59.8457 13.2562 60C35.8555 43.5648 45.9013 31.7226 60 6.77686Z"
d="M39.5461 16.5714L47.4286 24.4539M16.1429 37.5714L26.4286 47.8571M56 10.3802L53.6198 8C32.2378 20.0846 22.0873 28.6952 8 48.0661C8.13223 48.595 8.63471 50.2876 11.1736 52.8264C13.7124 55.3653 15.405 55.8678 15.9339 56C35.3048 41.9127 43.9154 31.7622 56 10.3802Z"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
packages/website/src/components/TankSearch/components/FilterControl.tsx
+61 -39
View File
@@ -7,9 +7,18 @@ import {
} from '@blitzkit/core';
import { useStore } from '@nanostores/react';
import { ReloadIcon } from '@radix-ui/react-icons';
import { Box, Button, Flex, IconButton, Popover, Text } from '@radix-ui/themes';
import {
Box,
Button,
Flex,
IconButton,
Inset,
Popover,
Text,
} from '@radix-ui/themes';
import { times } from 'lodash-es';
import { awaitableGameDefinitions } from '../../../core/awaitables/gameDefinitions';
import { Var } from '../../../core/radix/var';
import { useLocale } from '../../../hooks/useLocale';
import {
$tankFilters,
@@ -67,46 +76,43 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
</Popover.Trigger>
<Popover.Content>
<Flex
style={{
borderRadius: 'var(--radius-full)',
overflow: 'hidden',
}}
>
{Object.values(ShellType).map((shellType) => {
if (typeof shellType === 'string') return null;
<Inset>
<Flex>
{Object.values(ShellType).map((shellType) => {
if (typeof shellType === 'string') return null;
const selected = tankFilters.shells[index] === shellType;
const selected = tankFilters.shells[index] === shellType;
return (
<IconButton
value={`${shellType}`}
radius="none"
variant={selected ? 'solid' : 'soft'}
onClick={() => {
const mutated = [
tankFilters.shells[0],
tankFilters.shells[1],
tankFilters.shells[2],
] as TankFilters['shells'];
return (
<IconButton
value={`${shellType}`}
radius="none"
variant={selected ? 'solid' : 'soft'}
onClick={() => {
const mutated = [
tankFilters.shells[0],
tankFilters.shells[1],
tankFilters.shells[2],
] as TankFilters['shells'];
mutated[index] = selected ? null : shellType;
mutated[index] = selected ? null : shellType;
$tankFilters.setKey('shells', mutated);
}}
highContrast={selected}
color={selected ? undefined : 'gray'}
>
<img
src={asset(
`icons/shells/${shellTypeIcons[shellType]}${premium ? '_premium' : ''}.webp`,
)}
style={{ width: '1em', height: '1em' }}
/>
</IconButton>
);
})}
</Flex>
$tankFilters.setKey('shells', mutated);
}}
highContrast={selected}
color={selected ? undefined : 'gray'}
>
<img
src={asset(
`icons/shells/${shellTypeIcons[shellType]}${premium ? '_premium' : ''}.webp`,
)}
style={{ width: '1em', height: '1em' }}
/>
</IconButton>
);
})}
</Flex>
</Inset>
</Popover.Content>
</Popover.Root>
);
@@ -126,7 +132,6 @@ export function FilterControl({ compact }: FilterControlProps) {
<Flex
direction={compact ? 'row' : { initial: 'row', md: 'column' }}
overflow="hidden"
gap={{ initial: '0', md: '1' }}
style={{ borderRadius: 'var(--radius-5)' }}
>
<Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
@@ -157,6 +162,15 @@ export function FilterControl({ compact }: FilterControlProps) {
);
})}
</Flex>
<Box
display={{ initial: 'none', md: 'block' }}
style={{
height: Var('space-1'),
backgroundColor: Var('gray-a3'),
}}
/>
<Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
{times(5, (index) => {
const tier = index + 6;
@@ -191,7 +205,6 @@ export function FilterControl({ compact }: FilterControlProps) {
direction={compact ? 'row' : { initial: 'row', md: 'column' }}
overflow="hidden"
style={{ borderRadius: 'var(--radius-5)' }}
gap={{ initial: '0', md: '1' }}
>
<Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
{gameDefinitions.nations
@@ -228,6 +241,15 @@ export function FilterControl({ compact }: FilterControlProps) {
);
})}
</Flex>
<Box
display={{ initial: 'none', md: 'block' }}
style={{
height: Var('space-1'),
backgroundColor: Var('gray-a3'),
}}
/>
<Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
{gameDefinitions.nations
.slice(Math.ceil(gameDefinitions.nations.length / 2))