highperfocused/lumina
1
0
Fork 0
mirror of https://github.com/lumina-rocks/lumina.git synced 2026-06-04 01:31:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Optimize image loading and styling across multiple components (#110)

Browse Source 
Co-authored-by: highperfocused <highperfocused@pm.me>
This commit is contained in:
mroxso
2025-05-07 17:13:19 +02:00
committed by GitHub
parent e3696e815e
commit e01a773ba2
6 changed files with 47 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/GalleryCard.tsx
View File

@@ -31,7 +31,13 @@ const GalleryCard: React.FC<GalleryCardProps> = ({ pubkey, eventId, imageUrl, li
<div>
<div className='d-flex justify-content-center align-items-center'>
<div style={{ position: 'relative' }}>
<img src={imageUrl} className='rounded lg:rounded-lg' style={{ maxWidth: '100%', maxHeight: '75vh', objectFit: 'contain', margin: 'auto' }} alt={eventId} />
<img
src={imageUrl}
className='rounded lg:rounded-lg w-full h-full object-cover'
style={{ maxHeight: '75vh', margin: 'auto' }}
alt={eventId}
loading="lazy"
/>
</div>
</div>
</div>

11
components/KIND20Card.tsx
View File

@@ -80,18 +80,15 @@ const KIND20Card: React.FC<KIND20CardProps> = ({
<div className="w-full">
<div className="w-full flex justify-center">
<div className="relative w-full h-auto min-h-[300px] max-h-[80vh] flex justify-center">
<Image
<img
src={image}
alt={text}
className="rounded-lg object-contain max-w-full h-auto"
className="rounded-lg w-full h-auto object-contain"
onError={() => setImageError(true)}
priority
width={1200}
height={800}
loading="lazy"
style={{
maxHeight: "80vh",
width: "auto",
maxWidth: "100%"
margin: "auto"
}}
/>
</div>

15
components/NoteCard.tsx
View File

@@ -93,8 +93,10 @@ const NoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tags, event,
<img
key={index}
src={src}
className='rounded lg:rounded-lg'
style={{ maxWidth: '100%', maxHeight: '66vh', objectFit: 'contain', margin: 'auto' }}
className='rounded lg:rounded-lg w-full h-auto object-contain'
style={{ maxHeight: '66vh', margin: 'auto' }}
alt={textWithoutImage || "Post image"}
loading="lazy"
/>
</CarouselItem>
))}
@@ -103,7 +105,14 @@ const NoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tags, event,
<CarouselNext />
</Carousel>
) : (
imageSrc ? <img src={imageSrc[0]} className='rounded lg:rounded-lg' style={{ maxWidth: '100%', maxHeight: '66vh', objectFit: 'contain', margin: 'auto' }} /> : ""
imageSrc ?
<img
src={imageSrc[0]}
className='rounded lg:rounded-lg w-full h-auto object-contain'
style={{ maxHeight: '66vh', margin: 'auto' }}
alt={textWithoutImage || "Post image"}
loading="lazy"
/> : ""
)}
</div>
<div className='w-full h-full px-10'>

11
components/QuickViewKind20NoteCard.tsx
View File

@@ -35,18 +35,17 @@ const QuickViewKind20NoteCard: React.FC<QuickViewKind20NoteCardProps> = ({ pubke
const { width, height } = extractDimensions(event);
const card = (
<Card className="aspect-square">
<Card className="aspect-square overflow-hidden">
<SmallCardContent className="h-full p-0">
<div className="h-full w-full">
<div className='relative w-full h-full'>
<Image
<img
src={image || "/placeholder.svg"}
alt={text}
fill
sizes="(max-width: 768px) 100vw, 300px"
className='rounded lg:rounded-lg object-cover'
priority
className='w-full h-full rounded lg:rounded-lg object-cover'
loading="lazy"
onError={() => setImageError(true)}
style={{ objectPosition: 'center' }}
/>
</div>
</div>

14
components/QuickViewNoteCard.tsx
View File

@@ -45,7 +45,12 @@ const QuickViewNoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tag
<div className="absolute top-2 right-2 w-7 h-7 lg:w-12 lg:h-12 bg-black bg-opacity-40 rounded-lg flex items-center justify-center">
<StackIcon className='absolute w-7 h-7 lg:w-12 lg:h-12'/>
</div>
<img src={imageSrc[0]} className='rounded lg:rounded-lg' style={{ maxWidth: '100%', maxHeight: '75vh', objectFit: 'contain', margin: 'auto' }} alt={text} />
<img src={imageSrc[0]}
className='rounded lg:rounded-lg w-full h-auto object-cover'
style={{ maxHeight: '75vh', margin: 'auto' }}
alt={text}
loading="lazy"
/>
</div>
) : imageSrc && imageSrc.length > 0 ? (
<div style={{ position: 'relative' }}>
@@ -54,7 +59,12 @@ const QuickViewNoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tag
<PlayIcon className='absolute w-7 h-7 lg:w-12 lg:h-12' />
</div>
}
<img src={imageSrc[0]} className='rounded lg:rounded-lg' style={{ maxWidth: '100%', maxHeight: '75vh', objectFit: 'contain', margin: 'auto' }} alt={text} />
<img src={imageSrc[0]}
className='rounded lg:rounded-lg w-full h-auto object-cover'
style={{ maxHeight: '75vh', margin: 'auto' }}
alt={text}
loading="lazy"
/>
</div>
) : videoSrc && videoSrc.length > 0 ? (
<div style={{ position: 'relative' }}>

8
components/TrendingImageNew.tsx
View File

@@ -63,7 +63,13 @@ const TrendingImageNew: React.FC<TrendingImageNewProps> = ({ event }) => {
{imageUrl && (
<div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
<Link href={hrefNote}>
<img src={imageUrl} className='rounded lg:rounded-lg' style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt={text} />
<img
src={imageUrl}
className='rounded lg:rounded-lg w-full h-full object-cover'
style={{ margin: 'auto' }}
alt={text}
loading="lazy"
/>
</Link>
</div>
)}