@datagouv/components-next 0.0.32 → 0.1.0

package/src/components/DatasetCard.vue

@@ -98,7 +98,7 @@
           </div>
           <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
           <div class="text-gray-medium whitespace-nowrap">
-            {{ $t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataset.last_update, { dateStyle: 'medium' }) }) }}
+            {{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataset.last_update, { dateStyle: 'medium' }) }) }}
           </div>
         </div>
         <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium">
@@ -146,10 +146,10 @@
         </div>
         <component
           :is="config.textClamp"
-          v-if="showDescription && config && config.textClamp && description"
+          v-if="showShortDescription && config && config.textClamp && shortDescription"
           class="fr-text--sm fr-mt-1w fr-mb-0 overflow-wrap-anywhere"
           :auto-resize="true"
-          :text="description"
+          :text="shortDescription"
           :max-lines="2"
         />
       </div>
@@ -158,7 +158,6 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
 import { computed, ref, watchEffect } from 'vue'
 import { RiDownloadLine, RiEyeLine, RiLineChartLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
@@ -167,44 +166,46 @@ import { summarize } from '../functions/helpers'
 import { useFormatDate } from '../functions/dates'
 import { getOwnerName } from '../functions/owned'
 import { removeMarkdown } from '../functions/markdown'
+import { getShortDescription } from '../functions/datasets'
 import { useComponentsConfig } from '../config'
+import { useTranslation } from '../composables/useTranslation'
 import DatasetQualityInline from './DatasetQualityInline.vue'
 import Avatar from './Avatar.vue'
 import Placeholder from './Placeholder.vue'
 import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
 import AppLink from './AppLink.vue'
 
-  type Props = {
-    dataset: Dataset | DatasetV2
+type Props = {
+  dataset: Dataset | DatasetV2
 
-    /**
+  /**
      * The datasetUrl is a route location object to allow Vue Router to navigate to the details of a dataset.
      * It is used as a separate prop to allow other sites using the package to define their own dataset pages.
      */
-    datasetUrl: RouteLocationRaw
-    datasetUrlInNewTab?: boolean
+  datasetUrl: RouteLocationRaw
+  datasetUrlInNewTab?: boolean
 
-    /**
+  /**
      * The organizationUrl is an optional route location object to allow Vue Router to navigate to the details of the organization linked to tha dataset.
      * It is used as a separate prop to allow other sites using the package to define their own organization pages.
      */
-    organizationUrl?: RouteLocationRaw
-    showDescription?: boolean
-  }
+  organizationUrl?: RouteLocationRaw
+  showShortDescription?: boolean
+}
 
 const props = withDefaults(defineProps<Props>(), {
   style: () => ({}),
-  showDescription: true,
+  showShortDescription: true,
 })
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
 const ownerName = computed(() => getOwnerName(props.dataset))
 const config = useComponentsConfig()
 
-const description = ref('')
+const shortDescription = ref('')
 watchEffect(async () => {
-  if (!props.showDescription) return
-  description.value = await removeMarkdown(props.dataset.description)
+  if (!props.showShortDescription) return
+  shortDescription.value = await getShortDescription(props.dataset.description, props.dataset.description_short)
 })
 </script>

package/src/components/DatasetInformationPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="py-6 mb-6 border-bottom border-gray-default">
     <h2 class="subtitle subtitle--uppercase">
-      {{ $t('Informations') }}
+      {{ t('Informations') }}
     </h2>
     <div class="fr-text--sm fr-m-0">
       <dl class="fr-grid-row fr-grid-row--gutters">
@@ -10,7 +10,7 @@
           class="fr-col-12 fr-col-sm-6 fr-col-md-4"
         >
           <dt class="subtitle fr-mb-0">
-            {{ $t('Licence') }}
+            {{ t('Licence') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             <code class="bg-grey-some px-1 text-gray-medium">
@@ -22,7 +22,7 @@
         </div>
         <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
           <dt class="subtitle fr-mb-0">
-            {{ $t('Identifiant') }}
+            {{ t('Identifiant') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ dataset.id }}
@@ -33,13 +33,13 @@
   </div>
   <div class="pb-6 mb-6 border-bottom border-gray-default">
     <h2 class="subtitle subtitle--uppercase">
-      {{ $t('Temporalité') }}
+      {{ t('Temporalité') }}
     </h2>
     <div class="fr-text--sm fr-m-0">
       <dl class="fr-grid-row fr-grid-row--gutters">
         <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
           <dt class="subtitle fr-mb-0">
-            {{ $t('Création') }}
+            {{ t('Création') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ formatDate(dataset.created_at) }}
@@ -50,7 +50,7 @@
           class="fr-col-12 fr-col-sm-6 fr-col-md-4"
         >
           <dt class="subtitle fr-mb-0">
-            {{ $t('Fréquence') }}
+            {{ t('Fréquence') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ frequency.label }}
@@ -60,7 +60,7 @@
       <dl class="fr-grid-row fr-grid-row--gutters">
         <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
           <dt class="subtitle fr-mb-0">
-            {{ $t('Dernière mise à jour') }}
+            {{ t('Dernière mise à jour') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ formatDate(props.dataset.last_update) }}
@@ -71,7 +71,7 @@
   </div>
   <div class="pb-6 mb-6 border-bottom border-gray-default">
     <h2 class="subtitle subtitle--uppercase">
-      {{ $t('Couverture spatiale') }}
+      {{ t('Couverture spatiale') }}
     </h2>
     <div class="fr-text--sm fr-m-0">
       <dl class="fr-grid-row fr-grid-row--gutters">
@@ -80,7 +80,7 @@
           class="fr-col-12 fr-col-sm-6 fr-col-md-4"
         >
           <dt class="subtitle fr-mb-0">
-            {{ $t('Couverture territoriale') }}
+            {{ t('Couverture territoriale') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ zonesLabels.join(', ') }}
@@ -91,7 +91,7 @@
           class="fr-col-12 fr-col-sm-6 fr-col-md-4"
         >
           <dt class="subtitle fr-mb-0">
-            {{ $t('Granularité de la couverture territoriale') }}
+            {{ t('Granularité de la couverture territoriale') }}
           </dt>
           <dd class="text-sm m-0 text-gray-medium p-0">
             {{ granularity.name }}
@@ -102,15 +102,15 @@
   </div>
   <div class="pb-6 mb-6 border-bottom border-gray-default">
     <h2 class="subtitle subtitle--uppercase">
-      {{ $t('Actions') }}
+      {{ t('Actions') }}
     </h2>
     <div class="fr-text--sm fr-m-0">
       <h3 class="subtitle fr-mb-1v">
-        {{ $t('Intégrer sur votre site') }}
+        {{ t('Intégrer sur votre site') }}
         <CopyButton
           :hide-label="true"
-          :label="$t(`Copier l'intégration`)"
-          :copied-label="$t('Intégration copiée !')"
+          :label="t(`Copier l'intégration`)"
+          :copied-label="t('Intégration copiée !')"
           class="fr-my-1w fr-mr-1w"
           :text="getDatasetOEmbedHtml('dataset', dataset.id)"
         />
@@ -146,7 +146,6 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useFormatDate } from '../functions/dates'
 // import useOEmbed from '../../composables/useOEmbed'
 import type { Dataset, DatasetV2 } from '../types/datasets'
@@ -155,13 +154,14 @@ import type { Frequency } from '../types/frequency'
 import type { License } from '../types/licenses'
 import { useFetch } from '../functions/api'
 import { getDatasetOEmbedHtml } from '../functions/datasets'
+import { useTranslation } from '../composables/useTranslation'
 import ExtraAccordion from './ExtraAccordion.vue'
 import CopyButton from './CopyButton.vue'
 
 const props = defineProps<{
   dataset: DatasetV2 | Dataset
 }>()
-const { t } = useI18n()
+const { t } = useTranslation()
 const { formatDate } = useFormatDate()
 // const embedText = useOEmbed('dataset', props.dataset.id)
 const textAreaRef = ref<HTMLTextAreaElement | null>(null)

package/src/components/DatasetLabelTag.vue

@@ -0,0 +1,40 @@
+<template>
+  <component
+    :is="url ? AppLink : 'span'"
+    :to="url"
+    class="text-xs leading-5 px-2 py-0.5 rounded-full uppercase inline-flex items-center"
+    :class="{
+      'bg-none bg-datagouv hover:bg-datagouv-dark text-white gap-1': url,
+      'bg-gray-lower gap-0.5': !url,
+    }"
+  >
+    <img
+      v-if="img"
+      :src="img"
+      alt=""
+      :class="{ 'bg-white rounded-full': url }"
+    >
+    {{ badge.label }}
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computedAsync } from '@vueuse/core'
+import type { RouteLocationRaw } from 'vue-router'
+import AppLink from './AppLink.vue'
+import type { TranslatedBadge } from '@/types/badges'
+
+const props = defineProps<{
+  badge: TranslatedBadge
+  url?: string | RouteLocationRaw
+}>()
+
+const img = computedAsync(async () => {
+  const labelImages = import.meta.glob('../../assets/labels/*.svg', {
+    query: '?url',
+    import: 'default',
+  })
+  const src = Object.keys(labelImages).find(path => path.includes(props.badge.kind))
+  return src && labelImages[src] ? await labelImages[src]() as string : undefined
+})
+</script>

