moar translations #96

app/app/[locale]/(stats)/error.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { ErrorDisplay } from "../_layout/ErrorDisplay"
+import { msg } from "@lingui/macro"
+import { useEffect } from "react"
+import { useLingui } from "@lingui/react"
+
+export default function Error({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string }
+    reset: () => void
+}) {
+    const { _ } = useLingui()
+    useEffect(() => {
+        // TODO: Log the error to an error reporting service
+        console.error(error)
+    }, [error])
+
+    return <ErrorDisplay reset={reset} title={_(msg`Failed to fetch stats`)} />
+}

app/app/[locale]/_landing/DiscordCard.tsx

@@ -85,31 +85,35 @@ export const DiscordCard = () => {
                             <Trans>Question of the day</Trans>
                         </p>
                         <p>
-                            Which weapon(s) do you enjoy playing the most? and
-                            which one(s) you dislike playing?
+                            <Trans>
+                                Which weapon(s) do you enjoy playing the most ?
+                                and which one(s) you dislike playing ?
+                            </Trans>
                         </p>
                         <a
                             href="/discord"
                             target="_blank"
                             aria-label="Join our Discord server to share your thoughts"
                         >
                             <span className="flex justify-end items-center gap-1 font-semibold bg-gradient-to-l from-accent to-accentVar1 bg-clip-text text-fill-none">
-                                Share your thoughts
+                                <Trans>Share your thoughts</Trans>
                                 <ArrowSmRightIcon className="w-4 h-4" />
                             </span>
                         </a>
                     </div>
                     <div className="flex gap-2 justify-end p-4">
                         <Button as="a" href="/discord" target="_blank">
-                            <DiscordIcon size="16" className="mr-2" /> Join
+                            <DiscordIcon size="16" className="mr-2" />{" "}
+                            <Trans>Join</Trans>
                         </Button>
                         <Button
                             as="a"
                             href="/donate"
                             target="_blank"
                             className="bg-accentAlt"
                         >
-                            <KofiIcon size="16" className="mr-2" /> Donate
+                            <KofiIcon size="16" className="mr-2" />{" "}
+                            <Trans>Donate</Trans>
                         </Button>
                     </div>
                 </div>

app/app/[locale]/_landing/LandingFavorites.tsx

@@ -3,6 +3,7 @@
 import { Button } from "ui/base/Button"
 import { DiscordIcon } from "ui/icons"
 import { FavoritesGrid } from "@/components/favorites/FavoritesGrid"
+import { Trans } from "@lingui/macro"
 import { useAuth, useFavorites } from "@/providers/auth/AuthProvider"
 
 export const LandingFavorites = () => {
@@ -16,22 +17,26 @@ export const LandingFavorites = () => {
                 <p className="flex flex-col items-center gap-4 py-4">
                     {isLoggedIn ? (
                         <>
-                            You don&apos;t have any favorites yet, you can a
-                            player or a clan as favorite when visiting their
-                            profile page.
+                            <Trans>
+                                You don&apos;t have any favorites yet, you can a
+                                player or a clan as favorite when visiting their
+                                profile page.
+                            </Trans>
                             <Button as="a" href="/rankings">
-                                View rankings
+                                <Trans>View rankings</Trans>
                             </Button>
                         </>
                     ) : (
                         <>
                             <span className="text-textVar1">
-                                Here you{"'"}ll be able to see your favorite
-                                players and clans
+                                <Trans>
+                                    Here you&apos;ll be able to see your
+                                    favorite players and clans
+                                </Trans>
                             </span>
                             <Button onClick={signIn} className="mt-2">
                                 <DiscordIcon size="16" className="mr-2" />
-                                Sign in
+                                <Trans>Sign in</Trans>
                             </Button>
                         </>
                     )}

app/app/[locale]/_landing/WeeklyRotation.tsx

@@ -1,5 +1,6 @@
 import { Image } from "@/components/Image"
 import { Tooltip } from "ui/base/Tooltip"
+import { Trans } from "@lingui/macro"
 import { UnknownIcon } from "ui/icons"
 import { getWeeklyRotation } from "web-parser/common"
 
@@ -35,7 +36,7 @@ export const WeeklyRotation = async () => {
                       ))}
             </div>
             <span className="text-sm text-textVar1 mt-2">
-                Free Legends Rotation
+                <Trans>Free Legends Rotation</Trans>
             </span>
         </div>
     )

