fix(overview): pluralize nouns properly (#436)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
nuxt · Sep 26, 2023 · 5011c35 · 5011c35
1 parent aabc865
commit 5011c35
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/devtools/client/composables/utils.ts b/packages/devtools/client/composables/utils.ts
@@ -159,3 +159,7 @@ export function getComponentRelationships(component: Component, relationships?:
     dependents,
   }
 }
+
+export function pluralizeByCount(count: number, singular: string, plural = `${singular}s`) {
+  return `${count} ${count <= 1 ? singular : plural}`
+}
diff --git a/packages/devtools/client/pages/modules/overview.vue b/packages/devtools/client/pages/modules/overview.vue
@@ -65,23 +65,23 @@ const metricsLoading = computed(() => client.value?.metrics.loading())
             to="/modules/pages"
           >
             <div carbon-tree-view-alt text-3xl />
-            <div>{{ routes.length }} pages</div>
+            <div>{{ pluralizeByCount(routes.length, 'page') }}</div>
           </NuxtLink>
           <NuxtLink v-if="config" min-w-40 p4 theme-card-lime flex="~ col auto" to="/modules/components">
             <div i-carbon-assembly-cluster text-3xl />
-            <div>{{ components.length }} components</div>
+            <div>{{ pluralizeByCount(components.length, 'component') }}</div>
           </NuxtLink>
           <NuxtLink v-if="config && autoImports" min-w-40 p4 theme-card-yellow flex="~ col auto" to="/modules/imports">
             <div carbon-function text-3xl />
-            <div>{{ autoImports.imports.length }} imports</div>
+            <div>{{ pluralizeByCount(autoImports.imports.length, 'import') }}</div>
           </NuxtLink>
           <NuxtLink v-if="config" min-w-40 p4 theme-card-purple flex="~ col auto" to="/modules/modules">
             <div carbon-3d-mpr-toggle text-3xl />
-            <div>{{ installedModules.length }} modules</div>
+            <div>{{ pluralizeByCount(installedModules.length, 'module') }}</div>
           </NuxtLink>
           <NuxtLink v-if="config" min-w-40 p4 theme-card-teal flex="~ col auto" to="/modules/plugins">
             <div carbon-plug text-3xl />
-            <div>{{ config.plugins.length }} plugins</div>
+            <div>{{ pluralizeByCount(config.plugins.length, 'plugin') }}</div>
           </NuxtLink>
           <div v-if="metricsLoading" pointer-events-none min-w-40 p4 theme-card-lime flex="~ auto gap-6">
             <div i-carbon-time-plot flex-none text-3xl />