feat: start of user poll

src/app/tools/tankopedia/[id]/components/VotingSection/components/Stars.tsx

@@ -0,0 +1,46 @@
+import { StarFilledIcon, StarIcon } from '@radix-ui/react-icons';
+import { Flex, Text, TextProps } from '@radix-ui/themes';
+import { times } from 'lodash';
+
+interface StarsProps {
+  stars: 1 | 2 | 3 | 4 | 5;
+  lowerIsBetter?: boolean;
+}
+
+export function Stars({ stars, lowerIsBetter = false }: StarsProps) {
+  let color: TextProps['color'];
+  const trueStars = lowerIsBetter ? 6 - stars : stars;
+
+  switch (trueStars) {
+    case 1:
+      color = 'red';
+      break;
+    case 2:
+      color = 'orange';
+      break;
+    case 3:
+      color = 'amber';
+      break;
+    case 4:
+      color = 'blue';
+      break;
+    case 5:
+      color = 'green';
+      break;
+  }
+
+  return (
+    <Flex>
+      <Text color={color}>
+        {times(stars, () => (
+          <StarFilledIcon />
+        ))}
+      </Text>
+      <Text>
+        {times(5 - stars, () => (
+          <StarIcon />
+        ))}
+      </Text>
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/components/VotingSection/index.tsx

@@ -0,0 +1,49 @@
+import { Flex, Heading, Text } from '@radix-ui/themes';
+import { WargamingLoginButton } from '../../../../../../components/Navbar/components/WargamingLoginButton';
+import * as App from '../../../../../../stores/app';
+import { Stars } from './components/Stars';
+
+export function VotingSection() {
+  const wargaming = App.use((state) => state.logins.wargaming);
+
+  return (
+    <Flex direction="column" align="center" gap="4">
+      <Flex direction="column" align="center">
+        <Heading>User poll</Heading>
+        <Flex align="center" gap="2">
+          1.4K votes
+        </Flex>
+      </Flex>
+
+      <Flex gap="0" direction="column">
+        <Flex gap="6">
+          <Flex align="center" justify="between" width="13rem">
+            <Text>Difficulty</Text>
+            <Stars lowerIsBetter stars={4} />
+          </Flex>
+          <Flex align="center" justify="between" width="13rem">
+            <Text>Firepower</Text>
+            <Stars stars={4} />
+          </Flex>
+        </Flex>
+        <Flex gap="6">
+          <Flex align="center" justify="between" width="13rem">
+            <Text>Maneuverability</Text>
+            <Stars stars={5} />
+          </Flex>
+          <Flex align="center" justify="between" width="13rem">
+            <Text>Survivability</Text>
+            <Stars stars={1} />
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {!wargaming && (
+        <Flex align="center" gap="2">
+          <Text color="gray">Sign in to vote</Text>
+          <WargamingLoginButton />
+        </Flex>
+      )}
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/page.tsx

@@ -15,6 +15,7 @@ import { HeroSection } from './components/Model/HeroSection';
 import { MetaSection } from './components/Model/MetaSection';
 import { TechTreeSection } from './components/Model/TechTreeSection';
 import { VideoSection } from './components/VideoSection';
+import { VotingSection } from './components/VotingSection';
 
 export default function Page({ params }: { params: { id: string } }) {
   const id = Number(params.id);
@@ -82,6 +83,7 @@ export default function Page({ params }: { params: { id: string } }) {
     <PageWrapper p="0" noMaxWidth color="purple" size={1600} gap="9">
       <HeroSection id={id} />
       <CalloutsSection />
+      <VotingSection />
       {/* <ShotDisplaySection /> */}
       <TechTreeSection />
       {!exempt && <AdMidSectionResponsive />}

src/components/Navbar/components/WargamingLoginButton.tsx

@@ -0,0 +1,44 @@
+import { Button, ButtonProps, Dialog, Flex, Text } from '@radix-ui/themes';
+import { REGIONS } from '../../../constants/regions';
+import { WARGAMING_APPLICATION_ID } from '../../../constants/wargamingApplicationID';
+import { WargamingIcon } from '../../../icons/Wargaming';
+import strings from '../../../lang/en-US.json';
+import { Link } from '../../Link';
+
+export function WargamingLoginButton(props: ButtonProps) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger>
+        <Button color="red" {...props}>
+          <WargamingIcon width={15} height={15} /> Wargaming
+        </Button>
+      </Dialog.Trigger>
+
+      <Dialog.Content width="fit-content">
+        <Flex direction="column" gap="4" align="center">
+          <Text color="gray">Choose your region</Text>
+
+          <Flex gap="2" wrap="wrap">
+            {REGIONS.map((region) => (
+              <Dialog.Close key={region}>
+                <Link
+                  href={
+                    typeof window !== 'undefined'
+                      ? `https://api.worldoftanks.${region}/wot/auth/login/?application_id=${WARGAMING_APPLICATION_ID}&redirect_uri=${encodeURIComponent(
+                          `${location.origin}/auth/wargaming?return=${location.origin}${location.pathname}`,
+                        )}`
+                      : undefined
+                  }
+                >
+                  <Button color="red">
+                    {strings.common.regions.normal[region]}
+                  </Button>
+                </Link>
+              </Dialog.Close>
+            ))}
+          </Flex>
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

src/components/Navbar/index.tsx

@@ -11,7 +11,6 @@ import {
   Box,
   Button,
   Code,
-  Dialog,
   Flex,
   Grid,
   IconButton,
@@ -24,17 +23,15 @@ import {
 import { usePathname } from 'next/navigation';
 import { Fragment, useState } from 'react';
 import { BRANCH_NAMES } from '../../app/components/Hero/constants';
-import { REGIONS } from '../../constants/regions';
 import { homeTool, TOOLS } from '../../constants/tools';
-import { WARGAMING_APPLICATION_ID } from '../../constants/wargamingApplicationID';
 import { imgur, ImgurSize } from '../../core/blitzkit/imgur';
 import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl';
 import { assertSecret } from '../../core/blitzkit/secret';
 import { PatreonIcon } from '../../icons/Patreon';
 import { WargamingIcon } from '../../icons/Wargaming';
-import strings from '../../lang/en-US.json';
 import * as App from '../../stores/app';
 import { Link } from '../Link';
+import { WargamingLoginButton } from './components/WargamingLoginButton';
 import * as styles from './index.css';
 
 export default function Navbar() {
@@ -237,41 +234,7 @@ export default function Navbar() {
                         </Link>
                       )}
 
-                      {!logins.wargaming && (
-                        <Dialog.Root>
-                          <Dialog.Trigger>
-                            <Button color="red">
-                              <WargamingIcon width={15} height={15} /> Wargaming
-                            </Button>
-                          </Dialog.Trigger>
-
-                          <Dialog.Content width="fit-content">
-                            <Flex direction="column" gap="4" align="center">
-                              <Text color="gray">Choose your region</Text>
-
-                              <Flex gap="2" wrap="wrap">
-                                {REGIONS.map((region) => (
-                                  <Dialog.Close key={region}>
-                                    <Link
-                                      href={
-                                        typeof window !== 'undefined'
-                                          ? `https://api.worldoftanks.${region}/wot/auth/login/?application_id=${WARGAMING_APPLICATION_ID}&redirect_uri=${encodeURIComponent(
-                                              `${location.origin}/auth/wargaming?return=${location.origin}${location.pathname}`,
-                                            )}`
-                                          : undefined
-                                      }
-                                    >
-                                      <Button color="red">
-                                        {strings.common.regions.normal[region]}
-                                      </Button>
-                                    </Link>
-                                  </Dialog.Close>
-                                ))}
-                              </Flex>
-                            </Flex>
-                          </Dialog.Content>
-                        </Dialog.Root>
-                      )}
+                      {!logins.wargaming && <WargamingLoginButton />}
                     </Flex>
                   )}
                 </Popover.Content>