carlos/almeira-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add tooltips with title to media items in dashboard and selection modals

Browse Source
This commit is contained in:
Carlos (Almeira) 2026-03-30 10:35:10 -05:00
parent 7bbaccfdb8
commit 8993ab3293
3 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/dashboard/media/page.tsx
View File

@ -100,7 +100,7 @@ export default async function MediaLibraryPage({
<div className="h-48 w-full relative bg-slate-950 flex items-center justify-center overflow-hidden"> <div className="h-48 w-full relative bg-slate-950 flex items-center justify-center overflow-hidden">
{item.tipo === 'video' ? ( {item.tipo === 'video' ? (
<> <>
<video src={fileUrl} className="w-full h-full object-cover opacity-50 blur-sm" /> <video src={fileUrl} title={item.titulo} className="w-full h-full object-cover opacity-50 blur-sm" />
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<div className="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center border border-cyan-500/50"> <div className="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center border border-cyan-500/50">
<Video className="text-cyan-400" size={32} /> <Video className="text-cyan-400" size={32} />
@ -109,7 +109,7 @@ export default async function MediaLibraryPage({
</> </>
) : ( ) : (
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img src={fileUrl} alt={item.alt_text || item.titulo} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" /> <img src={fileUrl} alt={item.alt_text || item.titulo} title={item.titulo} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
)} )}
<div className="absolute top-2 right-2 flex bg-black/50 backdrop-blur-md rounded-lg p-1 opacity-0 group-hover:opacity-100 transition-opacity"> <div className="absolute top-2 right-2 flex bg-black/50 backdrop-blur-md rounded-lg p-1 opacity-0 group-hover:opacity-100 transition-opacity">
<DeleteButton collectionId={"media"} documentId={item.$id} entityAlias={"media"} /> <DeleteButton collectionId={"media"} documentId={item.$id} entityAlias={"media"} />

2
src/components/dashboard/MediaGridSelector.tsx
View File

@ -211,7 +211,7 @@ export const MediaGridSelector = ({
value === item.file_id ? 'border-cyan-500 shadow-xl shadow-cyan-500/20' : 'border-slate-800 hover:border-slate-600 shadow-lg' value === item.file_id ? 'border-cyan-500 shadow-xl shadow-cyan-500/20' : 'border-slate-800 hover:border-slate-600 shadow-lg'
}`} }`}
> >
<img src={url} alt={item.titulo} className="w-full h-full object-cover transition-transform group-hover:scale-110" loading="lazy" /> <img src={url} alt={item.titulo} title={item.titulo} className="w-full h-full object-cover transition-transform group-hover:scale-110" loading="lazy" />
<div className="absolute inset-0 bg-gradient-to-t from-cyan-500/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" /> <div className="absolute inset-0 bg-gradient-to-t from-cyan-500/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
{value === item.$id && ( {value === item.$id && (
<div className="absolute top-2 right-2 bg-cyan-500 text-white rounded-full p-1 shadow-lg"> <div className="absolute top-2 right-2 bg-cyan-500 text-white rounded-full p-1 shadow-lg">

1
src/components/dashboard/MediaPickerMini.tsx
View File

@ -176,6 +176,7 @@ export const MediaPickerMini = ({ value, onChange, label }: MediaPickerMiniProps
<img <img
src={getImageUrl(item.file_id)} src={getImageUrl(item.file_id)}
alt={item.titulo} alt={item.titulo}
title={item.titulo}
className="w-full h-full object-cover transition-transform group-hover:scale-110" className="w-full h-full object-cover transition-transform group-hover:scale-110"
loading="lazy" loading="lazy"
/> />