egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

client side i18n fully implemented

Browse Source
This commit is contained in:
daniel31x13
2024-06-09 09:27:16 -04:00
parent d261bd39ec
commit 71678ba9dd
41 changed files with 677 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/SettingsSidebar.tsx
+20 -28
View File
@@ -1,20 +1,18 @@
import useCollectionStore from "@/store/collections";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { useTranslation } from "next-i18next";
export default function SettingsSidebar({ className }: { className?: string }) {
const { t } = useTranslation();
const LINKWARDEN_VERSION = process.env.version;
const { collections } = useCollectionStore();
const router = useRouter();
const [active, setActive] = useState("");
useEffect(() => {
setActive(router.asPath);
}, [router, collections]);
}, [router]);
return (
<div
@@ -26,71 +24,69 @@ export default function SettingsSidebar({ className }: { className?: string }) {
<Link href="/settings/account">
<div
className={`${
active === `/settings/account`
active === "/settings/account"
? "bg-primary/20"
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<i className="bi-person text-primary text-2xl"></i>
<p className="truncate w-full pr-7">Account</p>
<p className="truncate w-full pr-7">{t("account")}</p>
</div>
</Link>
<Link href="/settings/preference">
<div
className={`${
active === `/settings/preference`
active === "/settings/preference"
? "bg-primary/20"
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<i className="bi-sliders text-primary text-2xl"></i>
<p className="truncate w-full pr-7">Preference</p>
<p className="truncate w-full pr-7">{t("preference")}</p>
</div>
</Link>
<Link href="/settings/access-tokens">
<div
className={`${
active === `/settings/access-tokens`
active === "/settings/access-tokens"
? "bg-primary/20"
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<i className="bi-key text-primary text-2xl"></i>
<p className="truncate w-full pr-7">Access Tokens</p>
<p className="truncate w-full pr-7">{t("access_tokens")}</p>
</div>
</Link>
<Link href="/settings/password">
<div
className={`${
active === `/settings/password`
active === "/settings/password"
? "bg-primary/20"
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<i className="bi-lock text-primary text-2xl"></i>
<p className="truncate w-full pr-7">Password</p>
<p className="truncate w-full pr-7">{t("password")}</p>
</div>
</Link>
{process.env.NEXT_PUBLIC_STRIPE ? (
{process.env.NEXT_PUBLIC_STRIPE && (
<Link href="/settings/billing">
<div
className={`${
active === `/settings/billing`
active === "/settings/billing"
? "bg-primary/20"
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<i className="bi-credit-card text-primary text-xl"></i>
<p className="truncate w-full pr-7">Billing</p>
<p className="truncate w-full pr-7">{t("billing")}</p>
</div>
</Link>
) : undefined}
)}
</div>
<div className="flex flex-col gap-1">
@@ -99,42 +95,38 @@ export default function SettingsSidebar({ className }: { className?: string }) {
target="_blank"
className="text-neutral text-sm ml-2 hover:opacity-50 duration-100"
>
Linkwarden {LINKWARDEN_VERSION}
{t("linkwarden_version", { version: LINKWARDEN_VERSION })}
</Link>
<Link href="https://docs.linkwarden.app" target="_blank">
<div
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<i className="bi-question-circle text-primary text-xl"></i>
<p className="truncate w-full pr-7">Help</p>
<p className="truncate w-full pr-7">{t("help")}</p>
</div>
</Link>
<Link href="https://github.com/linkwarden/linkwarden" target="_blank">
<div
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<i className="bi-github text-primary text-xl"></i>
<p className="truncate w-full pr-7">GitHub</p>
<p className="truncate w-full pr-7">{t("github")}</p>
</div>
</Link>
<Link href="https://twitter.com/LinkwardenHQ" target="_blank">
<div
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<i className="bi-twitter-x text-primary text-xl"></i>
<p className="truncate w-full pr-7">Twitter</p>
<p className="truncate w-full pr-7">{t("twitter")}</p>
</div>
</Link>
<Link href="https://fosstodon.org/@linkwarden" target="_blank">
<div
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<i className="bi-mastodon text-primary text-xl"></i>
<p className="truncate w-full pr-7">Mastodon</p>
<p className="truncate w-full pr-7">{t("mastodon")}</p>
</div>
</Link>
</div>