app/app/[locale]/_layout/ErrorDisplay.tsx

@@ -0,0 +1,51 @@
+import { Button } from "ui/base/Button"
+import { DiscordIcon, GithubIcon } from "ui/icons"
+import { SectionTitle } from "@/components/layout/SectionTitle"
+import { Trans } from "@lingui/macro"
+
+type ErrorDisplayProps = {
+    title?: string
+    reset: () => void
+}
+
+export const ErrorDisplay = ({
+    title = "Oops, something went wrong",
+    reset,
+}: ErrorDisplayProps) => {
+    return (
+        <div>
+            <SectionTitle className="text-center">{title}</SectionTitle>
+            <div className="flex flex-col justify-center items-center gap-4">
+                {!!reset && (
+                    <Button buttonStyle="primary" onClick={reset}>
+                        <Trans>Try Again</Trans>
+                    </Button>
+                )}
+                <div className="flex justify-center items-center gap-2">
+                    <Button
+                        buttonStyle="outline"
+                        onClick={() => {
+                            window
+                                ?.open("/discord", "_blank", "noreferrer")
+                                ?.focus()
+                        }}
+                        className="flex items-center gap-2"
+                    >
+                        <DiscordIcon size={16} /> Report bug
+                    </Button>
+                    <Button
+                        buttonStyle="outline"
+                        onClick={() => {
+                            window
+                                ?.open("/github", "_blank", "noreferrer")
+                                ?.focus()
+                        }}
+                        className="flex items-center gap-2"
+                    >
+                        <GithubIcon size={16} /> Contribute
+                    </Button>
+                </div>
+            </div>
+        </div>
+    )
+}

app/app/[locale]/_layout/Footer.tsx

@@ -1,5 +1,6 @@
 import { DiscordIcon, GithubIcon, TwitterIcon } from "ui/icons"
 import { Tooltip } from "ui/base/Tooltip"
