mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
wip: ui
This commit is contained in:
parent
bce76bd41c
commit
0946e9125e
@ -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">
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -78,8 +78,8 @@ export function GlobalHashtagWidget({ 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 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>
|
||||
|
@ -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>
|
||||
</>
|
||||
)}
|
||||
|
@ -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>
|
||||
</>
|
||||
)}
|
||||
|
@ -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>
|
||||
</>
|
||||
)}
|
||||
|
@ -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>
|
||||
</>
|
||||
)}
|
||||
|
@ -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 ? (
|
||||
<>
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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'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>
|
||||
)}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user