nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-14 09:13:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: ui

Browse Source
This commit is contained in:
Ren Amamiya 2023-10-08 14:14:39 +07:00
parent bce76bd41c
commit 0946e9125e
18 changed files with 123 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/shared/notes/actions/zap.tsx
View File

@ -99,7 +99,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
</button>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
<Dialog.Overlay className="fixed inset-0 z-50 bg-black" />
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
<div className="inline-flex w-full shrink-0 items-center justify-between px-5 py-3">

2
src/shared/widgets/eventLoader.tsx
View File

@ -62,7 +62,7 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
</h3>
</div>
)}
<div className="flex h-1.5 w-full overflow-hidden rounded-full bg-white/20">
<div className="flex h-1.5 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800">
<div
className="flex flex-col justify-center overflow-hidden bg-interor-600 transition-all duration-1000 ease-smooth"
role="progressbar"

12
src/shared/widgets/global/articles.tsx
View File

@ -46,8 +46,10 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<p className="text-sm font-medium text-white/80">Loading article...</p>
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
Loading article...
</p>
</div>
</div>
) : data.length === 0 ? (
@ -55,10 +57,12 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
Oops, it looks like there are no articles.
</h3>
<p className="text-white/50">You can close this widget</p>
<p className="text-zinc-500 dark:text-zinc-400">
You can close this widget
</p>
</div>
</div>
</div>

10
src/shared/widgets/global/files.tsx
View File

@ -48,8 +48,8 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<p className="text-sm font-medium text-white/80">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
Loading file sharing event...
</p>
</div>
@ -59,10 +59,12 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
Oops, it looks like there are no file sharing events.
</h3>
<p className="text-white/50">You can close this widget</p>
<p className="text-zinc-500 dark:text-zinc-400">
You can close this widget
</p>
</div>
</div>
</div>

10
src/shared/widgets/global/hashtag.tsx
View File

@ -76,10 +76,10 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
<TitleBar id={params.id} title={params.title} />
<div className="flex-1">
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="flex h-full w-full items-center justify-center">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<p className="text-sm font-medium text-white/80">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
Loading event related to the hashtag {params.title}...
</p>
</div>
@ -89,10 +89,10 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
Oops, it looks like there are no events related to {params.title}.
</h3>
<p className="text-white/50">
<p className="text-zinc-500 dark:text-zinc-400">
You can close this widget or try with other hashtag
</p>
</div>

20
src/shared/widgets/local/articles.tsx
View File

@ -48,8 +48,10 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<p className="text-sm font-medium text-white/80">Loading article...</p>
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
Loading article...
</p>
</div>
</div>
) : dbEvents.length === 0 ? (
@ -57,10 +59,12 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
Oops, it looks like there are no articles.
</h3>
<p className="text-white/50">You can close this widget</p>
<p className="text-zinc-500 dark:text-zinc-400">
You can close this widget
</p>
</div>
</div>
</div>
@ -72,21 +76,21 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-white" />
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-white" />
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Nothing more to load</span>
</>
)}

20
src/shared/widgets/local/feeds.tsx
View File

@ -84,8 +84,10 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<p className="text-sm font-medium text-white/80">Loading newsfeed...</p>
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
Loading newsfeed...
</p>
</div>
</div>
) : dbEvents.length === 0 ? (
@ -93,10 +95,12 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
Oops, it looks like there are no posts.
</h3>
<p className="text-white/50">You can close this widget</p>
<p className="text-zinc-500 dark:text-zinc-400">
You can close this widget
</p>
</div>
</div>
</div>
@ -108,21 +112,21 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-white" />
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-white" />
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Nothing more to load</span>
</>
)}

18
src/shared/widgets/local/files.tsx
View File

@ -48,8 +48,8 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<p className="text-sm font-medium text-white/80">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
Loading file sharing event...
</p>
</div>
@ -59,10 +59,12 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
Oops, it looks like there are no file sharing events.
</h3>
<p className="text-white/50">You can close this widget</p>
<p className="text-zinc-500 dark:text-zinc-400">
You can close this widget
</p>
</div>
</div>
</div>
@ -74,21 +76,21 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-white" />
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-white" />
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Nothing more to load</span>
</>
)}

20
src/shared/widgets/local/follows.tsx
View File

@ -83,8 +83,10 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<p className="text-sm font-medium text-white/80">Loading post...</p>
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
Loading post...
</p>
</div>
</div>
) : dbEvents.length === 0 ? (
@ -92,10 +94,12 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
Oops, it looks like there are no posts.
</h3>
<p className="text-white/50">You can close this widget</p>
<p className="text-zinc-500 dark:text-zinc-400">
You can close this widget
</p>
</div>
</div>
</div>
@ -107,21 +111,21 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-white" />
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-white" />
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Nothing more to load</span>
</>
)}

