reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish

Browse Source
This commit is contained in:
Ren Amamiya
2023-09-26 09:05:39 +07:00
parent a66770989b
commit 236131087a
21 changed files with 605 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/shared/user.tsx
View File

@@ -1,4 +1,4 @@
import * as Popover from '@radix-ui/react-popover';
import * as HoverCard from '@radix-ui/react-hover-card';
import { memo } from 'react';
import ReactMarkdown from 'react-markdown';
import { Link } from 'react-router-dom';
@@ -70,7 +70,10 @@ export const User = memo(function User({
</button>
<div className="flex flex-1 items-baseline gap-2">
<h5 className="max-w-[10rem] truncate font-semibold leading-none text-white">
{user?.display_name || user?.name || displayNpub(pubkey, 16)}
{user?.name ||
user?.display_name ||
user?.displayName ||
displayNpub(pubkey, 16)}
</h5>
<span className="leading-none text-white/50">·</span>
<span className="leading-none text-white/50">{createdAt}</span>
@@ -90,7 +93,7 @@ export const User = memo(function User({
<div className="flex h-full flex-col items-start justify-between">
<div className="flex flex-col items-start gap-1 text-start">
<p className="max-w-[15rem] truncate text-lg font-semibold leading-none text-white">
{user?.name || user?.display_name}
{user?.name || user?.display_name || user?.displayName}
</p>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
@@ -110,7 +113,7 @@ export const User = memo(function User({
className="inline-flex items-center gap-2 text-sm text-white/70"
>
<WorldIcon className="h-4 w-4" />
<p className="max-w-[10rem] truncate">{user.website}</p>
<p className="max-w-[10rem] truncate">{user?.website}</p>
</Link>
) : null}
</div>
@@ -129,7 +132,7 @@ export const User = memo(function User({
/>
<div className="flex w-full flex-col gap-1">
<h3 className="max-w-[15rem] truncate font-medium leading-none text-white">
{user?.name || user?.display_name}
{user?.name || user?.display_name || user?.displayName}
</h3>
<p className="text-sm leading-none text-white/70">
{user?.nip05 || user?.username || displayNpub(pubkey, 16)}
@@ -163,7 +166,10 @@ export const User = memo(function User({
/>
<div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[10rem] truncate font-medium leading-none text-white/80">
{user?.display_name || user?.name || displayNpub(pubkey, 16)}
{user?.name ||
user?.display_name ||
user?.displayName ||
displayNpub(pubkey, 16)}
</h5>
<span className="text-blue-500">reposted</span>
</div>
@@ -182,7 +188,7 @@ export const User = memo(function User({
/>
<div className="flex flex-1 flex-col gap-2">
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
{user?.display_name || user?.name}
{user?.name || user?.display_name || user?.displayName}
</h5>
<div className="inline-flex items-center gap-2">
<span className="leading-none text-white/50">{createdAt}</span>
@@ -195,9 +201,9 @@ export const User = memo(function User({
}
return (
<Popover.Root>
<HoverCard.Root>
<div className="relative z-10 flex items-start gap-3">
<Popover.Trigger asChild>
<HoverCard.Trigger asChild>
<button
type="button"
className="relative z-40 h-10 w-10 shrink-0 overflow-hidden"
@@ -208,18 +214,21 @@ export const User = memo(function User({
className="h-10 w-10 rounded-lg object-cover"
/>
</button>
</Popover.Trigger>
</HoverCard.Trigger>
<div className="flex flex-1 items-baseline gap-2">
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
{user?.display_name || user?.name || displayNpub(pubkey, 16)}
{user?.name ||
user?.display_name ||
user?.displayName ||
displayNpub(pubkey, 16)}
</h5>
<span className="leading-none text-white/50">·</span>
<span className="leading-none text-white/50">{createdAt}</span>
</div>
</div>
<Popover.Portal>
<Popover.Content
className="w-[300px] overflow-hidden rounded-xl border border-white/10 bg-white/10 backdrop-blur-3xl focus:outline-none"
<HoverCard.Portal>
<HoverCard.Content
className="w-[300px] overflow-hidden rounded-xl border border-white/10 bg-white/10 backdrop-blur-3xl focus:outline-none data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade data-[state=open]:transition-all"
sideOffset={5}
>
<div className="flex gap-2.5 border-b border-white/5 px-3 py-3">
@@ -231,12 +240,15 @@ export const User = memo(function User({
<div className="flex flex-1 flex-col gap-2">
<div className="inline-flex flex-col gap-1">
<h5 className="text-sm font-semibold leading-none">
{user?.display_name || user?.name || user?.username}
{user?.name ||
user?.display_name ||
user?.displayName ||
user?.username}
</h5>
{user.nip05 ? (
{user?.nip05 ? (
<NIP05
pubkey={pubkey}
nip05={user.nip05}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm leading-none text-white/50"
/>
) : (
@@ -266,8 +278,8 @@ export const User = memo(function User({
Message
</Link>
</div>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
</HoverCard.Content>
</HoverCard.Portal>
</HoverCard.Root>
);
});