From 879a5d534c56c468b5dba58210668c56bb428bb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 1 Apr 2024 09:27:54 -0500
Subject: [PATCH] feat: consumable info

---
 .../components/Consumables.tsx                | 39 ++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx
index fce4c44f6..29e813558 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx
@@ -1,4 +1,12 @@
-import { Button, Flex, Heading } from '@radix-ui/themes';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import {
+  Button,
+  Flex,
+  Heading,
+  IconButton,
+  Popover,
+  Text,
+} from '@radix-ui/themes';
 import { use } from 'react';
 import { ConsumableButton } from '../../../../../../../components/ModuleButtons/ConsumableButton';
 import { checkConsumableProvisionInclusivity } from '../../../../../../../core/blitzkrieg/checkConsumableProvisionInclusivity';
@@ -28,7 +36,27 @@ export function Consumables() {
   return (
     <ConfigurationChildWrapper>
       <Flex gap="4" align="center">
-        <Heading size="4">Consumables</Heading>
+        <Flex gap="2" align="center">
+          <Popover.Root>
+            <Popover.Trigger>
+              <IconButton variant="ghost">
+                <InfoCircledIcon />
+              </IconButton>
+            </Popover.Trigger>
+
+            <Popover.Content>
+              <Flex direction="column" gap="2">
+                <Text>
+                  <Text color="amber">Yellow consumables</Text> do not affect
+                  the statistics.
+                </Text>
+              </Flex>
+            </Popover.Content>
+          </Popover.Root>
+
+          <Heading size="4">Consumables</Heading>
+        </Flex>
+
         <Button
           variant="ghost"
           color="red"
@@ -48,10 +76,11 @@ export function Consumables() {
 
           return (
             <ConsumableButton
+              special={consumable.duration === undefined}
               duration={
-                typeof consumable.duration === 'number'
-                  ? consumable.duration * (hasHighEndConsumables ? 0.7 : 1)
-                  : undefined
+                consumable.duration === undefined
+                  ? undefined
+                  : consumable.duration * (hasHighEndConsumables ? 0.7 : 1)
               }
               cooldown={
                 consumable.cooldown *