mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-07-17 18:08:26 -05:00
home page trans
This commit is contained in:
Sendou
parent
e9059b7ebf
commit
a08c53ba1e
|
|
@ -940,5 +940,20 @@
|
|||
"Profile": "Profile",
|
||||
"Log out": "Log out",
|
||||
"Log in via Discord": "Log in via Discord"
|
||||
},
|
||||
"home": {
|
||||
"Competitive Splatoon Hub": "Competitive Splatoon Hub",
|
||||
"Play in competitive events this week": "Play in competitive events this week",
|
||||
"View more info": "View more info",
|
||||
"Featuring...": "Featuring...",
|
||||
"xRankMonths": "{{xRankMonthCount}} months of <3><0>X Rank Top 500 data</0></3>",
|
||||
"buildCount": "<0></0> <2><0>builds</0></2>",
|
||||
"userCount": "<0></0> <2><0>users</0></2>",
|
||||
"faCount": "<0></0> <2><0>free agents</0></2>",
|
||||
"tournamentCount": "<0></0> <2><0>tournament results</0></2>",
|
||||
"As well as": "As well as",
|
||||
"calendarExplanation": "<0><0>Calendar</0></0> to discover upcoming events",
|
||||
"drawingToolExplanation": "<0><0>Map drawing tool</0></0> to easily share your plans",
|
||||
"analyzerExplanation": "<0><0>Build analyzer</0></0> to find out exactly what your builds are doing"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,11 @@ import "./HomePage.css"
|
|||
import { Helmet } from "react-helmet-async"
|
||||
import Stats from "./Stats"
|
||||
import WeeksTournaments from "./WeeksTournaments"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
const HomePage: React.FC<RouteComponentProps> = () => {
|
||||
const { colorMode, grayWithShade } = useContext(MyThemeContext)
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
|
|
@ -32,7 +34,7 @@ const HomePage: React.FC<RouteComponentProps> = () => {
|
|||
fontWeight="light"
|
||||
color={grayWithShade}
|
||||
>
|
||||
Competitive Splatoon Hub
|
||||
{t("home;Competitive Splatoon Hub")}
|
||||
</Heading>
|
||||
<Stats />
|
||||
</Flex>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import React, { useContext } from "react"
|
|||
import { STATS } from "../../graphql/queries/stats"
|
||||
import MyThemeContext from "../../themeContext"
|
||||
import Error from "../common/Error"
|
||||
import { useTranslation, Trans } from "react-i18next"
|
||||
|
||||
interface StatsData {
|
||||
stats: {
|
||||
|
|
@ -24,12 +25,17 @@ const xRankMonths = () => {
|
|||
const Stats: React.FC = () => {
|
||||
const { grayWithShade, themeColorWithShade } = useContext(MyThemeContext)
|
||||
const { data, error } = useQuery<StatsData>(STATS)
|
||||
const { t } = useTranslation()
|
||||
|
||||
if (error) return <Error errorMessage={error.message} />
|
||||
|
||||
const stats = data?.stats
|
||||
|
||||
const getStatString = (value?: number) => {
|
||||
interface StatOrSkeletonProps {
|
||||
value?: number
|
||||
}
|
||||
|
||||
const StatOrSkeleton: React.FC<StatOrSkeletonProps> = ({ value }) => {
|
||||
if (!value) {
|
||||
return (
|
||||
<Skeleton
|
||||
|
|
@ -40,13 +46,17 @@ const Stats: React.FC = () => {
|
|||
/>
|
||||
)
|
||||
}
|
||||
return value
|
||||
return <>{value}</>
|
||||
}
|
||||
|
||||
const getStatString = (_asd: any) => 2
|
||||
|
||||
const xRankMonthCount = xRankMonths()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box fontSize="xl" fontWeight="hairline" mt="1em" color={grayWithShade}>
|
||||
Featuring...
|
||||
{t("home;Featuring...")}
|
||||
</Box>
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
|
|
@ -57,48 +67,58 @@ const Stats: React.FC = () => {
|
|||
textAlign="center"
|
||||
>
|
||||
<Box mb="0.5em">
|
||||
{xRankMonths()} months of{" "}
|
||||
<Link to="/xsearch">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
X Rank Top 500 data
|
||||
</Box>
|
||||
</Link>
|
||||
<Trans i18nKey="home;xRankMonths">
|
||||
{{ xRankMonthCount }} months of{" "}
|
||||
<Link to="/xsearch">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
X Rank Top 500 data
|
||||
</Box>
|
||||
</Link>
|
||||
</Trans>
|
||||
</Box>
|
||||
<Box mb="0.5em">
|
||||
{getStatString(stats?.build_count)}{" "}
|
||||
<Link to="/builds">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
builds
|
||||
</Box>
|
||||
</Link>
|
||||
<Trans i18nKey="home;buildCount">
|
||||
<StatOrSkeleton value={stats?.build_count} />{" "}
|
||||
<Link to="/builds">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
builds
|
||||
</Box>
|
||||
</Link>
|
||||
</Trans>
|
||||
</Box>
|
||||
<Box mb="0.5em">
|
||||
{getStatString(stats?.user_count)}{" "}
|
||||
<Link to="/u">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
users
|
||||
</Box>
|
||||
</Link>{" "}
|
||||
<Trans i18nKey="home;userCount">
|
||||
<StatOrSkeleton value={stats?.user_count} />{" "}
|
||||
<Link to="/u">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
users
|
||||
</Box>
|
||||
</Link>{" "}
|
||||
</Trans>
|
||||
</Box>
|
||||
<Box mb="0.5em">
|
||||
{getStatString(stats?.fa_count)}{" "}
|
||||
<Link to="/freeagents">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
free agents
|
||||
</Box>
|
||||
</Link>
|
||||
<Trans i18nKey="home;faCount">
|
||||
<StatOrSkeleton value={stats?.fa_count} />{" "}
|
||||
<Link to="/freeagents">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
free agents
|
||||
</Box>
|
||||
</Link>
|
||||
</Trans>
|
||||
</Box>
|
||||
<Box>
|
||||
{getStatString(stats?.tournament_count)}{" "}
|
||||
<Link to="/tournaments">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
tournament results
|
||||
</Box>
|
||||
</Link>
|
||||
<Trans i18nKey="home;tournamentCount">
|
||||
<StatOrSkeleton value={stats?.tournament_count} />{" "}
|
||||
<Link to="/tournaments">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
tournament results
|
||||
</Box>
|
||||
</Link>
|
||||
</Trans>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Box fontSize="xl" fontWeight="hairline" mt="0.5em" color={grayWithShade}>
|
||||
As well as
|
||||
{t("home;As well as")}
|
||||
</Box>
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
|
|
@ -108,28 +128,34 @@ const Stats: React.FC = () => {
|
|||
textAlign="center"
|
||||
>
|
||||
<Box mb="0.5em">
|
||||
<Link to="/calendar">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
Calendar
|
||||
</Box>
|
||||
</Link>{" "}
|
||||
to discover upcoming events
|
||||
<Trans i18nKey="home;calendarExplanation">
|
||||
<Link to="/calendar">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
Calendar
|
||||
</Box>
|
||||
</Link>{" "}
|
||||
to discover upcoming events
|
||||
</Trans>
|
||||
</Box>
|
||||
<Box mb="0.5em">
|
||||
<Link to="/plans">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
Map drawing tool
|
||||
</Box>
|
||||
</Link>{" "}
|
||||
to easily share your plans
|
||||
<Trans i18nKey="home;drawingToolExplanation">
|
||||
<Link to="/plans">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
Map drawing tool
|
||||
</Box>
|
||||
</Link>{" "}
|
||||
to easily share your plans
|
||||
</Trans>
|
||||
</Box>
|
||||
<Box>
|
||||
<Link to="/analyzer">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
Build analyzer
|
||||
</Box>
|
||||
</Link>{" "}
|
||||
to find out exactly what your builds are doing
|
||||
<Trans i18nKey="home;analyzerExplanation">
|
||||
<Link to="/analyzer">
|
||||
<Box as="span" color={themeColorWithShade}>
|
||||
Build analyzer
|
||||
</Box>
|
||||
</Link>{" "}
|
||||
to find out exactly what your builds are doing
|
||||
</Trans>
|
||||
</Box>
|
||||
</Flex>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -13,10 +13,12 @@ import { FiClock, FiInfo } from "react-icons/fi"
|
|||
import MyThemeContext from "../../themeContext"
|
||||
import Button from "../elements/Button"
|
||||
import { Link } from "@reach/router"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
const WeeksTournaments: React.FC = () => {
|
||||
const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext)
|
||||
const { data, error, loading } = useQuery<UpcomingEventsData>(UPCOMING_EVENTS)
|
||||
const { t } = useTranslation()
|
||||
|
||||
if (loading) return <Loading />
|
||||
if (error) return <Error errorMessage={error.message} />
|
||||
|
|
@ -31,7 +33,7 @@ const WeeksTournaments: React.FC = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SubHeader>Play in competitive events this week</SubHeader>
|
||||
<SubHeader>{t("home;Play in competitive events this week")}</SubHeader>
|
||||
<Flex alignItems="center" flexDirection="column">
|
||||
{events.map((tournament) => (
|
||||
<Box
|
||||
|
|
@ -55,7 +57,7 @@ const WeeksTournaments: React.FC = () => {
|
|||
<Box mt="1em">
|
||||
<Link to="/calendar">
|
||||
<Button outlined icon={FiInfo}>
|
||||
View more info
|
||||
{t("home;View more info")}
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ const UserItem: React.FC<{ data?: UserData }> = ({ data }) => {
|
|||
color={themeColorWithShade}
|
||||
size="1.5em"
|
||||
/>{" "}
|
||||
{t("Log in via Discord")}
|
||||
{t("navigation;Log in via Discord")}
|
||||
</PseudoBox>
|
||||
</a>
|
||||
</ListItem>
|
||||
|
|
@ -101,7 +101,7 @@ const UserItem: React.FC<{ data?: UserData }> = ({ data }) => {
|
|||
<Flex alignItems="center" justifyContent="center">
|
||||
<Box as={FiUser} w="24px" h="auto" mr="1em" />{" "}
|
||||
<Box as="span" mt="2px">
|
||||
{t("Profile")}
|
||||
{t("navigation;Profile")}
|
||||
</Box>
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
|
|
@ -111,7 +111,7 @@ const UserItem: React.FC<{ data?: UserData }> = ({ data }) => {
|
|||
<Flex alignItems="center" justifyContent="center">
|
||||
<Box as={FiLogOut} w="24px" h="auto" mr="1em" />{" "}
|
||||
<Box as="span" mt="2px">
|
||||
{t("Log out")}
|
||||
{t("navigation;Log out")}
|
||||
</Box>
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user