flo-bit.dev
your personal website on atproto - mirror
blento.app
commit
+20
-34
src/lib/cards/FriendsCard/FriendsCard.svelte
+20
-34
src/lib/cards/FriendsCard/FriendsCard.svelte
···
80
</span>
81
{/if}
82
{:else}
83
-
<div class="flex items-center justify-center">
84
-
{#each visibleProfiles as profile, i (profile.did)}
85
-
<a
86
-
href={getLink(profile)}
87
-
class="accent:ring-accent-500/30 relative rounded-full ring-2 ring-white transition-transform hover:z-10 hover:scale-110 dark:ring-neutral-900"
88
-
class:-ml-3={i > 0 && sizeClass === 'sm'}
89
-
class:-ml-5={i > 0 && sizeClass === 'md'}
90
-
class:-ml-6={i > 0 && sizeClass === 'lg'}
91
-
>
92
-
<Avatar
93
-
src={profile.avatar}
94
-
alt={profile.handle}
95
-
class={sizeClass === 'sm' ? 'size-12' : sizeClass === 'md' ? 'size-16' : 'size-20'}
96
-
/>
97
-
</a>
98
-
{/each}
99
-
{#if overflowCount > 0}
100
-
<div
101
-
class="bg-base-200 dark:bg-base-700 accent:bg-accent-400/30 accent:ring-accent-500/30 relative flex items-center justify-center rounded-full ring-2 ring-white dark:ring-neutral-900"
102
-
class:-ml-3={sizeClass === 'sm'}
103
-
class:-ml-5={sizeClass === 'md'}
104
-
class:-ml-6={sizeClass === 'lg'}
105
-
class:size-12={sizeClass === 'sm'}
106
-
class:size-16={sizeClass === 'md'}
107
-
class:size-20={sizeClass === 'lg'}
108
-
>
109
-
<span
110
-
class="text-base-600 dark:text-base-300 accent:text-accent-200 font-semibold"
111
-
class:text-sm={sizeClass === 'sm'}
112
-
class:text-base={sizeClass === 'md' || sizeClass === 'lg'}
113
>
114
-
+{overflowCount}
115
-
</span>
116
-
</div>
117
-
{/if}
118
</div>
119
{/if}
120
</div>
···
80
</span>
81
{/if}
82
{:else}
83
+
{@const olX = sizeClass === 'sm' ? 12 : sizeClass === 'md' ? 20 : 24}
84
+
{@const olY = sizeClass === 'sm' ? 8 : sizeClass === 'md' ? 12 : 16}
85
+
<div class="">
86
+
<div
87
+
class="flex flex-wrap items-center justify-center"
88
+
style="padding: {olY}px 0 0 {olX}px;"
89
+
>
90
+
{#each profiles as profile (profile.did)}
91
+
<a
92
+
href={getLink(profile)}
93
+
class="accent:ring-accent-500 relative block rounded-full ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900"
94
+
style="margin: -{olY}px 0 0 -{olX}px;"
95
>
96
+
<Avatar
97
+
src={profile.avatar}
98
+
alt={profile.handle}
99
+
class={sizeClass === 'sm' ? 'size-12' : sizeClass === 'md' ? 'size-16' : 'size-20'}
100
+
/>
101
+
</a>
102
+
{/each}
103
+
</div>
104
</div>
105
{/if}
106
</div>