mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 18:57:03 +02:00
feat: icons
This commit is contained in:
1 parent
bda0c4ef1b
commit
48578407db
2 files changed
+45
-22
No files matched your search
@@ -6,7 +6,12 @@ import { Card, Flex, Inset, Text, TextField } from '@radix-ui/themes';
|
||||
import { use, useRef } from 'react';
|
||||
import { Search } from 'react-fuzzysort';
|
||||
import { tankIcon } from '../../../../../core/blitzkrieg/tankIcon';
|
||||
import { tanks } from '../../../../../core/blitzkrieg/tankopedia';
|
||||
import {
|
||||
TANK_ICONS,
|
||||
TANK_ICONS_COLLECTOR,
|
||||
TANK_ICONS_PREMIUM,
|
||||
tanks,
|
||||
} from '../../../../../core/blitzkrieg/tankopedia';
|
||||
import { theme } from '../../../../../stitches.config';
|
||||
import * as styles from './index.css';
|
||||
|
||||
@@ -64,31 +69,49 @@ export function List() {
|
||||
}}
|
||||
/>
|
||||
|
||||
<Text
|
||||
<Flex
|
||||
align="center"
|
||||
justify="center"
|
||||
gap="1"
|
||||
className={styles.listingLabel}
|
||||
size="4"
|
||||
color={
|
||||
tank.tree_type === 'collector'
|
||||
? 'cyan'
|
||||
: tank.tree_type === 'premium'
|
||||
? 'amber'
|
||||
: undefined
|
||||
}
|
||||
weight="medium"
|
||||
style={{
|
||||
color:
|
||||
tank.tree_type === 'tech-tree'
|
||||
? slateDark.slate11
|
||||
: undefined,
|
||||
position: 'absolute',
|
||||
bottom: 8,
|
||||
left: 12,
|
||||
}}
|
||||
>
|
||||
{tank.name_short ??
|
||||
tank.name ??
|
||||
`Unknown tank ${tank.id}`}
|
||||
</Text>
|
||||
<img
|
||||
src={
|
||||
(tank.tree_type === 'collector'
|
||||
? TANK_ICONS_COLLECTOR
|
||||
: tank.tree_type === 'premium'
|
||||
? TANK_ICONS_PREMIUM
|
||||
: TANK_ICONS)[tank.type]
|
||||
}
|
||||
style={{ width: '1em', height: '1em' }}
|
||||
/>
|
||||
<Text
|
||||
size="4"
|
||||
color={
|
||||
tank.tree_type === 'collector'
|
||||
? 'blue'
|
||||
: tank.tree_type === 'premium'
|
||||
? 'amber'
|
||||
: undefined
|
||||
}
|
||||
weight="medium"
|
||||
style={{
|
||||
color:
|
||||
tank.tree_type === 'tech-tree'
|
||||
? slateDark.slate11
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
{tank.name_short ??
|
||||
tank.name ??
|
||||
`Unknown tank ${tank.id}`}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Inset>
|
||||
</Card>
|
||||
</a>
|
||||
|
||||
@@ -61,21 +61,21 @@ export const tankNamesDiacritics = tankNames.then((tankNames) =>
|
||||
),
|
||||
);
|
||||
|
||||
export const TANK_ICONS: Record<string, string> = {
|
||||
export const TANK_ICONS: Record<TankType, string> = {
|
||||
'AT-SPG': 'https://i.imgur.com/BIHSEH0.png',
|
||||
lightTank: 'https://i.imgur.com/CSNha5V.png',
|
||||
mediumTank: 'https://i.imgur.com/wvf3ltm.png',
|
||||
heavyTank: 'https://i.imgur.com/ECeqlZa.png',
|
||||
};
|
||||
|
||||
export const TANK_ICONS_PREMIUM: Record<string, string> = {
|
||||
export const TANK_ICONS_PREMIUM: Record<TankType, string> = {
|
||||
'AT-SPG': 'https://i.imgur.com/TCu3EdR.png',
|
||||
lightTank: 'https://i.imgur.com/zdkpTRb.png',
|
||||
mediumTank: 'https://i.imgur.com/3z7eHX6.png',
|
||||
heavyTank: 'https://i.imgur.com/P3vbmyA.png',
|
||||
};
|
||||
|
||||
export const TANK_ICONS_COLLECTOR: Record<string, string> = {
|
||||
export const TANK_ICONS_COLLECTOR: Record<TankType, string> = {
|
||||
'AT-SPG': 'https://i.imgur.com/WTjeirB.png',
|
||||
lightTank: 'https://i.imgur.com/EwhtKkU.png',
|
||||
mediumTank: 'https://i.imgur.com/u8YDMBh.png',
|
||||
|
||||
Reference in new issue
Block a user