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 />}