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 && } )}