mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 18:57:03 +02:00
feat: equipment popover
This commit is contained in:
1 parent
9d1e059ea5
commit
2f2996a40c
2 files changed
+144
-78
No files matched your search
@@ -1,61 +0,0 @@
|
||||
import { Button, Flex } from '@radix-ui/themes';
|
||||
import { times } from 'lodash';
|
||||
import { theme } from '../stitches.config';
|
||||
import { EquipmentMatrix } from '../stores/duel';
|
||||
|
||||
interface EquipmentMatrixCompactProps {
|
||||
equipmentMatrix: EquipmentMatrix;
|
||||
}
|
||||
|
||||
export function EquipmentMatrixCompact({
|
||||
equipmentMatrix,
|
||||
}: EquipmentMatrixCompactProps) {
|
||||
return (
|
||||
<Button variant="ghost">
|
||||
<Flex gap="1" direction="column">
|
||||
{times(3, (y) => (
|
||||
<Flex
|
||||
style={{
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
{times(3, (x) => {
|
||||
const equipment = equipmentMatrix[y][x];
|
||||
|
||||
return (
|
||||
<Flex
|
||||
style={{
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 4,
|
||||
height: 8,
|
||||
backgroundColor:
|
||||
equipment === -1
|
||||
? theme.colors.textLowContrast_green
|
||||
: theme.colors.textLowContrast,
|
||||
borderRadius: 2,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
width: 4,
|
||||
height: 8,
|
||||
backgroundColor:
|
||||
equipment === 1
|
||||
? theme.colors.textLowContrast_green
|
||||
: theme.colors.textLowContrast,
|
||||
borderRadius: 2,
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user