4
src/shared/widgets/local/network.tsx
View File

@ -106,7 +106,7 @@ export function LocalNetworkWidget() {
<div className="flex-1">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-zinc-100 px-3 py-3 backdrop-blur-xl dark:bg-zinc-900">
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<NoteSkeleton />
</div>
</div>
@ -121,7 +121,7 @@ export function LocalNetworkWidget() {
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>

4
src/shared/widgets/local/thread.tsx
View File

@ -47,13 +47,13 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
<div className="scrollbar-hide h-full overflow-y-auto">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<NoteSkeleton />
</div>
</div>
) : (
<div className="h-min w-full px-3 pt-1.5">
<div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
<div className="rounded-xl bg-zinc-100 px-3 pt-3 dark:bg-zinc-900">
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
<div className="mt-2">{renderKind(data)}</div>
<NoteActions

8
src/shared/widgets/local/user.tsx
View File

@ -86,21 +86,21 @@ export function LocalUserWidget({ params }: { params: Widget }) {
<UserProfile pubkey={params.content} />
</div>
<div>
<h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-white">
<h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<NoteSkeleton />
</div>
</div>
) : data.length === 0 ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
<div className="rounded-xl bg-zinc-100 px-3 py-6 dark:bg-zinc-900">
<div className="flex flex-col items-center gap-4">
<p className="text-center text-sm text-white">
<p className="text-center text-sm text-zinc-900 dark:text-zinc-100">
No new post from 24 hours ago
</p>
</div>

6
src/shared/widgets/nostrBand/trendingAccounts.tsx
View File

@ -39,8 +39,8 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<p className="text-sm font-medium text-white/80">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
Loading trending accounts...
</p>
</div>
@ -50,7 +50,7 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight">
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
Sorry, an unexpected error has occurred.
</h3>
</div>

6
src/shared/widgets/nostrBand/trendingNotes.tsx
View File

@ -40,8 +40,8 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<p className="text-sm font-medium text-white/80">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
Loading trending posts...
</p>
</div>
@ -51,7 +51,7 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight">
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
Sorry, an unexpected error has occurred.
</h3>
</div>

34
src/shared/widgets/nostrBandUserProfile.tsx
View File

@ -65,7 +65,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
if (!profile) {
return (
<div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
<div className="rounded-xl bg-zinc-100 px-5 py-5 dark:bg-zinc-900">
<p>Can&apos;t fetch profile</p>
</div>
);
@ -73,18 +73,18 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
return (
<div className="h-min w-full px-3 pb-3">
<div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
<div className="rounded-xl bg-zinc-100 px-5 py-5 dark:bg-zinc-900">
<div className="flex items-center justify-between">
<div className="inline-flex items-center gap-2">
<Image
src={profile.picture}
className="h-11 w-11 shrink-0 rounded-lg object-cover"
/>
<div className="inline-flex flex-col gap-1">
<h3 className="max-w-[15rem] truncate font-semibold leading-none text-white">
<div className="inline-flex flex-col">
<h3 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
{profile.display_name || profile.name}
</h3>
<p className="max-w-[10rem] truncate text-sm leading-none text-white/50">
<p className="max-w-[10rem] truncate text-sm text-zinc-900 dark:text-zinc-100/50">
{profile.nip05 || shortenKey(data.pubkey)}
</p>
</div>
@ -94,7 +94,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
<button
type="button"
onClick={() => unfollowUser(data.pubkey)}
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-interor-500 hover:text-white"
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-200 text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-white dark:bg-zinc-800 dark:text-zinc-100 dark:hover:text-white"
>
<UnfollowIcon className="h-4 w-4" />
</button>
@ -102,7 +102,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
<button
type="button"
onClick={() => followUser(data.pubkey)}
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-interor-500 hover:text-white"
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-200 text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-white dark:bg-zinc-800 dark:text-zinc-100 dark:hover:text-white"
>
<FollowIcon className="h-4 w-4" />
</button>
@ -110,7 +110,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
</div>
</div>
<div className="mt-2">
<p className="whitespace-pre-line break-words text-white">
<p className="whitespace-pre-line break-words text-zinc-900 dark:text-zinc-100">
{profile.about || profile.bio}
</p>
</div>
@ -120,26 +120,32 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
) : (
<div className="flex w-full items-center gap-8">
<div className="inline-flex flex-col gap-1">
<span className="font-semibold leading-none text-white">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
{userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
</span>
<span className="text-sm leading-none text-white/50">Followers</span>
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
Followers
</span>
</div>
<div className="inline-flex flex-col gap-1">
<span className="font-semibold leading-none text-white">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
{userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
</span>
<span className="text-sm leading-none text-white/50">Following</span>
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
Following
</span>
</div>
<div className="inline-flex flex-col gap-1">
<span className="font-semibold leading-none text-white">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
{userStats.stats[data.pubkey].zaps_received
? compactNumber.format(
userStats.stats[data.pubkey].zaps_received.msats / 1000
)
: 0}
</span>
<span className="text-sm leading-none text-white/50">Zaps received</span>
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
Zaps received
</span>
</div>
</div>
)}

22
src/shared/widgets/other/learnNostr.tsx
View File

@ -27,7 +27,9 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
<div className="scrollbar-hide h-full overflow-y-auto px-3 pb-20">
{resources.map((resource, index) => (
<div key={index} className="mb-6">
<h3 className="mb-2 font-medium text-white/50">{resource.title}</h3>
<h3 className="mb-2 text-sm font-medium text-zinc-500 dark:text-zinc-400">
{resource.title}
</h3>
<div className="flex flex-col gap-2">
{resource.data.length ? (
resource.data.map((item, index) => (
@ -35,22 +37,24 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
key={index}
type="button"
onClick={() => open(item.id)}
className="flex items-center justify-between rounded-xl bg-white/10 px-4 py-3 hover:bg-white/20"
className="flex items-center justify-between rounded-xl bg-zinc-100 px-4 py-3 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800"
>
<div className="flex flex-col items-start gap-1">
<h5 className="font-semibold leading-none">{item.title}</h5>
<div className="flex flex-col items-start">
<h5 className="font-semibold text-zinc-900 dark:text-zinc-100">
{item.title}
</h5>
{seens.has(item.id) ? (
<p className="text-sm leading-none text-green-500">Readed</p>
<p className="text-sm text-green-500">Readed</p>
) : (
<p className="text-sm leading-none text-white/70">Unread</p>
<p className="text-sm text-zinc-500 dark:text-zinc-400">Unread</p>
)}
</div>
<ArrowRightIcon className="h-5 w-5 text-white" />
<ArrowRightIcon className="h-5 w-5 text-zinc-100 dark:text-zinc-900" />
</button>
))
) : (
<div className="flex h-14 items-center justify-center rounded-xl bg-white/10 px-3 py-3">
<p className="text-sm font-medium text-white">
<div className="flex h-14 items-center justify-center rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
More resources are coming, stay tuned.
</p>
</div>

12
src/shared/widgets/tmp/feeds.tsx
View File

@ -42,9 +42,9 @@ export function XfeedsWidget({ params }: { params: Widget }) {
};
return (
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10 backdrop-blur-xl">
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
<div className="w-full px-5">
<h3 className="mb-4 text-center text-lg font-semibold">
<h3 className="mb-4 text-center font-semibold text-zinc-900 dark:text-zinc-100">
Choose account you want to add to group feeds
</h3>
<div className="mb-0 flex flex-col gap-2">
@ -53,16 +53,16 @@ export function XfeedsWidget({ params }: { params: Widget }) {
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-300"
/>
</div>
<div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-white/10 py-2 backdrop-blur-xl">
<div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-zinc-200 py-2 dark:bg-zinc-800">
{db.account.network.map((item: string) => (
<button
key={item}
type="button"
onClick={() => toggleGroup(item)}
className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-white/20"
className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-zinc-300 dark:hover:bg-zinc-700"
>
<User pubkey={item} variant="simple" />
{groups.includes(item) && (
@ -87,7 +87,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
<button
type="button"
onClick={cancel}
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50"
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-zinc-900 hover:bg-zinc-200 focus:outline-none disabled:opacity-50 dark:text-zinc-100 dark:hover:bg-zinc-800"
>
Cancel
</button>

6
src/shared/widgets/tmp/hashtag.tsx
View File

@ -72,7 +72,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<input
{...register('hashtag', { required: true, minLength: 1 })}
placeholder="#bitcoin"
className="relative h-11 w-full rounded-lg bg-zinc-100 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-white/50 dark:bg-zinc-900 dark:text-zinc-100"
className="relative h-12 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-300"
/>
<span className="text-sm text-red-400">
{errors.hashtag && <p>{errors.hashtag.message}</p>}
@ -82,7 +82,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium text-zinc-900 hover:bg-interor-600 focus:outline-none disabled:opacity-50 dark:text-zinc-100"
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
>
<span className="w-5" />
<span>Create</span>
@ -91,7 +91,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<button
type="button"
onClick={cancel}
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-zinc-100 px-6 font-medium leading-none text-zinc-900 backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50 dark:bg-zinc-900 dark:text-zinc-100"
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-zinc-900 hover:bg-zinc-200 focus:outline-none disabled:opacity-50 dark:text-zinc-100 dark:hover:bg-zinc-800"
>
Cancel
</button>