package/src/components/DatasetQuality.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="flex items-center">
     <Toggletip
-      :button-props="{ class: '-ml-2 mt-px', title: $t('Qualité des métadonnées') }"
+      :button-props="{ class: '-ml-2 mt-px', title: t('Qualité des métadonnées') }"
     >
       <template #toggletip>
         <DatasetQualityTooltipContent :quality />
       </template>
     </Toggletip>
     <div class="text-sm text-gray-plain font-bold">
-      {{ $t('Qualité des métadonnées:') }}
+      {{ t('Qualité des métadonnées:') }}
     </div>
   </div>
   <DatasetQualityScore
@@ -19,35 +19,35 @@
     <ul class="list-none pl-0">
       <DatasetQualityItemWarning
         :quality-item="quality.dataset_description_quality"
-        :message="$t('Description des données non renseignée')"
+        :message="t('Description des données non renseignée')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.resources_documentation"
-        :message="$t('Documentation des fichiers manquante')"
+        :message="t('Documentation des fichiers manquante')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.license"
-        :message="$t('Licence non renseignée')"
+        :message="t('Licence non renseignée')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.update_frequency && quality.update_fulfilled_in_time"
-        :message="quality.update_frequency ? $t('Fréquence de mise à jour non respectée') : $t('Fréquence de mise à jour non renseignée')"
+        :message="quality.update_frequency ? t('Fréquence de mise à jour non respectée') : t('Fréquence de mise à jour non renseignée')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.has_open_format"
-        :message="$t('Formats de fichiers non standards')"
+        :message="t('Formats de fichiers non standards')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.temporal_coverage"
-        :message="$t('Couverture temporelle non renseignée')"
+        :message="t('Couverture temporelle non renseignée')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.spatial"
-        :message="$t('Couverture spatiale non renseignée')"
+        :message="t('Couverture spatiale non renseignée')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.all_resources_available"
-        :message="$t('Certains fichiers ne sont pas disponibles')"
+        :message="t('Certains fichiers ne sont pas disponibles')"
       />
     </ul>
   </template>
