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

add image component

Browse Source
This commit is contained in:
Ren Amamiya
2023-05-04 22:34:15 +07:00
parent aa6b1bdc62
commit b377846073
25 changed files with 80 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/channel/components/createModal.tsx
View File

@@ -1,6 +1,7 @@
import { AvatarUploader } from '@lume/shared/avatarUploader';
import CancelIcon from '@lume/shared/icons/cancel';
import PlusIcon from '@lume/shared/icons/plus';
import { Image } from '@lume/shared/image';
import { RelayContext } from '@lume/shared/relayProvider';
import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@lume/stores/constants';
import { dateToUnix } from '@lume/utils/getDate';
@@ -150,7 +151,7 @@ export default function ChannelCreateModal() {
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Picture</label>
<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
<img src={image} alt="channel picture" className="relative z-10 h-11 w-11 rounded-md" />
<Image src={image} alt="channel picture" className="relative z-10 h-11 w-11 rounded-md" />
<div className="absolute bottom-3 right-3 z-10">
<AvatarUploader valueState={setImage} />
</div>

5
src/app/channel/components/messages/user.tsx
View File

@@ -1,3 +1,4 @@
import { Image } from '@lume/shared/image';
import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
@@ -24,12 +25,10 @@ export default function ChannelMessageUser({ pubkey, time }: { pubkey: string; t
) : (
<>
<div className="relative h-9 w-9 shrink rounded-md">
<img
<Image
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
alt={pubkey}
className="h-9 w-9 rounded-md object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<div className="flex w-full flex-1 items-start justify-between">

5
src/app/channel/components/messages/userReply.tsx
View File

@@ -1,3 +1,4 @@
import { Image } from '@lume/shared/image';
import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
@@ -15,12 +16,10 @@ export default function UserReply({ pubkey }: { pubkey: string }) {
) : (
<>
<div className="relative h-7 w-7 shrink overflow-hidden rounded">
<img
<Image
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
alt={pubkey}
className="h-7 w-7 rounded object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<span className="text-xs font-medium leading-none text-zinc-500">

3
src/app/channel/components/metadata.tsx
View File

@@ -1,4 +1,5 @@
import CopyIcon from '@lume/shared/icons/copy';
import { Image } from '@lume/shared/image';
import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { useChannelProfile } from '@lume/utils/hooks/useChannelProfile';
@@ -18,7 +19,7 @@ export default function ChannelMetadata({ id, pubkey }: { id: string; pubkey: st
return (
<div className="inline-flex items-center gap-2">
<div className="relative shrink-0 rounded-md">
<img
<Image
src={metadata?.picture || DEFAULT_AVATAR}
alt={id}
className="h-8 w-8 rounded bg-zinc-900 object-contain ring-2 ring-zinc-950"

3
src/app/channel/components/miniMember.tsx
View File

@@ -1,3 +1,4 @@
import { Image } from '@lume/shared/image';
import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { useProfile } from '@lume/utils/hooks/useProfile';
@@ -9,7 +10,7 @@ export default function MiniMember({ pubkey }: { pubkey: string }) {
{isError || isLoading ? (
<div className="h-8 w-8 animate-pulse rounded-md bg-zinc-800"></div>
) : (
<img
<Image
className="inline-block h-8 w-8 rounded-md bg-white ring-2 ring-zinc-950 transition-all duration-150 ease-in-out"
src={user?.picture || DEFAULT_AVATAR}
alt={user?.pubkey || 'user avatar'}

4
src/app/channel/components/mutedItem.tsx
View File

@@ -1,3 +1,4 @@
import { Image } from '@lume/shared/image';
import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
@@ -40,11 +41,10 @@ export default function MutedItem({ data }: { data: any }) {
<>
<div className="flex items-center gap-1.5">
<div className="relative h-9 w-9 shrink rounded-md">
<img
<Image
src={user?.picture || DEFAULT_AVATAR}
alt={data.content}
className="h-9 w-9 rounded-md object-cover"
loading="lazy"
/>
</div>
<div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start">

3
src/app/channel/components/updateModal.tsx
View File

@@ -1,6 +1,7 @@
import { AvatarUploader } from '@lume/shared/avatarUploader';
import CancelIcon from '@lume/shared/icons/cancel';
import EditIcon from '@lume/shared/icons/edit';
import { Image } from '@lume/shared/image';
import { RelayContext } from '@lume/shared/relayProvider';
import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@lume/stores/constants';
import { dateToUnix } from '@lume/utils/getDate';
@@ -145,7 +146,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Picture</label>
<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
<img src={image} alt="channel picture" className="relative z-10 h-11 w-11 rounded-md" />
<Image src={image} alt="channel picture" className="relative z-10 h-11 w-11 rounded-md" />
<div className="absolute bottom-3 right-3 z-10">
<AvatarUploader valueState={setImage} />
</div>