diff --git a/src/app/tools/tankopedia/[id]/components/VotingSection/components/Stars.tsx b/src/app/tools/tankopedia/[id]/components/VotingSection/components/Stars.tsx
new file mode 100644
index 000000000..c8e26da9e
--- /dev/null
+++ b/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 (
+
+
+ {times(stars, () => (
+
+ ))}
+
+
+ {times(5 - stars, () => (
+
+ ))}
+
+
+ );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/VotingSection/index.tsx b/src/app/tools/tankopedia/[id]/components/VotingSection/index.tsx
new file mode 100644
index 000000000..8add33623
--- /dev/null
+++ b/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 (
+
+
+ User poll
+
+ 1.4K votes
+
+
+
+
+
+
+ Difficulty
+
+
+
+ Firepower
+
+
+
+
+
+ Maneuverability
+
+
+
+ Survivability
+
+
+
+
+
+ {!wargaming && (
+
+ Sign in to vote
+
+
+ )}
+
+ );
+}
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index c7df8a384..9b6eb0cd9 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/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 } }) {
+
{/* */}
{!exempt && }
diff --git a/src/components/Navbar/components/WargamingLoginButton.tsx b/src/components/Navbar/components/WargamingLoginButton.tsx
new file mode 100644
index 000000000..bb30dbc2b
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+ Choose your region
+
+
+ {REGIONS.map((region) => (
+
+
+
+
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 1b767cab5..b881b87a1 100644
--- a/src/components/Navbar/index.tsx
+++ b/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() {
)}
- {!logins.wargaming && (
-
-
-
-
-
-
-
- Choose your region
-
-
- {REGIONS.map((region) => (
-
-
-
-
-
- ))}
-
-
-
-
- )}
+ {!logins.wargaming && }
)}