mirror of
https://github.com/lumehq/lume.git
synced 2025-03-17 21:32:32 +01:00
feat: migrate onboarding to i18n
This commit is contained in:
reya
parent
23482531c5
commit
2b19650e46
@ -1,4 +1,4 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export function LoginScreen() {
|
||||
@ -43,12 +43,15 @@ export function LoginScreen() {
|
||||
>
|
||||
{t("login.loginWithPrivkey")}
|
||||
</Link>
|
||||
<p className="text-sm text-center text-neutral-500">
|
||||
<Trans
|
||||
i18nKey="login.footer"
|
||||
className="text-sm text-center text-neutral-500"
|
||||
>
|
||||
Lume will put your Private Key in{" "}
|
||||
<span className="text-teal-600">Secure Storage</span> depended
|
||||
on your OS Platform. It will be secured by Password or Biometric
|
||||
ID
|
||||
</p>
|
||||
</Trans>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -53,7 +53,7 @@ export function ErrorScreen() {
|
||||
return (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="relative flex h-screen w-screen items-center justify-center bg-blue-600 overflow-hidden rounded-t-xl"
|
||||
className="relative flex h-screen w-screen items-center justify-center bg-blue-500 overflow-hidden rounded-xl"
|
||||
>
|
||||
<div className="flex w-full max-w-2xl flex-col items-start gap-8">
|
||||
<div className="flex flex-col">
|
||||
@ -95,7 +95,7 @@ export function ErrorScreen() {
|
||||
<div className="flex w-full flex-col gap-2">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-xl font-semibold text-white">
|
||||
3. Report this issue to Lume's Devs
|
||||
3. Report this issue to Lume
|
||||
</div>
|
||||
<a
|
||||
href="https://github.com/luminous-devs/lume/issues/new"
|
||||
@ -120,13 +120,13 @@ export function ErrorScreen() {
|
||||
</div>
|
||||
<div className="select-text text-lg font-medium text-blue-300">
|
||||
<p>
|
||||
While waiting for Lume's Devs to release the bug fixes,
|
||||
you always can use other Nostr clients with your account:
|
||||
While waiting for Lume release the bug fixes, you always can
|
||||
use other Nostr clients with your account:
|
||||
</p>
|
||||
<div className="mt-2 flex flex-col gap-1 text-white">
|
||||
<a
|
||||
className="hover:!underline"
|
||||
href="https://snort.social"
|
||||
href="https://snort.social/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
@ -134,15 +134,15 @@ export function ErrorScreen() {
|
||||
</a>
|
||||
<a
|
||||
className="hover:!underline"
|
||||
href="https://primal.net"
|
||||
href="https://nostter.app/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
primal.net
|
||||
nostter
|
||||
</a>
|
||||
<a
|
||||
className="hover:!underline"
|
||||
href="https://nostrudel.ninja"
|
||||
href="https://nostrudel.ninja/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
|
||||
@ -5,12 +5,14 @@ import { useQueryClient } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import { useSetAtom } from "jotai";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export function OnboardingFinishScreen() {
|
||||
const storage = useStorage();
|
||||
const queryClient = useQueryClient();
|
||||
const setOnboarding = useSetAtom(onboardingAtom);
|
||||
|
||||
const [t] = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const finish = async () => {
|
||||
@ -33,9 +35,9 @@ export function OnboardingFinishScreen() {
|
||||
>
|
||||
<CheckIcon className="size-12 text-teal-500" />
|
||||
<div className="text-center">
|
||||
<p className="text-lg font-medium">Profile setup complete!</p>
|
||||
<p className="text-lg font-medium">{t("onboarding.finish.title")}</p>
|
||||
<p className="leading-tight text-neutral-600 dark:text-neutral-400">
|
||||
You can exit the setup here and start using Lume.
|
||||
{t("onboarding.finish.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 flex flex-col gap-2 items-center">
|
||||
@ -44,7 +46,11 @@ export function OnboardingFinishScreen() {
|
||||
onClick={finish}
|
||||
className="inline-flex items-center justify-center gap-2 w-44 font-medium h-11 rounded-xl bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
|
||||
>
|
||||
{loading ? <LoaderIcon className="size-4 animate-spin" /> : "Close"}
|
||||
{loading ? (
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
) : (
|
||||
t("global.close")
|
||||
)}
|
||||
</button>
|
||||
<a
|
||||
href="https://github.com/luminous-devs/lume/issues"
|
||||
@ -52,7 +58,7 @@ export function OnboardingFinishScreen() {
|
||||
className="inline-flex items-center justify-center gap-2 w-44 px-5 font-medium h-11 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-700 dark:text-neutral-600"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Report a issue
|
||||
{t("onboarding.finish.report")}
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@ -1,310 +0,0 @@
|
||||
import { User, useArk } from "@lume/ark";
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
CancelIcon,
|
||||
ChevronDownIcon,
|
||||
LoaderIcon,
|
||||
PlusIcon,
|
||||
} from "@lume/icons";
|
||||
import { cn } from "@lume/utils";
|
||||
import * as Accordion from "@radix-ui/react-accordion";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import { nip19 } from "nostr-tools";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const POPULAR_USERS = [
|
||||
"npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6",
|
||||
"npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m",
|
||||
"npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s",
|
||||
"npub1gcxzte5zlkncx26j68ez60fzkvtkm9e0vrwdcvsjakxf9mu9qewqlfnj5z",
|
||||
"npub1az9xj85cmxv8e9j9y80lvqp97crsqdu2fpu3srwthd99qfu9qsgstam8y8",
|
||||
"npub1a2cww4kn9wqte4ry70vyfwqyqvpswksna27rtxd8vty6c74era8sdcw83a",
|
||||
"npub168ghgug469n4r2tuyw05dmqhqv5jcwm7nxytn67afmz8qkc4a4zqsu2dlc",
|
||||
"npub133vj8ycevdle0cq8mtgddq0xtn34kxkwxvak983dx0u5vhqnycyqj6tcza",
|
||||
"npub18ams6ewn5aj2n3wt2qawzglx9mr4nzksxhvrdc4gzrecw7n5tvjqctp424",
|
||||
"npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac",
|
||||
"npub1prya33fnqerq0fljwjtp77ehtu7jlsjt5ydhwveuwmqdsdm6k8esk42xcv",
|
||||
"npub19mduaf5569jx9xz555jcx3v06mvktvtpu0zgk47n4lcpjsz43zzqhj6vzk",
|
||||
];
|
||||
|
||||
const LUME_USERS = [
|
||||
"npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445",
|
||||
];
|
||||
|
||||
export function OnboardingFollowScreen() {
|
||||
const ark = useArk();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { isLoading, isError, data } = useQuery({
|
||||
queryKey: ["trending-users"],
|
||||
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
||||
const res = await fetch("https://api.nostr.band/v0/trending/profiles", {
|
||||
signal,
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to fetch trending users from nostr.band API.");
|
||||
}
|
||||
return res.json();
|
||||
},
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [follows, setFollows] = useState<string[]>([]);
|
||||
|
||||
// toggle follow state
|
||||
const toggleFollow = (pubkey: string) => {
|
||||
const arr = follows.includes(pubkey)
|
||||
? follows.filter((i) => i !== pubkey)
|
||||
: [...follows, pubkey];
|
||||
setFollows(arr);
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
if (!follows.length) return navigate("/finish");
|
||||
|
||||
const publish = await ark.newContactList({
|
||||
tags: follows.map((item) => {
|
||||
if (item.startsWith("npub1"))
|
||||
return ["p", nip19.decode(item).data as string];
|
||||
return ["p", item];
|
||||
}),
|
||||
});
|
||||
|
||||
if (publish) {
|
||||
setLoading(false);
|
||||
return navigate("/finish");
|
||||
}
|
||||
} catch (e) {
|
||||
setLoading(false);
|
||||
toast.error(String(e));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div className="w-full h-full flex flex-col">
|
||||
<div className="h-12 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex font-medium text-neutral-700 dark:text-neutral-600 w-full items-center">
|
||||
Dive into the nostrverse
|
||||
</div>
|
||||
<div className="w-full flex-1 mb-0 min-h-0 flex flex-col justify-between h-full">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
className="flex-1 overflow-y-auto px-8"
|
||||
>
|
||||
<p className="leading-snug text-neutral-700 dark:text-neutral-500 my-4">
|
||||
Nostr is fun when we are together. Try following some users that
|
||||
interest you to build up your timeline.
|
||||
</p>
|
||||
<Accordion.Root type="single" defaultValue="recommended" collapsible>
|
||||
<Accordion.Item
|
||||
value="recommended"
|
||||
className="mb-3 overflow-hidden rounded-xl"
|
||||
>
|
||||
<Accordion.Trigger className="flex h-11 w-full items-center justify-between px-3 rounded-t-xl font-medium bg-neutral-50 dark:bg-neutral-950">
|
||||
Recommended
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</Accordion.Trigger>
|
||||
<Accordion.Content>
|
||||
<div className="flex w-full flex-col overflow-y-auto rounded-b-xl px-3 bg-neutral-100 dark:bg-neutral-900">
|
||||
{POPULAR_USERS.map((pubkey) => (
|
||||
<div
|
||||
key={pubkey}
|
||||
className="flex h-max w-full shrink-0 flex-col my-3 gap-4 overflow-hidden rounded-lg bg-white dark:bg-black"
|
||||
>
|
||||
<User.Provider pubkey={pubkey}>
|
||||
<User.Root>
|
||||
<User.Cover className="h-20 w-full rounded-t-lg" />
|
||||
<div className="flex h-full w-full flex-col gap-2.5 px-3 -mt-6">
|
||||
<User.Avatar className="size-10 shrink-0 rounded-lg" />
|
||||
<div className="flex flex-col items-start text-start">
|
||||
<User.Name className="max-w-[15rem] truncate text-lg font-semibold leadning-tight" />
|
||||
<User.About className="break-p text-neutral-700 dark:text-neutral-600 max-w-none select-text whitespace-pre-line" />
|
||||
</div>
|
||||
</div>
|
||||
</User.Root>
|
||||
</User.Provider>
|
||||
<div className="h-16 shrink-0 px-3 flex items-center border-t border-neutral-100 dark:border-neutral-900">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleFollow(pubkey)}
|
||||
className={cn(
|
||||
"inline-flex h-9 shrink-0 w-28 items-center justify-center gap-1 rounded-lg font-medium",
|
||||
follows.includes(pubkey)
|
||||
? "text-red-500 bg-red-100 hover:text-white hover:bg-red-500"
|
||||
: "text-blue-500 bg-blue-100 hover:text-white hover:bg-blue-500",
|
||||
)}
|
||||
>
|
||||
{follows.includes(pubkey) ? (
|
||||
<>
|
||||
<CancelIcon className="size-4" />
|
||||
Unfollow
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PlusIcon className="size-4" />
|
||||
Follow
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item
|
||||
value="trending"
|
||||
className="mb-3 overflow-hidden rounded-xl"
|
||||
>
|
||||
<Accordion.Trigger className="flex h-11 w-full items-center justify-between px-3 rounded-t-xl font-medium bg-neutral-50 dark:bg-neutral-950">
|
||||
Trending users
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</Accordion.Trigger>
|
||||
<Accordion.Content>
|
||||
<div className="flex w-full flex-col overflow-y-auto rounded-b-xl px-3 bg-neutral-100 dark:bg-neutral-900">
|
||||
{isLoading ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
</div>
|
||||
) : isError ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
Error. Cannot get trending users
|
||||
</div>
|
||||
) : (
|
||||
data?.profiles.map((item: { pubkey: string }) => (
|
||||
<div
|
||||
key={item.pubkey}
|
||||
className="flex h-max w-full shrink-0 flex-col my-3 gap-4 overflow-hidden rounded-lg bg-white dark:bg-black"
|
||||
>
|
||||
<User.Provider pubkey={item.pubkey}>
|
||||
<User.Root>
|
||||
<User.Cover className="h-20 w-full rounded-t-lg" />
|
||||
<div className="flex h-full w-full flex-col gap-2.5 px-3 -mt-6">
|
||||
<User.Avatar className="size-10 shrink-0 rounded-lg" />
|
||||
<div className="flex flex-col items-start text-start">
|
||||
<User.Name className="max-w-[15rem] truncate text-lg font-semibold leadning-tight" />
|
||||
<User.About className="break-p text-neutral-700 dark:text-neutral-600 max-w-none select-text whitespace-pre-line" />
|
||||
</div>
|
||||
</div>
|
||||
</User.Root>
|
||||
</User.Provider>
|
||||
<div className="h-16 shrink-0 px-3 flex items-center border-t border-neutral-100 dark:border-neutral-900">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleFollow(item.pubkey)}
|
||||
className={cn(
|
||||
"inline-flex h-9 shrink-0 w-28 items-center justify-center gap-1 rounded-lg font-medium",
|
||||
follows.includes(item.pubkey)
|
||||
? "text-red-500 bg-red-100 hover:text-white hover:bg-red-500"
|
||||
: "text-blue-500 bg-blue-100 hover:text-white hover:bg-blue-500",
|
||||
)}
|
||||
>
|
||||
{follows.includes(item.pubkey) ? (
|
||||
<>
|
||||
<CancelIcon className="size-4" />
|
||||
Unfollow
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PlusIcon className="size-4" />
|
||||
Follow
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item
|
||||
value="lume"
|
||||
className="mb-3 overflow-hidden rounded-xl"
|
||||
>
|
||||
<Accordion.Trigger className="flex h-11 w-full items-center justify-between px-3 rounded-t-xl font-medium bg-neutral-50 dark:bg-neutral-950">
|
||||
Lume HQ
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</Accordion.Trigger>
|
||||
<Accordion.Content>
|
||||
<div className="flex w-full flex-col overflow-y-auto rounded-b-xl px-3 bg-neutral-100 dark:bg-neutral-900">
|
||||
{LUME_USERS.map((pubkey) => (
|
||||
<div
|
||||
key={pubkey}
|
||||
className="flex h-max w-full shrink-0 flex-col my-3 gap-4 overflow-hidden rounded-lg bg-white dark:bg-black"
|
||||
>
|
||||
<User.Provider pubkey={pubkey}>
|
||||
<User.Root>
|
||||
<User.Cover className="h-20 w-full rounded-t-lg" />
|
||||
<div className="flex h-full w-full flex-col gap-2.5 px-3 -mt-6">
|
||||
<User.Avatar className="size-10 shrink-0 rounded-lg" />
|
||||
<div className="flex flex-col items-start text-start">
|
||||
<User.Name className="max-w-[15rem] truncate text-lg font-semibold leadning-tight" />
|
||||
<User.About className="break-p text-neutral-700 dark:text-neutral-600 max-w-none select-text whitespace-pre-line" />
|
||||
</div>
|
||||
</div>
|
||||
</User.Root>
|
||||
</User.Provider>
|
||||
<div className="h-16 shrink-0 px-3 flex items-center border-t border-neutral-100 dark:border-neutral-900">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleFollow(pubkey)}
|
||||
className={cn(
|
||||
"inline-flex h-9 shrink-0 w-28 items-center justify-center gap-1 rounded-lg font-medium",
|
||||
follows.includes(pubkey)
|
||||
? "text-red-500 bg-red-100 hover:text-white hover:bg-red-500"
|
||||
: "text-blue-500 bg-blue-100 hover:text-white hover:bg-blue-500",
|
||||
)}
|
||||
>
|
||||
{follows.includes(pubkey) ? (
|
||||
<>
|
||||
<CancelIcon className="size-4" />
|
||||
Unfollow
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PlusIcon className="size-4" />
|
||||
Follow
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion.Root>
|
||||
</motion.div>
|
||||
<div className="h-16 w-full shrink-0 flex items-center px-8 justify-center gap-2 border-t border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(-1)}
|
||||
className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200"
|
||||
>
|
||||
<ArrowLeftIcon className="size-4" />
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => submit()}
|
||||
className="inline-flex h-9 flex-1 shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
) : (
|
||||
"Continue"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@ -2,10 +2,13 @@ import { ArrowRightIcon, PopperFilledIcon } from "@lume/icons";
|
||||
import { onboardingAtom } from "@lume/utils";
|
||||
import { motion } from "framer-motion";
|
||||
import { useAtom } from "jotai";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export function OnboardingHomeScreen() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [t] = useTranslation();
|
||||
const [onboarding, setOnboarding] = useAtom(onboardingAtom);
|
||||
|
||||
return (
|
||||
@ -17,11 +20,9 @@ export function OnboardingHomeScreen() {
|
||||
>
|
||||
<PopperFilledIcon className="size-12 text-blue-500" />
|
||||
<div className="text-center">
|
||||
<p className="text-lg font-medium">
|
||||
Your account was successfully created!
|
||||
</p>
|
||||
<p className="text-lg font-medium">{t("onboarding.home.title")}</p>
|
||||
<p className="leading-tight text-neutral-600 dark:text-neutral-400">
|
||||
For starters, let's set up your profile.
|
||||
{t("onboarding.home.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 flex flex-col gap-2 items-center">
|
||||
@ -32,7 +33,7 @@ export function OnboardingHomeScreen() {
|
||||
}
|
||||
className="inline-flex items-center justify-center gap-2 w-44 font-medium h-11 rounded-xl bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
|
||||
>
|
||||
Profile Settings
|
||||
{t("onboarding.home.profileSettings")}
|
||||
<ArrowRightIcon className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
@ -40,7 +41,7 @@ export function OnboardingHomeScreen() {
|
||||
onClick={() => setOnboarding({ open: false, newUser: false })}
|
||||
className="inline-flex items-center justify-center gap-2 w-44 px-5 font-medium h-11 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-700 dark:text-neutral-600"
|
||||
>
|
||||
Skip
|
||||
{t("global.skip")}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@ -2,6 +2,7 @@ import { ArrowLeftIcon, LoaderIcon } from "@lume/icons";
|
||||
import { useStorage } from "@lume/storage";
|
||||
import { TOPICS, cn } from "@lume/utils";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
|
||||
@ -9,6 +10,7 @@ export function OnboardingInterestScreen() {
|
||||
const storage = useStorage();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [t] = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [hashtags, setHashtags] = useState([]);
|
||||
|
||||
@ -49,9 +51,9 @@ export function OnboardingInterestScreen() {
|
||||
<div className="w-full h-full flex flex-col">
|
||||
<div className="h-16 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex w-full items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<h3 className="font-semibold">Interests</h3>
|
||||
<h3 className="font-semibold">{t("interests.title")}</h3>
|
||||
<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
Pick things you'd like to see in your home feed.
|
||||
{t("interests.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,7 +76,7 @@ export function OnboardingInterestScreen() {
|
||||
onClick={() => toggleAll(topic.content)}
|
||||
className="text-sm font-medium text-blue-500"
|
||||
>
|
||||
Follow All
|
||||
{t("interests.followAll")}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
@ -105,7 +107,7 @@ export function OnboardingInterestScreen() {
|
||||
className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200"
|
||||
>
|
||||
<ArrowLeftIcon className="size-4" />
|
||||
Back
|
||||
{t("global.back")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@ -115,7 +117,7 @@ export function OnboardingInterestScreen() {
|
||||
{loading ? (
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
) : (
|
||||
"Continue"
|
||||
t("global.continue")
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -7,6 +7,7 @@ import { motion } from "framer-motion";
|
||||
import { minidenticon } from "minidenticons";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { AvatarUploadButton } from "../avatarUploadButton";
|
||||
@ -20,6 +21,7 @@ export function OnboardingProfileScreen() {
|
||||
const queryClient = useQueryClient();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { t } = useTranslation();
|
||||
const { register, handleSubmit } = useForm();
|
||||
|
||||
const svgURI = `data:image/svg+xml;utf8,${encodeURIComponent(
|
||||
@ -71,9 +73,9 @@ export function OnboardingProfileScreen() {
|
||||
<div className="w-full h-full flex flex-col gap-4">
|
||||
<div className="h-16 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex w-full items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<h3 className="font-semibold">About you</h3>
|
||||
<h3 className="font-semibold">{t("onboarding.profile.title")}</h3>
|
||||
<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
Tell Lume about yourself to start building your home feed.
|
||||
{t("onboarding.profile.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -89,7 +91,7 @@ export function OnboardingProfileScreen() {
|
||||
className="flex flex-col px-8 gap-4"
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium">Avatar</span>
|
||||
<span className="font-medium">{t("user.avatar")}</span>
|
||||
<div className="flex h-36 w-full flex-col items-center justify-center gap-3 rounded-lg bg-neutral-100 dark:bg-neutral-950">
|
||||
{picture.length ? (
|
||||
<img
|
||||
@ -109,7 +111,7 @@ export function OnboardingProfileScreen() {
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="name" className="font-medium">
|
||||
Name *
|
||||
{t("user.name")} *
|
||||
</label>
|
||||
<input
|
||||
type={"text"}
|
||||
@ -121,7 +123,7 @@ export function OnboardingProfileScreen() {
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="about" className="font-medium">
|
||||
Bio
|
||||
{t("user.bio")}
|
||||
</label>
|
||||
<textarea
|
||||
{...register("about")}
|
||||
@ -132,7 +134,7 @@ export function OnboardingProfileScreen() {
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="website" className="font-medium">
|
||||
Website
|
||||
{t("user.website")}
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
@ -150,7 +152,7 @@ export function OnboardingProfileScreen() {
|
||||
className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200"
|
||||
>
|
||||
<ArrowLeftIcon className="size-4" />
|
||||
Back
|
||||
{t("global.back")}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
@ -159,7 +161,7 @@ export function OnboardingProfileScreen() {
|
||||
{loading ? (
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
"Continue"
|
||||
t("global.continue")
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"global": {
|
||||
"relay": "Relay",
|
||||
"back": "Back",
|
||||
"continue": "Continue",
|
||||
"loading": "Loading",
|
||||
"error": "Error",
|
||||
@ -18,7 +19,9 @@
|
||||
"noResult": "No results found.",
|
||||
"emptyFeedTitle": "This feed is empty",
|
||||
"emptyFeedSubtitle": "You can follow more users to build up your timeline",
|
||||
"apiKey": "API Key"
|
||||
"apiKey": "API Key",
|
||||
"skip": "Skip",
|
||||
"close": "Close"
|
||||
},
|
||||
"nip89": {
|
||||
"unsupported": "Lume isn't support this event",
|
||||
@ -65,6 +68,7 @@
|
||||
}
|
||||
},
|
||||
"user": {
|
||||
"avatar": "Avatar",
|
||||
"displayName": "Display Name",
|
||||
"name": "Name",
|
||||
"bio": "Bio",
|
||||
@ -101,6 +105,7 @@
|
||||
},
|
||||
"login": {
|
||||
"title": "Welcome back, anon!",
|
||||
"footer": "Lume will put your Private Key in <1>Secure Storage</1> depended on your OS Platform. It will be secured by Password or Biometric ID",
|
||||
"loginWithAddress": "Login with Nostr Address",
|
||||
"loginWithBunker": "Login with nsecBunker",
|
||||
"or": "Or continue with",
|
||||
@ -258,5 +263,21 @@
|
||||
"checkUpdate": "Check for update",
|
||||
"installUpdate": "Install"
|
||||
}
|
||||
},
|
||||
"onboarding": {
|
||||
"home": {
|
||||
"title": "Your account was successfully created!",
|
||||
"subtitle": "For starters, let's set up your profile.",
|
||||
"profileSettings": "Profile Settings"
|
||||
},
|
||||
"profile": {
|
||||
"title": "About you",
|
||||
"subtitle": "Tell Lume about yourself to start building your home feed."
|
||||
},
|
||||
"finish": {
|
||||
"title": "Profile setup complete!",
|
||||
"subtitle": "You can exit the setup here and start using Lume.",
|
||||
"report": "Report a issue"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user