Skip to content

Commit dd60822

Browse files
notken12notken12
committed
very nice hover effect
1 parent 3ac729f commit dd60822

File tree

1 file changed

+31
-18
lines changed

1 file changed

+31
-18
lines changed

‎src/app/photography/page.tsx‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -87,13 +87,13 @@ export default async function PhotographyPage() {
8787
No photos found. Check your Cloudinary configuration and tags.
8888
</p>
8989
) : (
90-
<div className="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-4">
90+
<div className="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-2">
9191
{photos.map((photo) => {
9292
const photoId = photo.public_id.replace(/[^\w-]/g, '-');
9393
return (
9494
<div key={photo.public_id} className="group break-inside-avoid mb-4">
9595
<a href={`#${photoId}`}>
96-
<div className="overflow-hidden outline outline-transparent hover:outline-border transition-colors">
96+
<div className="p-2 border border-transparent hover:border-muted-foreground transition-colors duration-200">
9797
<Image
9898
src={getThumbUrl(photo.public_id)}
9999
alt={`Photo - ${photo.public_id}`}
@@ -103,27 +103,27 @@ export default async function PhotographyPage() {
103103
placeholder="blur"
104104
blurDataURL={photo.blurDataURL}
105105
/>
106+
{photo.metadata && (
107+
<div className="mt-2 text-xs">
108+
<div className="mb-1 flex flex-wrap gap-x-4 text-xs text-muted-foreground justify-between">
109+
<span>{photo.metadata.FocalLength}mm</span>
110+
<span>f/{photo.metadata.FNumber}</span>
111+
<span>1/{1 / photo.metadata.ExposureTime}s</span>
112+
<span>ISO {photo.metadata.ISO}</span>
113+
<span>{photo.metadata.ExposureCompensation === 0 ? "±" : ""}{photo.metadata.ExposureCompensation} EV</span>
114+
</div>
115+
<div className="flex gap-2 flex-wrap">
116+
<span className="font-semibold">{photo.metadata.Make} {photo.metadata.Model}</span>
117+
<span className="text-muted-foreground">{photo.metadata.LensModel}</span>
118+
</div>
119+
</div>
120+
)}
106121
</div>
107122
</a>
108-
{photo.metadata && (
109-
<div className="mt-2 text-xs">
110-
<div className="mb-1 flex flex-wrap gap-x-4 text-xs text-muted-foreground justify-between">
111-
<span>{photo.metadata.FocalLength}mm</span>
112-
<span>f/{photo.metadata.FNumber}</span>
113-
<span>1/{1 / photo.metadata.ExposureTime}s</span>
114-
<span>ISO {photo.metadata.ISO}</span>
115-
<span>{photo.metadata.ExposureCompensation === 0 ? "±" : ""}{photo.metadata.ExposureCompensation} EV</span>
116-
</div>
117-
<div className="flex gap-2 flex-wrap">
118-
<span className="font-semibold">{photo.metadata.Make} {photo.metadata.Model}</span>
119-
<span className="text-muted-foreground">{photo.metadata.LensModel}</span>
120-
</div>
121123

122-
</div>
123-
)}
124124
<div id={photoId} className="fixed inset-0 z-50 hidden items-center justify-center bg-background/80 backdrop-blur-sm target:flex">
125125
<a href="#" className="absolute inset-0" aria-label="Close modal"></a>
126-
<div className="relative z-10 flex h-full w-full items-center justify-center p-4 lg:p-8 pointer-events-none">
126+
<div className="relative z-10 flex flex-col h-full w-full items-center justify-center p-4 lg:p-8 pointer-events-none">
127127
<div
128128
className="relative pointer-events-auto max-h-full max-w-full"
129129
style={{ aspectRatio: `${photo.width} / ${photo.height}` }}
@@ -138,6 +138,19 @@ export default async function PhotographyPage() {
138138
blurDataURL={photo.blurDataURL}
139139
/>
140140
</div>
141+
<div className="mt-2 text-xs pointer-events-auto">
142+
<div className="mb-1 flex flex-wrap gap-x-4 text-xs text-muted-foreground justify-between">
143+
<span>{photo.metadata.FocalLength}mm</span>
144+
<span>f/{photo.metadata.FNumber}</span>
145+
<span>1/{1 / photo.metadata.ExposureTime}s</span>
146+
<span>ISO {photo.metadata.ISO}</span>
147+
<span>{photo.metadata.ExposureCompensation === 0 ? "±" : ""}{photo.metadata.ExposureCompensation} EV</span>
148+
</div>
149+
<div className="flex gap-2 flex-wrap">
150+
<span className="font-semibold">{photo.metadata.Make} {photo.metadata.Model}</span>
151+
<span className="text-muted-foreground">{photo.metadata.LensModel}</span>
152+
</div>
153+
</div>
141154
</div>
142155
<a href="#" className="absolute top-4 right-4 z-20 transition-colors"><X /></a>
143156
</div>

0 commit comments

Comments
 (0)