feat: plug

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equalizer.tsx

@@ -1,5 +1,14 @@
 import { asset } from "@blitzkit/core";
-import { Box, Flex, Heading, Switch, Text } from "@radix-ui/themes";
+import { InfoCircledIcon } from "@radix-ui/react-icons";
+import {
+  Box,
+  Flex,
+  Heading,
+  Link,
+  Popover,
+  Switch,
+  Text,
+} from "@radix-ui/themes";
 import { useLocale } from "../../../../hooks/useLocale";
 import { Duel } from "../../../../stores/duel";
 import { ConfigurationChildWrapper } from "./ConfigurationChildWrapper";
@@ -15,6 +24,7 @@ export function Equalizer() {
       </Heading>
 
       <Box
+        mt="2"
         onClick={() => {
           Duel.mutate((draft) => {
             draft.protagonist.equalize = !draft.protagonist.equalize;
@@ -40,12 +50,47 @@ export function Equalizer() {
               "linear-gradient(90deg, var(--black-a3), var(--gray-1))",
           }}
         >
-          <Text>
+          <Text
+            style={{
+              textShadow: "0 0 var(--space-1) var(--black-a12)",
+            }}
+          >
             {strings.website.tools.tankopedia.configuration.equalizer.equalize}
           </Text>
           <Switch checked={equalize} />
         </Flex>
       </Box>
+
+      <Popover.Root>
+        <Popover.Trigger>
+          <Text style={{ cursor: "pointer" }} size="2" color="gray">
+            <Flex align="center" gap="2">
+              Brought to your by{" "}
+              <img
+                src="/assets/images/third-party/wotb-news.png"
+                style={{
+                  width: "1rem",
+                  height: "1rem",
+                  objectFit: "cover",
+                  borderRadius: "50%",
+                }}
+              />{" "}
+              WoTB News <InfoCircledIcon />
+            </Flex>
+          </Text>
+        </Popover.Trigger>
+
+        <Popover.Content>
+          <Text>
+            This feature was brought to you early, ahead of the release of the
+            game mode, thanks to{" "}
+            <Link href="https://discord.gg/WHdER7ZPAD" target="_blank">
+              WoTB News
+            </Link>
+            .
+          </Text>
+        </Popover.Content>
+      </Popover.Root>
     </ConfigurationChildWrapper>
   );
 }

packages/website/src/pages/api/index.astro

@@ -5,3 +5,4 @@ import ToolLayout from "../../layouts/ToolLayout.astro";
 ---
 
 <ToolLayout locale={locales.default} tool={tools.api} />
+