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

wip

Browse Source
This commit is contained in:
reya
2023-11-07 09:35:13 +07:00
parent 701712e7b8
commit ee3e8eb105
42 changed files with 694 additions and 991 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/shared/user.tsx
View File

@@ -18,6 +18,7 @@ export const User = memo(function User({
time,
variant = 'default',
embedProfile,
subtext,
}: {
pubkey: string;
eventId?: string;
@@ -34,8 +35,10 @@ export const User = memo(function User({
| 'miniavatar'
| 'avatar'
| 'stacked'
| 'ministacked';
| 'ministacked'
| 'childnote';
embedProfile?: string;
subtext?: string;
}) {
const { status, user } = useProfile(pubkey, embedProfile);
@@ -63,7 +66,6 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="h-6 w-6 rounded-md"
/>
<Avatar.Fallback delayMs={300}>
@@ -106,7 +108,6 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="h-8 w-8 rounded-md"
/>
<Avatar.Fallback delayMs={300}>
@@ -117,7 +118,7 @@ export const User = memo(function User({
/>
</Avatar.Fallback>
</Avatar.Root>
<h5 className="max-w-[10rem] truncate font-medium text-neutral-900 dark:text-neutral-100">
<h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name ||
user?.display_name ||
user?.displayName ||
@@ -149,7 +150,6 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="h-14 w-14 rounded-lg"
/>
<Avatar.Fallback delayMs={300}>
@@ -207,7 +207,6 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="h-11 w-11 rounded-lg"
/>
<Avatar.Fallback delayMs={300}>
@@ -244,7 +243,6 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="h-12 w-12 rounded-lg"
/>
<Avatar.Fallback delayMs={300}>
@@ -261,18 +259,17 @@ export const User = memo(function User({
if (variant === 'miniavatar') {
if (status === 'pending') {
return (
<div className="h-10 w-10 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
);
}
return (
<Avatar.Root>
<Avatar.Root className="h-10 w-10 shrink-0">
<Avatar.Image
src={user?.picture || user?.image}
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="h-10 w-10 rounded-lg"
/>
<Avatar.Fallback delayMs={300}>
@@ -286,6 +283,44 @@ export const User = memo(function User({
);
}
if (variant === 'childnote') {
if (status === 'pending') {
return (
<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
);
}
return (
<>
<Avatar.Root className="h-10 w-10 shrink-0">
<Avatar.Image
src={user?.picture || user?.image}
alt={pubkey}
loading="lazy"
decoding="async"
className="h-10 w-10 rounded-lg"
/>
<Avatar.Fallback delayMs={300}>
<img
src={svgURI}
alt={pubkey}
className="h-10 w-10 rounded-lg bg-black dark:bg-white"
/>
</Avatar.Fallback>
</Avatar.Root>
<div className="absolute left-2 top-2 font-semibold leading-tight">
{user?.display_name ||
user?.name ||
user?.displayName ||
displayNpub(pubkey, 16)}{' '}
<span className="font-normal text-neutral-700 dark:text-neutral-300">
{subtext}:
</span>
</div>
</>
);
}
if (variant === 'stacked') {
if (status === 'pending') {
return (
@@ -300,7 +335,6 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="inline-block h-8 w-8 rounded-full ring-1 ring-neutral-200 dark:ring-neutral-800"
/>
<Avatar.Fallback delayMs={300}>
@@ -328,7 +362,6 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="inline-block h-6 w-6 rounded-full ring-1 ring-white dark:ring-black"
/>
<Avatar.Fallback delayMs={300}>
@@ -358,8 +391,8 @@ export const User = memo(function User({
}
return (
<div className="flex gap-3">
<div className="inline-flex h-10 w-10 items-center justify-center">
<div className="flex gap-2 px-3">
<div className="inline-flex w-10 items-center justify-center">
<RepostIcon className="h-5 w-5 text-blue-500" />
</div>
<div className="inline-flex items-center gap-2">
@@ -369,7 +402,6 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="h-6 w-6 rounded"
/>
<Avatar.Fallback delayMs={300}>
@@ -415,7 +447,6 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="h-10 w-10 rounded-lg"
/>
<Avatar.Fallback delayMs={300}>
@@ -453,22 +484,21 @@ export const User = memo(function User({
return (
<HoverCard.Root>
<div className="relative z-10 flex items-start gap-3">
<div className="flex items-center gap-3 px-3">
<HoverCard.Trigger asChild>
<Avatar.Root className="relative top-1 h-10 w-10 shrink-0">
<Avatar.Root className="h-9 w-9 shrink-0">
<Avatar.Image
src={user?.picture || user?.image}
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="h-10 w-10 rounded-lg bg-white object-cover"
className="h-9 w-9 rounded-lg bg-white object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
/>
<Avatar.Fallback delayMs={300}>
<img
src={svgURI}
alt={pubkey}
className="h-10 w-10 rounded-lg bg-black dark:bg-white"
className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
/>
</Avatar.Fallback>
</Avatar.Root>
@@ -498,7 +528,6 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="h-10 w-10 rounded-lg"
/>
<Avatar.Fallback delayMs={300}>