You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.9 KiB
76 lines
1.9 KiB
<!--
|
|
Tarjeta canónica de perfil para Discover. La estructura — foto a
|
|
pantalla completa con overlay de nombre/edad/ubicación, prompt
|
|
editorial debajo y chips de intereses al pie — viene del bundle de
|
|
diseño Nexo (variante "Editorial").
|
|
-->
|
|
<script lang="ts">
|
|
import type { DatingProfile } from '../_lib/types';
|
|
|
|
interface Props {
|
|
profile: DatingProfile;
|
|
}
|
|
let { profile }: Props = $props();
|
|
|
|
const main = $derived(
|
|
profile.photoUrls.find((entry) => entry.filename === profile.primaryPhoto) ??
|
|
profile.photoUrls[0]
|
|
);
|
|
|
|
const intentLabel = $derived(
|
|
({
|
|
dating: 'Conocer gente',
|
|
long_term: 'Algo serio',
|
|
casual: 'Algo casual',
|
|
friends: 'Amistad',
|
|
unsure: 'Sin etiqueta'
|
|
} as const)[profile.intent]
|
|
);
|
|
|
|
const initial = $derived(profile.displayName.slice(0, 1).toUpperCase());
|
|
</script>
|
|
|
|
<article class="nx-card" data-intent={profile.intent}>
|
|
<div class="nx-photo">
|
|
{#if main}
|
|
<img src={main.card} alt={`Foto de ${profile.displayName}`} loading="lazy" />
|
|
{:else}
|
|
<div class="photo-placeholder" aria-hidden="true">{initial}</div>
|
|
{/if}
|
|
<div class="photo-meta">
|
|
<span class="intent">{intentLabel}</span>
|
|
<div class="name">
|
|
<span>{profile.displayName}</span>
|
|
<span class="age">{profile.age}</span>
|
|
</div>
|
|
{#if profile.approxLocation !== ''}
|
|
<div class="place">
|
|
<span aria-hidden="true">⌖</span>
|
|
<span>{profile.approxLocation}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if profile.bio !== ''}
|
|
<div class="nx-prompt-card">
|
|
<p class="nx-prompt-q">Sobre mí</p>
|
|
<p class="nx-prompt-a">{profile.bio}</p>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if profile.interests.length > 0}
|
|
<ul class="nx-info-row" aria-label="Intereses">
|
|
{#each profile.interests.slice(0, 8) as interest (interest)}
|
|
<li class="nx-tag">{interest}</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</article>
|
|
|
|
<style>
|
|
.nx-info-row {
|
|
list-style: none;
|
|
}
|
|
</style>
|