aljaz/rabbit
1
0
Fork 0
mirror of https://github.com/aljazceru/rabbit.git synced 2025-12-17 22:14:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Shusui MOYATANI
2023-03-22 12:45:32 +09:00
parent 4e165bc879
commit 3348bba012
8 changed files with 109 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/ProfileDisplay.tsx
View File

@@ -5,6 +5,7 @@ import XMark from 'heroicons/24/outline/x-mark.svg';
import Modal from '@/components/Modal';
import Copy from '@/components/utils/Copy';
import SafeLink from '@/components/utils/SafeLink';
import useProfile from '@/nostr/useProfile';
import npubEncodeFallback from '@/utils/npubEncodeFallback';
@@ -23,25 +24,19 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
return (
<Modal onClose={() => props.onClose?.()}>
<div class="max-h-full w-[640px] max-w-full overflow-scroll">
<div class="flex justify-end">
<button
class="h-8 w-8 text-stone-700"
aria-label="Close"
onClick={() => props.onClose?.()}
>
<XMark />
</button>
</div>
<div class="max-h-full w-[640px] max-w-full">
<button class="h-8 w-8 text-stone-700" aria-label="Close" onClick={() => props.onClose?.()}>
<XMark />
</button>
<div class="flex w-full flex-col overflow-hidden rounded-2xl border bg-white text-stone-700 shadow-lg">
<Show when={query.isFetched} fallback={<>loading</>}>
<div class="h-40 w-full sm:h-52">
<Show when={profile()?.banner} keyed>
{(bannerUrl) => (
<Show when={profile()?.banner} fallback={<div class="h-20" />} keyed>
{(bannerUrl) => (
<div class="h-40 w-full sm:h-52">
<img src={bannerUrl} alt="header" class="h-full w-full object-cover" />
)}
</Show>
</div>
</div>
)}
</Show>
<div class="flex h-[64px] items-center gap-4 px-4">
<div class="mt-[-64px] h-28 w-28 shrink-0 rounded-lg bg-stone-400 shadow-md">
<Show when={profile()?.picture} keyed>
@@ -54,35 +49,33 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
)}
</Show>
</div>
<div>
<div class="flex-1 overflow-hidden">
<div class="flex items-center gap-2">
<div class="truncate text-xl font-bold">{profile()?.display_name}</div>
<div class="shrink-0 text-sm font-bold">@{profile()?.name}</div>
</div>
<div class="flex gap-1">
<div class="truncate text-xs">{npub()}</div>
<Copy class="h-4 w-4 text-stone-500 hover:text-stone-700" text={npub()} />
<Copy
class="h-4 w-4 shrink-0 text-stone-500 hover:text-stone-700"
text={npub()}
/>
</div>
</div>
</div>
<div class="max-h-32 overflow-scroll whitespace-pre-wrap px-5 py-2 text-sm">
<div class="max-h-32 overflow-auto whitespace-pre-wrap px-5 py-2 text-sm">
{profile()?.about}
</div>
<ul class="border-t px-5 py-2 text-xs">
<Show when={profile()?.website}>
<li class="flex items-center gap-1">
<span class="inline-block h-4 w-4" area-label="website" title="website">
<GlobeAlt />
</span>
<a
class="text-blue-500 underline"
href={profile()?.website}
target="_blank"
rel="noreferrer noopener"
>
{profile()?.website}
</a>
</li>
<Show when={profile()?.website} keyed>
{(website) => (
<li class="flex items-center gap-1">
<span class="inline-block h-4 w-4" area-label="website" title="website">
<GlobeAlt />
</span>
<SafeLink class="text-blue-500 underline" href={website} />
</li>
)}
</Show>
</ul>
</Show>