victor HF staff Mishig commited on
Commit
150c8c1
1 Parent(s): d7cafed

/assistants: add user count (#809)

Browse files

* add user count

* Update formatUserCount.ts

* add 50-99 range

* Update src/lib/utils/formatUserCount.ts

Co-authored-by: Mishig <[email protected]>

---------

Co-authored-by: Mishig <[email protected]>

src/lib/utils/formatUserCount.ts ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ export function formatUserCount(userCount: number): string {
2
+ const userCountRanges: { min: number; max: number; label: string }[] = [
3
+ { min: 0, max: 1, label: "1" },
4
+ { min: 2, max: 9, label: "1-10" },
5
+ { min: 10, max: 49, label: "+10" },
6
+ { min: 50, max: 99, label: "+50" },
7
+ { min: 100, max: 299, label: "+100" },
8
+ { min: 300, max: 499, label: "+300" },
9
+ { min: 500, max: 999, label: "+500" },
10
+ { min: 1_000, max: 2_999, label: "+1k" },
11
+ { min: 3_000, max: 4_999, label: "+3k" },
12
+ { min: 5_000, max: 9_999, label: "+5k" },
13
+ { min: 10_000, max: Infinity, label: "+10k" },
14
+ ];
15
+
16
+ const range = userCountRanges.find(({ min, max }) => userCount >= min && userCount <= max);
17
+ return range?.label ?? "";
18
+ }
src/routes/assistants/+page.svelte CHANGED
@@ -13,8 +13,9 @@
13
  import CarbonClose from "~icons/carbon/close";
14
  import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
15
  import CarbonEarthAmerica from "~icons/carbon/earth-americas-filled";
16
- // import CarbonViewOff from "~icons/carbon/view-off-filled";
17
  import Pagination from "$lib/components/Pagination.svelte";
 
18
  import { getHref } from "$lib/utils/getHref";
19
 
20
  export let data: PageData;
@@ -144,13 +145,16 @@
144
  {#each data.assistants as assistant (assistant._id)}
145
  <a
146
  href="{base}/assistant/{assistant._id}"
147
- class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
148
  >
149
- <!-- {#if assistant.userCount && assistant.userCount > 1}
150
- <div class="absolute right-2 top-2" title="share with others to make it public">
151
- <CarbonViewOff class="opacity-70" />
 
 
 
152
  </div>
153
- {/if} -->
154
  {#if assistant.avatar}
155
  <img
156
  src="{base}/settings/assistants/{assistant._id}/avatar.jpg"
 
13
  import CarbonClose from "~icons/carbon/close";
14
  import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
15
  import CarbonEarthAmerica from "~icons/carbon/earth-americas-filled";
16
+ import CarbonUserMultiple from "~icons/carbon/user-multiple";
17
  import Pagination from "$lib/components/Pagination.svelte";
18
+ import { formatUserCount } from "$lib/utils/formatUserCount";
19
  import { getHref } from "$lib/utils/getHref";
20
 
21
  export let data: PageData;
 
145
  {#each data.assistants as assistant (assistant._id)}
146
  <a
147
  href="{base}/assistant/{assistant._id}"
148
+ class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
149
  >
150
+ {#if assistant.userCount && assistant.userCount > 1}
151
+ <div
152
+ class="absolute right-3 top-3 flex items-center gap-1 text-xs text-gray-400"
153
+ title="Number of users"
154
+ >
155
+ <CarbonUserMultiple class="text-xxs" />{formatUserCount(assistant.userCount)}
156
  </div>
157
+ {/if}
158
  {#if assistant.avatar}
159
  <img
160
  src="{base}/settings/assistants/{assistant._id}/avatar.jpg"