refacto les card items et list
This commit is contained in:
styve Lioumba
@@ -2,59 +2,97 @@
|
||||
<a
|
||||
[routerLink]="[user.username ? user.username : user.id]"
|
||||
[state]="{ user, profile }"
|
||||
class="cursor-pointer"
|
||||
class="block group"
|
||||
>
|
||||
<div class="group text-center text-gray-500 dark:text-gray-400">
|
||||
<!-- Card du profil -->
|
||||
<div
|
||||
class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
|
||||
>
|
||||
<!-- Badge vérifié (position absolue en haut à droite) -->
|
||||
@if (profile.estVerifier) {
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="size-6 text-purple-800"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
@if (user.avatar) {
|
||||
<img
|
||||
class="mx-auto mb-4 w-36 h-36 rounded-full grayscale object-cover object-top ransition duration-500 group-hover:scale-105 group-hover:grayscale-0"
|
||||
src="{{ environment.baseUrl }}/api/files/users/{{ user.id }}/{{ user.avatar }}"
|
||||
alt="{{ user.username }}"
|
||||
loading="lazy"
|
||||
/>
|
||||
} @else {
|
||||
<img
|
||||
class="mx-auto mb-4 w-36 h-36 rounded-full grayscale object-cover object-top ransition duration-500 group-hover:scale-105 group-hover:grayscale-0"
|
||||
src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user.username }}"
|
||||
alt="{{ user.username }}"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="absolute top-3 right-3 z-10 animate-pulse-slow">
|
||||
<div class="bg-purple-500/20 backdrop-blur-md p-2 rounded-full">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="w-6 h-6 text-purple-500"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div
|
||||
class="translate-y-2 transition duration-300 ease-in-out group-hover:translate-y-0 flex flex-col items-center space-y-2"
|
||||
>
|
||||
<!-- Partie supérieure avec avatar -->
|
||||
<div class="p-6 text-center">
|
||||
<!-- Avatar avec bordure gradient -->
|
||||
<div class="relative inline-block mb-4">
|
||||
<div class="w-32 h-32 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1">
|
||||
@if (user.avatar) {
|
||||
<img
|
||||
class="w-full h-full rounded-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500 group-hover:scale-105"
|
||||
src="{{ environment.baseUrl }}/api/files/users/{{ user.id }}/{{ user.avatar }}"
|
||||
alt="{{ user.username }}"
|
||||
loading="lazy"
|
||||
/>
|
||||
} @else {
|
||||
<img
|
||||
class="w-full h-full rounded-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500 group-hover:scale-105"
|
||||
src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user.username }}"
|
||||
alt="{{ user.username }}"
|
||||
loading="lazy"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nom -->
|
||||
@if (user.name) {
|
||||
<h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
<h3
|
||||
class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
|
||||
>
|
||||
{{ user.name }}
|
||||
</h3>
|
||||
} @else if (user.username) {
|
||||
<h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
<h3
|
||||
class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
|
||||
>
|
||||
{{ user.username }}
|
||||
</h3>
|
||||
} @else {
|
||||
<h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
Non mentionné
|
||||
</h3>
|
||||
<h3 class="text-lg font-bold text-gray-500 dark:text-gray-400 mb-2">Non mentionné</h3>
|
||||
}
|
||||
<p class="font-semibold">{{ profile.profession }}</p>
|
||||
<app-chips [sectorId]="profile.secteur" />
|
||||
<app-reseaux [reseaux]="profile.reseaux" />
|
||||
|
||||
<!-- Profession -->
|
||||
<p class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-4">
|
||||
{{ profile.profession || 'Profession non renseignée' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Partie inférieure avec infos -->
|
||||
<div class="px-6 pb-6 space-y-3 border-t border-gray-100 dark:border-gray-700 pt-4">
|
||||
<!-- Secteur -->
|
||||
<div class="flex justify-center">
|
||||
<app-chips [sectorId]="profile.secteur" />
|
||||
</div>
|
||||
|
||||
<!-- Réseaux sociaux -->
|
||||
@if (profile.reseaux) {
|
||||
<div class="flex justify-center">
|
||||
<app-reseaux [reseaux]="profile.reseaux" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Indicateur de hover (bordure animée) -->
|
||||
<div
|
||||
class="absolute inset-0 border-2 border-transparent group-hover:border-indigo-500 rounded-xl transition-all duration-300 pointer-events-none"
|
||||
></div>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user