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

7
src/shared/accounts/active.tsx
View File

@@ -1,3 +1,4 @@
import { Image } from '@lume/shared/image';
import { DEFAULT_AVATAR } from '@lume/stores/constants';
export default function ActiveAccount({ user }: { user: any }) {
@@ -5,7 +6,11 @@ export default function ActiveAccount({ user }: { user: any }) {
return (
<button className="relative h-11 w-11 rounded-lg">
<img src={userData.picture || DEFAULT_AVATAR} alt="user's avatar" className="h-11 w-11 rounded-lg object-cover" />
<Image
src={userData.picture || DEFAULT_AVATAR}
alt="user's avatar"
className="h-11 w-11 rounded-lg object-cover"
/>
</button>
);
}

7
src/shared/accounts/inactive.tsx
View File

@@ -1,3 +1,4 @@
import { Image } from '@lume/shared/image';
import { DEFAULT_AVATAR } from '@lume/stores/constants';
export default function InactiveAccount({ user }: { user: any }) {
@@ -5,7 +6,11 @@ export default function InactiveAccount({ user }: { user: any }) {
return (
<div className="relative h-11 w-11 shrink rounded-lg">
<img src={userData.picture || DEFAULT_AVATAR} alt="user's avatar" className="h-11 w-11 rounded-lg object-cover" />
<Image
src={userData.picture || DEFAULT_AVATAR}
alt="user's avatar"
className="h-11 w-11 rounded-lg object-cover"
/>
</div>
);
}

9
src/shared/image.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { DEFAULT_AVATAR } from '@lume/stores/constants';
export const Image = (props) => {
const addImageFallback = (event) => {
event.currentTarget.src = DEFAULT_AVATAR;
};
return <img {...props} loading="lazy" decoding="async" onError={addImageFallback} />;
};

7
src/shared/profile/metadata.tsx
View File

@@ -1,4 +1,5 @@
import { RelayContext } from '@lume/shared/relaysProvider';
import { Image } from '@lume/shared/image';
import { RelayContext } from '@lume/shared/relayProvider';
import { DEFAULT_AVATAR, READONLY_RELAYS } from '@lume/stores/constants';
import { shortenKey } from '@lume/utils/shortenKey';
@@ -21,11 +22,11 @@ export default function ProfileMetadata({ id }: { id: string }) {
<>
<div className="relative">
<div className="relative h-56 w-full rounded-t-lg bg-zinc-800">
<img src={profile?.banner || DEFAULT_BANNER} alt="user's banner" className="h-58 w-full object-cover" />
<Image src={profile?.banner || DEFAULT_BANNER} alt="user's banner" className="h-58 w-full object-cover" />
</div>
<div className="relative -top-8 z-10 px-4">
<div className="relative h-16 w-16 rounded-lg bg-zinc-900 ring-2 ring-zinc-900">
<img src={profile?.picture || DEFAULT_AVATAR} alt={id} className="h-16 w-16 rounded-lg object-cover" />
<Image src={profile?.picture || DEFAULT_AVATAR} alt={id} className="h-16 w-16 rounded-lg object-cover" />
</div>
</div>
</div>