@@ -59,6 +59,7 @@ import DatasetQualityItemWarning from './DatasetQualityItemWarning.vue'
 import DatasetQualityScore from './DatasetQualityScore.vue'
 import Toggletip from './Toggletip.vue'
 import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
+import { useTranslation } from '../composables/useTranslation'
 
 withDefaults(defineProps<{
   quality: Quality
@@ -66,4 +67,6 @@ withDefaults(defineProps<{
 }>(), {
   hideWarnings: true,
 })
+
+const { t } = useTranslation()
 </script>

package/src/components/DatasetQualityInline.vue

@@ -2,7 +2,7 @@
   <div class="m-0 flex flex-wrap items-center text-sm text-gray-medium">
     <div class="fr-grid-row fr-grid-row--middle">
       <Toggletip
-        :button-props="{ class: 'relative z-2 ml-0.5', title: $t('Qualité des métadonnées') }"
+        :button-props="{ class: 'relative z-2 ml-0.5', title: t('Qualité des métadonnées') }"
       >
         <RiInformationLine class="size-4" />
         <template #toggletip>
@@ -10,7 +10,7 @@
         </template>
       </Toggletip>
       <p class="my-0 mr-1 text-gray-medium text-sm">
-        {{ $t('Métadonnées :') }}
+        {{ t('Métadonnées :') }}
       </p>
       <div class="fr-grid-row fr-grid-row--middle fr-mr-1v">
         <DatasetQualityScore :score="quality.score" />
@@ -25,8 +25,11 @@ import type { Quality } from '../types/datasets'
 import DatasetQualityScore from './DatasetQualityScore.vue'
 import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
 import Toggletip from './Toggletip.vue'
+import { useTranslation } from '../composables/useTranslation'
 
 defineProps<{
   quality: Quality
 }>()
+
+const { t } = useTranslation()
 </script>

package/src/components/DatasetQualityScore.vue

@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useTranslation } from '../composables/useTranslation'
 
 const props = withDefaults(defineProps<{
   score: number
@@ -30,6 +30,6 @@ const props = withDefaults(defineProps<{
 })
 const quality_max_score = 1
 const high = quality_max_score * 2 / 3
-const { t, locale } = useI18n()
-const calculatedScore = computed(() => new Intl.NumberFormat(locale.value, { style: 'percent' }).format(props.score))
+const { t, locale } = useTranslation()
+const calculatedScore = computed(() => new Intl.NumberFormat(locale, { style: 'percent' }).format(props.score))
 </script>

package/src/components/DatasetQualityTooltipContent.vue

@@ -65,15 +65,15 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import type { Quality } from '../types/datasets'
 import { useComponentsConfig } from '../config'
+import { useTranslation } from '../composables/useTranslation'
 import DatasetQualityItem from './DatasetQualityItem.vue'
 
 defineProps<{
   quality: Quality
 }>()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const config = useComponentsConfig()
 </script>

package/src/components/DateRangeDetails.vue

@@ -4,13 +4,13 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useTranslation } from '../composables/useTranslation'
 
 const props = defineProps<{
   range: { start: string, end: string | null }
 }>()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 
 const start = computed(() => new Date(props.range.start))
 const end = computed(() => props.range.end ? new Date(props.range.end) : null)
@@ -56,7 +56,11 @@ const display = computed(() => {
     }
   }
 
-  const addPronoun = (value: string | number | null) => {
+  // Function overloads to express that non-null input -> non-null output
+  function addPronoun(value: null): null
+  function addPronoun(value: string | number): string | number
+  function addPronoun(value: string | number | null): string | number | null
+  function addPronoun(value: string | number | null): string | number | null {
     if (!value) return null
     if (!hasPronoun) return value
     return t('le ') + value

package/src/components/ExtraAccordion.vue

@@ -28,7 +28,7 @@
             v-if="open"
             class="sr-only"
           >
-            {{ $t('Fermer les détails') }}
+            {{ t('Fermer les détails') }}
           </span>
         </DisclosureButton>
       </div>
@@ -66,8 +66,10 @@ import {
 } from '@headlessui/vue'
 import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/vue'
 import BrandedButton from './BrandedButton.vue'
+import { useTranslation } from '../composables/useTranslation'
 
 const accordionId = useId()
+const { t } = useTranslation()
 
 defineProps<{
   buttonText: string

package/src/components/OrganizationNameWithCertificate.vue

@@ -37,16 +37,16 @@
 
 <script setup lang="ts">
 import { RiCheckboxCircleLine } from '@remixicon/vue'
-import { useI18n } from 'vue-i18n'
 import { getOrganizationType, isOrganizationCertified } from '../functions/organizations'
 import type { Organization } from '../types/organizations'
 import { useComponentsConfig } from '../config'
+import { useTranslation } from '../composables/useTranslation'
 import OwnerTypeIcon from './OwnerTypeIcon.vue'
 import Tooltip from './Tooltip.vue'
 
 const config = useComponentsConfig()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 withDefaults(defineProps<{
   organization: Organization
   showAcronym?: boolean

package/src/components/PaddedContainer.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    class="!p-6"
+    :class="background"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  color?: 'white' | 'alt-grey'
+}>(), {
+  color: 'white',
+})
+
+const background = computed(() => {
+  switch (props.color) {
+    case 'alt-grey':
+      return 'bg-gray-some'
+    case 'white':
+    default:
+      return 'bg-white'
+  }
+})
+</script>

package/src/components/Pagination.vue

@@ -101,7 +101,7 @@
 
 <script setup lang="ts">
 import { computed, useTemplateRef } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useTranslation } from '../composables/useTranslation'
 
 type Props = {
   /**
@@ -173,7 +173,7 @@ function getVisiblePages(currentPage: number, pageCount: number) {
   return pagination
 }
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const pageCount = computed(() => Math.ceil(props.totalResults / props.pageSize))
 const visiblePages = computed(() => getVisiblePages(props.page, pageCount.value))
 

package/src/components/Placeholder.vue

@@ -25,7 +25,7 @@ async function placeholderUrl() {
     import: 'default',
   })
   const name = Object.keys(placeholders).find(p => p.includes(props.type)) as string
-  const module = placeholders[name]
+  const module = placeholders[name] as () => Promise<unknown>
   const placeholder = await module()
   return props.src ? props.src : placeholder as string
 }

package/src/components/ReadMore.vue

@@ -23,10 +23,10 @@
         @click.stop="toggle"
       >
         <template v-if="expanded">
-          {{ $t("Lire moins") }}
+          {{ t("Lire moins") }}
         </template>
         <template v-else>
-          {{ $t("Lire plus") }}
+          {{ t("Lire plus") }}
         </template>
       </BrandedButton>
     </div>
@@ -34,10 +34,12 @@
 </template>
 
 <script setup lang="ts">
-import { templateRef, useElementSize } from '@vueuse/core'
-import { ref, watch } from 'vue'
-import { easing, tween, styler } from 'popmotion'
+import { useElementSize } from '@vueuse/core'
+import { ref, useTemplateRef, watch } from 'vue'
+import { animate } from 'popmotion'
+import styler from 'stylefire'
 import BrandedButton from './BrandedButton.vue'
+import { useTranslation } from '../composables/useTranslation'
 
 const props = withDefaults(defineProps<{
   maxHeight?: string
@@ -45,11 +47,13 @@ const props = withDefaults(defineProps<{
   maxHeight: '',
 })
 
+const { t } = useTranslation()
+
 const DEFAULT_HEIGHT = 284
 const expanded = ref(false)
 const readMoreRequired = ref(false)
-const containerRef = templateRef<HTMLElement | null>('containerRef')
-const readMoreRef = templateRef<HTMLElement | null>('readMoreRef')
+const containerRef = useTemplateRef<HTMLElement | null>('containerRef')
+const readMoreRef = useTemplateRef<HTMLElement | null>('readMoreRef')
 const { height } = useElementSize(containerRef)
 const containerHeight = ref(DEFAULT_HEIGHT)
 const getHeight = (elt: Element) => {
@@ -80,25 +84,21 @@ const toggle = () => {
   }
   const divStyler = styler(readMoreRef.value)
   if (expanded.value) {
-    tween({
+    animate({
       from: { height: readMoreRef.value.scrollHeight },
       to: { height: getDefaultHeight() },
       duration: 300,
-      ease: easing.anticipate,
-    }).start({
-      update: divStyler.set,
-      complete: () => readMoreRef.value?.scrollIntoView({ behavior: 'smooth' }),
+      onComplete: () => readMoreRef.value?.scrollIntoView({ behavior: 'smooth' }),
+      onUpdate: divStyler.set,
     })
   }
   else {
-    tween({
+    animate({
       from: { height: getDefaultHeight() },
       to: { height: readMoreRef.value.scrollHeight },
       duration: 300,
-      ease: easing.anticipate,
-    }).start({
-      update: divStyler.set,
-      complete: () => divStyler.set({ height: 'auto' }),
+      onUpdate: divStyler.set,
+      onComplete: () => divStyler.set({ height: 'auto' }),
     })
   }
   expanded.value = !expanded.value

package/src/components/ResourceAccordion/DataStructure.vue

@@ -8,7 +8,7 @@
         class="fr-icon-warning-line"
         aria-hidden="true"
       />
-      {{ $t("La structure de données de ce fichier n'a pas pu être chargée.") }}
+      {{ t("La structure de données de ce fichier n'a pas pu être chargée.") }}
     </p>
   </div>
   <PreviewLoader v-else-if="loading" />
@@ -25,7 +25,7 @@
           class="fr-icon-warning-line"
           aria-hidden="true"
         />
-        {{ $t("Aucune structure de données détectée pour ce fichier.") }}
+        {{ t("Aucune structure de données détectée pour ce fichier.") }}
       </p>
     </div>
     <template v-if="hasColumnInfo">
@@ -37,7 +37,10 @@
         <h5 class="fr-text--sm fr-text--bold fr-mt-0 fr-mb-1v">
           {{ column }}
         </h5>
-        <code class="code">
+        <code
+          v-if="columnsInfo[column]"
+          class="code"
+        >
           {{ columnsInfo[column].format }}
         </code>
       </div>
@@ -49,10 +52,12 @@
 import { onMounted, ref } from 'vue'
 import type { Resource } from '../../types/resources'
 import { useGetProfile } from '../../functions/tabularApi'
+import { useTranslation } from '../../composables/useTranslation'
 import PreviewLoader from './PreviewLoader.vue'
 
 const props = defineProps<{ resource: Resource }>()
 const getProfile = useGetProfile()
+const { t } = useTranslation()
 
 type ColumnInfo = {
   score: number