mirror of
https://github.com/lukevella/rallly.git
synced 2025-05-29 16:56:23 +02:00
👷♂️Add custom Trans component (#681)
This commit is contained in:
Luke Vella
GitHub
parent
91bb5b8a73
commit
ffbf920dbd
5 changed files with 40 additions and 28 deletions
|
|
@ -6,12 +6,7 @@ module.exports = {
|
|||
keySeparator: ".",
|
||||
nsSeparator: false,
|
||||
defaultNs: "app",
|
||||
defaultValue: function (lng) {
|
||||
if (lng === "en") {
|
||||
return "__STRING_NOT_TRANSLATED__";
|
||||
}
|
||||
return "";
|
||||
},
|
||||
defaultValue: "__STRING_NOT_TRANSLATED__",
|
||||
lngs: ["en"],
|
||||
ns: ["app"],
|
||||
plural: false,
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import { m } from "framer-motion";
|
||||
import Link from "next/link";
|
||||
import { Trans, useTranslation } from "next-i18next";
|
||||
import * as React from "react";
|
||||
|
||||
import { Trans } from "@/components/trans";
|
||||
|
||||
import { DayjsProvider } from "../../utils/dayjs";
|
||||
import { UserAvatarProvider } from "../poll/user-avatar";
|
||||
import PollDemo from "./poll-demo";
|
||||
import ScribbleArrow from "./scribble-arrow.svg";
|
||||
|
||||
const Hero: React.FunctionComponent = () => {
|
||||
const { t } = useTranslation();
|
||||
const names = ["Peter", "Christine", "Samantha", "Joseph"];
|
||||
|
||||
return (
|
||||
|
|
@ -17,7 +17,6 @@ const Hero: React.FunctionComponent = () => {
|
|||
<div className="my-8 text-center lg:text-left">
|
||||
<h1 className="mb-4 text-4xl font-bold text-slate-800 sm:text-5xl">
|
||||
<Trans
|
||||
t={t}
|
||||
i18nKey="homepage.heroText"
|
||||
components={{
|
||||
br: <br />,
|
||||
|
|
@ -26,7 +25,7 @@ const Hero: React.FunctionComponent = () => {
|
|||
/>
|
||||
</h1>
|
||||
<div className="mb-12 text-xl text-slate-500">
|
||||
{t("homepage.heroSubText")}
|
||||
<Trans i18nKey="homepage.heroSubText" />
|
||||
</div>
|
||||
<div className="space-x-3">
|
||||
<Link
|
||||
|
|
@ -34,7 +33,7 @@ const Hero: React.FunctionComponent = () => {
|
|||
locale={false}
|
||||
className="bg-primary-500 hover:bg-primary-600/90 active:bg-primary-500/90 rounded-md px-5 py-3 font-semibold text-white shadow-sm transition-all hover:text-white hover:no-underline hover:shadow-md"
|
||||
>
|
||||
{t("homepage.getStarted")}
|
||||
<Trans i18nKey="homepage.getStarted" defaults="Get started" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/demo"
|
||||
|
|
@ -42,7 +41,7 @@ const Hero: React.FunctionComponent = () => {
|
|||
className="rounded-md bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md active:bg-slate-600/90"
|
||||
rel="nofollow"
|
||||
>
|
||||
{t("homepage.liveDemo")}
|
||||
<Trans i18nKey="homepage.liveDemo" defaults="Live demo" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -67,7 +66,8 @@ const Hero: React.FunctionComponent = () => {
|
|||
animate={{ opacity: 1, translateY: 0 }}
|
||||
transition={{ type: "spring", delay: 2 }}
|
||||
>
|
||||
{t("homepage.perfect")} 🤩
|
||||
<Trans i18nKey="homepage.perfect" defaults="Perfect!" />
|
||||
<span className="ml-2">🤩</span>
|
||||
<ScribbleArrow className="absolute -right-8 top-3 text-slate-500" />
|
||||
</m.div>
|
||||
<m.div
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ import {
|
|||
} from "@rallly/icons";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { Trans, useTranslation } from "next-i18next";
|
||||
import * as React from "react";
|
||||
|
||||
import { Trans } from "@/components/trans";
|
||||
import DigitalOcean from "~/digitalocean.svg";
|
||||
import Logo from "~/logo.svg";
|
||||
import Sentry from "~/sentry.svg";
|
||||
|
|
@ -17,7 +17,6 @@ import Vercel from "~/vercel-logotype-dark.svg";
|
|||
import { LanguageSelect } from "../../poll/language-selector";
|
||||
|
||||
const Footer: React.FunctionComponent = () => {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
return (
|
||||
<div className="mt-16 bg-gradient-to-b from-gray-50/0 via-gray-50 to-gray-50 ">
|
||||
|
|
@ -28,7 +27,6 @@ const Footer: React.FunctionComponent = () => {
|
|||
<div className="mb-8 mt-4 text-slate-400">
|
||||
<p>
|
||||
<Trans
|
||||
t={t}
|
||||
i18nKey="common.footerSponsor"
|
||||
components={{
|
||||
a: (
|
||||
|
|
@ -42,7 +40,6 @@ const Footer: React.FunctionComponent = () => {
|
|||
</p>
|
||||
<div>
|
||||
<Trans
|
||||
t={t}
|
||||
i18nKey="common.footerCredit"
|
||||
components={{
|
||||
a: (
|
||||
|
|
@ -73,19 +70,26 @@ const Footer: React.FunctionComponent = () => {
|
|||
className="hover:bg-primary-600 focus:ring-primary-600 active:bg-primary-600 inline-flex h-8 items-center rounded-full bg-slate-100 pl-2 pr-3 text-sm text-slate-500 transition-colors hover:text-white hover:no-underline focus:ring-2 focus:ring-offset-1"
|
||||
>
|
||||
<StarIcon className="mr-2 inline-block w-5" />
|
||||
<span>{t("common.starOnGithub")}</span>
|
||||
<span>
|
||||
<Trans
|
||||
i18nKey="common.starOnGithub"
|
||||
defaults="Star us on Github"
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/6">
|
||||
<div className="mb-4 font-medium">{t("homepage.links")}</div>
|
||||
<div className="mb-4 font-medium">
|
||||
<Trans i18nKey="homepage.links" defaults="Links" />
|
||||
</div>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<a
|
||||
className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
|
||||
href="https://github.com/lukevella/rallly/discussions"
|
||||
>
|
||||
{t("common.discussions")}
|
||||
<Trans i18nKey="common.discussions" defaults="Discussions" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -93,7 +97,7 @@ const Footer: React.FunctionComponent = () => {
|
|||
href="https://blog.rallly.co"
|
||||
className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
|
||||
>
|
||||
{t("common.blog")}
|
||||
<Trans i18nKey="common.blog" defaults="Blog" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -101,13 +105,15 @@ const Footer: React.FunctionComponent = () => {
|
|||
href="https://support.rallly.co"
|
||||
className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
|
||||
>
|
||||
{t("common.support")}
|
||||
<Trans i18nKey="common.support" defaults="Support" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="lg:w-1/6">
|
||||
<div className="mb-4 font-medium">{t("common.poweredBy")}</div>
|
||||
<div className="mb-4 font-medium">
|
||||
<Trans i18nKey="common.poweredBy" defaults="Powered by" />
|
||||
</div>
|
||||
<div className="block space-y-4">
|
||||
<div>
|
||||
<a
|
||||
|
|
@ -133,7 +139,9 @@ const Footer: React.FunctionComponent = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="lg:w-2/6">
|
||||
<div className="mb-4 font-medium">{t("common.language")}</div>
|
||||
<div className="mb-4 font-medium">
|
||||
<Trans i18nKey="common.language" defaults="Language" />
|
||||
</div>
|
||||
<LanguageSelect
|
||||
className="mb-4 w-full"
|
||||
onChange={(locale) => {
|
||||
|
|
@ -145,7 +153,7 @@ const Footer: React.FunctionComponent = () => {
|
|||
className="hover:border-primary-600 hover:text-primary-600 inline-flex items-center rounded-md border px-3 py-2 text-xs text-slate-500"
|
||||
>
|
||||
<TranslateIcon className="mr-2 h-5 w-5" />
|
||||
{t("common.volunteerTranslator")} →
|
||||
<Trans i18nKey="common.volunteerTranslator" /> →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -155,7 +163,7 @@ const Footer: React.FunctionComponent = () => {
|
|||
href="/privacy-policy"
|
||||
className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
|
||||
>
|
||||
{t("common.privacyPolicy")}
|
||||
<Trans i18nKey="common.privacyPolicy" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -163,7 +171,7 @@ const Footer: React.FunctionComponent = () => {
|
|||
href="/cookie-policy"
|
||||
className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
|
||||
>
|
||||
{t("common.cookiePolicy")}
|
||||
<Trans i18nKey="common.cookiePolicy" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -171,7 +179,7 @@ const Footer: React.FunctionComponent = () => {
|
|||
href="/terms-of-use"
|
||||
className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
|
||||
>
|
||||
{t("common.termsOfUse")}
|
||||
<Trans i18nKey="common.termsOfUse" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
8
apps/web/src/components/trans.tsx
Normal file
8
apps/web/src/components/trans.tsx
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { Trans as BaseTrans, useTranslation } from "next-i18next";
|
||||
|
||||
type TransWithContextProps = Omit<React.ComponentProps<typeof BaseTrans>, "t">;
|
||||
|
||||
export const Trans = (props: TransWithContextProps) => {
|
||||
const { t } = useTranslation();
|
||||
return <BaseTrans t={t} {...props} />;
|
||||
};
|
||||
|
|
@ -63,6 +63,7 @@
|
|||
"persistent": true
|
||||
},
|
||||
"i18n:scan": {
|
||||
"inputs": ["src/**"],
|
||||
"outputs": ["public/locales/**"]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue