fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-05-04 18:22:47 -03:00
Code Issues Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
fedpo
2025-12-26 01:44:10 -03:00
parent 9508b575f5
commit 6696203979
1 changed files with 29 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/CardPerfil.svelte
+29 -28
View File
@@ -20,7 +20,7 @@
let cargando = $state(false); let cargando = $state(false);
let hoverimg = $state(false); let hoverimg = $state(false);
let image: File | null = $state(null); let image: File | null = $state(null);
let usu = $state({displayName: data.displayName, bio: data.bio}) let usu = $state({ displayName: data.displayName, bio: data.bio });
async function cambiarFotoDePerfil() { async function cambiarFotoDePerfil() {
const input = document.createElement('input'); const input = document.createElement('input');
@@ -47,6 +47,7 @@
hoverimg = false; hoverimg = false;
} }
</script> </script>
<!-- {$inspect(data)} --> <!-- {$inspect(data)} -->
<Card class="mb-2 flex overflow-hidden"> <Card class="mb-2 flex overflow-hidden">
<CardContent> <CardContent>
@@ -57,33 +58,33 @@
<Skeleton class="h-16 w-3/4 rounded-full" /> <Skeleton class="h-16 w-3/4 rounded-full" />
</div> </div>
{:else if $sesionStore?.isAdmin || $sesionStore?.username == data.username} {:else if $sesionStore?.isAdmin || $sesionStore?.username == data.username}
<div class="w-full flex justify-center"> <div class="flex w-full justify-center">
<button <button
class="relative flex items-center justify-center" class="relative flex items-center justify-center"
onmouseenter={() => (hoverimg = true)} onmouseenter={() => (hoverimg = true)}
onmouseleave={() => (hoverimg = false)} onmouseleave={() => (hoverimg = false)}
onclick={cambiarFotoDePerfil} onclick={cambiarFotoDePerfil}
> >
<Avatar <Avatar
class={{ class={{
'brightness-0': hoverimg, 'brightness-0': hoverimg,
'relative z-0 mt-2 scale-250 border-2 border-slate-950 transition-all': true 'relative z-0 mt-2 scale-250 border-2 border-slate-950 transition-all': true
}} }}
> >
<AvatarImage src={data.imageUrl} alt="Imagen de perfil"></AvatarImage> <AvatarImage src={data.imageUrl} alt="Imagen de perfil"></AvatarImage>
<AvatarFallback class="select-none"> <AvatarFallback class="select-none">
{data.displayName?.[0]?.toUpperCase() || ''} {data.displayName?.[0]?.toUpperCase() || ''}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div <div
class="absolute inset-0 flex justify-center items-center" class="absolute inset-0 flex items-center justify-center"
class:opacity-100={hoverimg} class:opacity-100={hoverimg}
class:opacity-0={!hoverimg} class:opacity-0={!hoverimg}
> >
<Pen class="text-white" /> <Pen class="text-white" />
</div> </div>
</button> </button>
</div> </div>
<h1 class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl"> <h1 class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl">
{usu.displayName} {usu.displayName}