hq/Bpistle
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add lightbox to profile avatar and banner (#661)

Browse source
This commit is contained in:
Alex Gleason 2025-11-14 08:02:21 -06:00 • committed by GitHub
parent 82c13006ff
commit 19eaf1a4e3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 160 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/Profile/index.tsx
View file

@ -3,12 +3,13 @@ import FollowButton from '@/components/FollowButton'
import Nip05 from '@/components/Nip05'
import NpubQrCode from '@/components/NpubQrCode'
import ProfileAbout from '@/components/ProfileAbout'
import ProfileBanner from '@/components/ProfileBanner'
import { BannerWithLightbox } from '@/components/ProfileBanner'
import ProfileOptions from '@/components/ProfileOptions'
import ProfileZapButton from '@/components/ProfileZapButton'
import PubkeyCopy from '@/components/PubkeyCopy'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { AvatarWithLightbox } from '@/components/UserAvatar'
import { useFetchFollowings, useFetchProfile } from '@/hooks'
import { toMuteList, toProfileEditor } from '@/lib/link'
import { SecondaryPageLink, useSecondaryPage } from '@/PageManager'
@ -20,7 +21,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import NotFound from '../NotFound'
import SearchInput from '../SearchInput'
import { SimpleUserAvatar } from '../UserAvatar'
import FollowedBy from './FollowedBy'
import Followings from './Followings'
import ProfileFeed from './ProfileFeed'
@ -114,10 +114,11 @@ export default function Profile({ id }: { id?: string }) {
<>
<div ref={topContainerRef}>
<div className="relative bg-cover bg-center mb-2">
<ProfileBanner banner={banner} pubkey={pubkey} className="w-full aspect-[3/1]" />
<SimpleUserAvatar
<BannerWithLightbox banner={banner} pubkey={pubkey} className="w-full aspect-[3/1]" />
<AvatarWithLightbox
userId={pubkey}
className="w-24 h-24 absolute left-3 bottom-0 translate-y-1/2 border-4 border-background rounded-full"
size="large"
className="absolute left-3 bottom-0 translate-y-1/2 border-4 border-background"
/>
</div>
<div className="px-4">