reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add translation to relay screen

Browse Source
This commit is contained in:
reya
2024-01-29 09:30:33 +07:00
parent 25ae4f2201
commit b97676dd3e
8 changed files with 78 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/routes/relays/url.tsx
+28 -29
View File
@@ -1,15 +1,16 @@
import { ArrowLeftIcon, LoaderIcon } from "@lume/icons";
import { LoaderIcon } from "@lume/icons";
import { NIP11 } from "@lume/types";
import { User } from "@lume/ui";
import { Suspense } from "react";
import { Await, useLoaderData, useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Await, useLoaderData, useParams } from "react-router-dom";
import { RelayEventList } from "./components/relayEventList";
export function RelayUrlScreen() {
const { t } = useTranslation();
const { url } = useParams();
const data: { relay?: { [key: string]: string } } = useLoaderData();
const navigate = useNavigate();
const getSoftwareName = (url: string) => {
const filename = url.substring(url.lastIndexOf("/") + 1);
@@ -32,7 +33,7 @@ export function RelayUrlScreen() {
fallback={
<div className="flex items-center gap-2 text-sm font-medium text-neutral-900 dark:text-neutral-100">
<LoaderIcon className="h-4 w-4 animate-spin" />
Loading...
{t("global.loading")}
</div>
}
>
@@ -40,7 +41,7 @@ export function RelayUrlScreen() {
resolve={data.relay}
errorElement={
<div className="text-sm font-medium">
<p>Could not load relay information 😬</p>
<p>{t("relays.relayView.empty")}</p>
</div>
}
>
@@ -55,7 +56,7 @@ export function RelayUrlScreen() {
{resolvedRelay.pubkey ? (
<div className="flex flex-col gap-1">
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
Owner:
{t("relays.relayView.owner")}:
</h5>
<div className="w-full rounded-lg bg-neutral-100 px-2 py-2 dark:bg-neutral-900">
<User pubkey={resolvedRelay.pubkey} variant="simple" />
@@ -65,7 +66,7 @@ export function RelayUrlScreen() {
{resolvedRelay.contact ? (
<div>
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
Contact:
{t("relays.relayView.contact")}:
</h5>
<a
href={`mailto:${resolvedRelay.contact}`}
@@ -79,7 +80,7 @@ export function RelayUrlScreen() {
) : null}
<div>
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
Software:
{t("relays.relayView.software")}:
</h5>
<a
href={resolvedRelay.software}
@@ -94,7 +95,7 @@ export function RelayUrlScreen() {
</div>
<div>
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
Supported NIPs:
{t("relays.relayView.nips")}:
</h5>
<div className="mt-2 grid grid-cols-7 gap-2">
{resolvedRelay.supported_nips.map((item) => (
@@ -113,26 +114,24 @@ export function RelayUrlScreen() {
{resolvedRelay.limitation ? (
<div>
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
Limitation
{t("relays.relayView.limit")}
</h5>
<div className="flex flex-col gap-2 divide-y divide-white/5">
{Object.keys(resolvedRelay.limitation).map(
(key, index) => {
return (
<div
key={key + index}
className="flex items-baseline justify-between pt-2"
>
<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
{titleCase(key)}:
</p>
<p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
{resolvedRelay.limitation[key].toString()}
</p>
</div>
);
},
)}
{Object.keys(resolvedRelay.limitation).map((key) => {
return (
<div
key={key}
className="flex items-baseline justify-between pt-2"
>
<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
{titleCase(key)}:
</p>
<p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
{resolvedRelay.limitation[key].toString()}
</p>
</div>
);
})}
</div>
</div>
) : null}
@@ -144,10 +143,10 @@ export function RelayUrlScreen() {
rel="noreferrer"
className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium hover:bg-blue-600"
>
Open payment website
{t("relays.relayView.payment")}
</a>
<span className="text-center text-xs text-neutral-600 dark:text-neutral-400">
You need to make a payment to connect this relay
{t("relays.relayView.paymentNote")}
</span>
</div>
) : null}