+import { Trans } from "@lingui/macro"
 import Link from "next/link"
 
 const socialLinks = [
@@ -62,7 +63,9 @@ export const Footer = ({ className }: FooterProps) => {
                 </span>
             </p>
             <div className="max-w-screen-lg mx-auto flex flex-col justify-center items-center border-t p-12 border-bg">
-                <span className="text-sm">Join the community:</span>
+                <span className="text-sm">
+                    <Trans>Join our community :</Trans>
+                </span>
                 <div className="flex items-center gap-8 mt-4">
                     {socialLinks.map(({ Icon, href, name }) => (
                         <Tooltip content={name} key={name}>

app/app/[locale]/_layout/Header.tsx

@@ -9,6 +9,7 @@ import {
     SearchButton,
     SearchButtonIcon,
 } from "@/components/search/SearchButton"
+import { Trans } from "@lingui/macro"
 import { cn } from "@/lib/utils"
 import { useAuth } from "@/providers/auth/AuthProvider"
 import { usePathname } from "next/navigation"
@@ -84,7 +85,7 @@ export const Header = ({ className }: HeaderProps) => {
                         ) : (
                             <Button onClick={signIn}>
                                 <DiscordIcon size="16" className="mr-2" />
-                                Sign in
+                                <Trans>Sign in</Trans>
                             </Button>
                         )}
                         <SearchButtonIcon

app/app/[locale]/_layout/SideNav.tsx

@@ -9,12 +9,15 @@ import {
 import { HiBookOpen, HiHeart, HiHome, HiUserGroup, HiX } from "react-icons/hi"
 // TODO: replace react-icons with lucide
 import { Image } from "@/components/Image"
+import { type MessageDescriptor } from "@lingui/core"
 import { Tooltip } from "ui/base/Tooltip"
 import { cleanString } from "common/helpers/cleanString"
 import { cn } from "@/lib/utils"
 import { css } from "ui/theme"
 import { legendsMap } from "bhapi/legends"
+import { msg, t } from "@lingui/macro"
 import { useFavorites } from "@/providers/auth/AuthProvider"
+import { useLingui } from "@lingui/react"
 import { useParams, usePathname } from "next/navigation"
 import { useSideNav } from "@/providers/SideNavProvider"
 import Link from "next/link"
@@ -104,80 +107,84 @@ const SideNavIcon = ({
     )
 }
 
-const defaultNav: {
-    name: string
-    icon: ReactNode
-    href: string
-    exact?: boolean
-    external?: boolean
-}[] = [
-    {
-        name: "Home",
-        icon: <HiHome className="w-6 h-6" />,
-        href: "/",
-        exact: true,
-    },
-    {
-        name: "1v1 Rankings",
-        icon: <Rankings1v1Icon className="w-6 h-6" />,
-        href: "/ranked/1v1",
-        exact: false,
-    },
-    {
-        name: "2v2 Rankings",
-        icon: <Rankings2v2Icon className="w-6 h-6" />,
-        href: "/ranked/2v2",
-        exact: false,
-    },
-    {
-        name: "Power Rankings",
-        href: "/power-rankings",
-        icon: <RankingsPowerIcon className="w-6 h-6" />,
-    },
-    {
-        name: "Clans",
-        href: "/clans",
-        icon: <HiUserGroup className="w-6 h-6" />,
-    },
-    {
-        name: "Discord Server",
-        href: "/discord",
-        icon: <DiscordIcon className="w-6 h-6" />,
-        external: true,
-    },
-    {
-        name: "Wiki",
-        href: "/wiki",
-        icon: <HiBookOpen className="w-6 h-6" />,
-        external: true,
-    },
-]
-
 type SideNavProps = {
     className?: string
 }
 
 export const SideNav = ({ className }: SideNavProps) => {
     const { favorites, removeFavorite } = useFavorites()
-
     const { isSideNavOpen, closeSideNav } = useSideNav()
-
     const pathname = usePathname()
-
     const { playerId, clanId } = useParams()
+    const { _ } = useLingui()
 
-    const nav = defaultNav.concat(
-        favorites.length > 0
+    const nav: {
+        id: string
+        name: MessageDescriptor
+        icon: ReactNode
+        href: string
+        exact?: boolean
+        external?: boolean
+    }[] = [
+        {
+            id: "home",
+            name: msg`Home`,
+            icon: <HiHome className="w-6 h-6" />,
+            href: "/",
+            exact: true,
+        },
+        {
+            id: "rankings-1v1",
+            name: msg`1v1 Rankings`,
+            icon: <Rankings1v1Icon className="w-6 h-6" />,
+            href: "/ranked/1v1",
+            exact: false,
+        },
+        {
+            id: "rankings-2v2",
+            name: msg`2v2 Rankings`,
+            icon: <Rankings2v2Icon className="w-6 h-6" />,
+            href: "/ranked/2v2",
+            exact: false,
+        },
+        {
+            id: "power-rankings",
+            name: msg`Power Rankings`,
+            href: "/power-rankings",
+            icon: <RankingsPowerIcon className="w-6 h-6" />,
+        },
+        {
+            id: "clans",
+            name: msg`Clans`,
+            href: "/clans",
+            icon: <HiUserGroup className="w-6 h-6" />,
+        },
+        {
+            id: "discord",
+            name: msg`Discord Server`,
+            href: "/discord",
+            icon: <DiscordIcon className="w-6 h-6" />,
+            external: true,
+        },
+        {
+            id: "wiki",
+            name: msg`Wiki`,
+            href: "/wiki",
+            icon: <HiBookOpen className="w-6 h-6" />,
+            external: true,
+        },
+        ...(favorites.length > 0
             ? [
                   {
-                      name: "Favorites",
+                      id: "favorites",
+                      name: msg`Favorites`,
                       icon: <HiHeart className="w-6 h-6" />,
                       href: "/@me/favorites",
                       exact: false,
                   },
               ]
-            : [],
-    )
+            : []),
+    ]
 
     return (
         <div className="z-50">
@@ -208,8 +215,8 @@ export const SideNav = ({ className }: SideNavProps) => {
                 <div className="flex flex-col gap-2 flex-1 p-2">
                     {nav.map((nav) => (
                         <SideNavIcon
-                            key={nav.name}
-                            name={nav.name}
+                            key={nav.id}
+                            name={_(nav.name)}
                             content={nav.icon}
                             href={nav.href}
                             active={