TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-23 19:49:50 +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} {...props}
> >
<path <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="currentColor"
stroke-width="4" stroke-width="4"
stroke-linecap="round" stroke-linecap="round"
packages/website/src/components/TankSearch/components/FilterControl.tsx
+61 -39
View File
@@ -7,9 +7,18 @@ import {
} from '@blitzkit/core'; } from '@blitzkit/core';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { ReloadIcon } from '@radix-ui/react-icons'; 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 { times } from 'lodash-es';
import { awaitableGameDefinitions } from '../../../core/awaitables/gameDefinitions'; import { awaitableGameDefinitions } from '../../../core/awaitables/gameDefinitions';
import { Var } from '../../../core/radix/var';
import { useLocale } from '../../../hooks/useLocale'; import { useLocale } from '../../../hooks/useLocale';
import { import {
$tankFilters, $tankFilters,
@@ -67,46 +76,43 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
</Popover.Trigger> </Popover.Trigger>
<Popover.Content> <Popover.Content>
<Flex <Inset>
style={{ <Flex>
borderRadius: 'var(--radius-full)', {Object.values(ShellType).map((shellType) => {
overflow: 'hidden', if (typeof shellType === 'string') return null;
}}
>
{Object.values(ShellType).map((shellType) => {
if (typeof shellType === 'string') return null;
const selected = tankFilters.shells[index] === shellType; const selected = tankFilters.shells[index] === shellType;
return ( return (
<IconButton <IconButton
value={`${shellType}`} value={`${shellType}`}
radius="none" radius="none"
variant={selected ? 'solid' : 'soft'} variant={selected ? 'solid' : 'soft'}
onClick={() => { onClick={() => {
const mutated = [ const mutated = [
tankFilters.shells[0], tankFilters.shells[0],
tankFilters.shells[1], tankFilters.shells[1],
tankFilters.shells[2], tankFilters.shells[2],
] as TankFilters['shells']; ] as TankFilters['shells'];
mutated[index] = selected ? null : shellType; mutated[index] = selected ? null : shellType;
$tankFilters.setKey('shells', mutated); $tankFilters.setKey('shells', mutated);
}} }}
highContrast={selected} highContrast={selected}
color={selected ? undefined : 'gray'} color={selected ? undefined : 'gray'}
> >
<img <img
src={asset( src={asset(
`icons/shells/${shellTypeIcons[shellType]}${premium ? '_premium' : ''}.webp`, `icons/shells/${shellTypeIcons[shellType]}${premium ? '_premium' : ''}.webp`,
)} )}
style={{ width: '1em', height: '1em' }} style={{ width: '1em', height: '1em' }}
/> />
</IconButton> </IconButton>
); );
})} })}
</Flex> </Flex>
</Inset>
</Popover.Content> </Popover.Content>
</Popover.Root> </Popover.Root>
); );
@@ -126,7 +132,6 @@ export function FilterControl({ compact }: FilterControlProps) {
<Flex <Flex
direction={compact ? 'row' : { initial: 'row', md: 'column' }} direction={compact ? 'row' : { initial: 'row', md: 'column' }}
overflow="hidden" overflow="hidden"
gap={{ initial: '0', md: '1' }}
style={{ borderRadius: 'var(--radius-5)' }} style={{ borderRadius: 'var(--radius-5)' }}
> >
<Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}> <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
@@ -157,6 +162,15 @@ export function FilterControl({ compact }: FilterControlProps) {
); );
})} })}
</Flex> </Flex>
<Box
display={{ initial: 'none', md: 'block' }}
style={{
height: Var('space-1'),
backgroundColor: Var('gray-a3'),
}}
/>
<Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}> <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
{times(5, (index) => { {times(5, (index) => {
const tier = index + 6; const tier = index + 6;
@@ -191,7 +205,6 @@ export function FilterControl({ compact }: FilterControlProps) {
direction={compact ? 'row' : { initial: 'row', md: 'column' }} direction={compact ? 'row' : { initial: 'row', md: 'column' }}
overflow="hidden" overflow="hidden"
style={{ borderRadius: 'var(--radius-5)' }} style={{ borderRadius: 'var(--radius-5)' }}
gap={{ initial: '0', md: '1' }}
> >
<Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}> <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
{gameDefinitions.nations {gameDefinitions.nations
@@ -228,6 +241,15 @@ export function FilterControl({ compact }: FilterControlProps) {
); );
})} })}
</Flex> </Flex>
<Box
display={{ initial: 'none', md: 'block' }}
style={{
height: Var('space-1'),
backgroundColor: Var('gray-a3'),
}}
/>
<Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}> <Flex direction={compact ? 'column' : { md: 'row', initial: 'column' }}>
{gameDefinitions.nations {gameDefinitions.nations
.slice(Math.ceil(gameDefinitions.nations.length / 2)) .slice(Math.ceil(gameDefinitions.nations.length / 2))