reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions 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
Download Patch File Download Diff File Expand all files Collapse all files

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>
)}