{"version":3,"file":"D4ldncBE.js","sources":["../../../../components/ProfileTopTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { FingerPrintIcon } from '@heroicons/vue/outline';\nimport { BadgeCheckIcon } from '@heroicons/vue/solid';\nimport type { PropType } from 'vue';\nimport { useInfiniteScroll } from '~/composables/infinite-scroll';\nimport type { Profile } from '~/types/generated';\nimport { getApiRoot } from '~/utilities/api';\nimport { avatarGradientStyles } from '~/utilities/avatar-gradient';\nimport { formatXchPrice } from '~/utilities/chia-display-utils';\nimport { getUrlForProfile } from '~/utilities/url-slugs';\n\nconst props = defineProps({\n  intervalInDays: String as PropType<'7' | '30' | 'all'>,\n  limit: Number,\n  rows: { type: Number, default: 1 },\n  excludeSus: { type: Boolean, default: false },\n  hideNumTrades: { type: Boolean, default: false },\n  hideNumItems: { type: Boolean, default: false },\n});\n\nconst intervalInDays = toRef(props, 'intervalInDays');\n\nconst target = ref();\nconst { items: profiles, pending }: { items: Profile[]; pending: boolean } = useInfiniteScroll(\n  target,\n  () => `${getApiRoot()}/profile?interval=${intervalInDays.value}`,\n  [intervalInDays],\n  props.limit || 12\n);\n</script>\n<template>\n  <div>\n    <div class=\"mt-1 rounded-lg bg-white ring-1 ring-neutral-300 dark:bg-black dark:ring-neutral-600\">\n      <table class=\"min-w-full table-fixed\">\n        <thead>\n          <tr>\n            <th class=\"w-12 px-3 sm:py-3.5\"></th>\n            <th class=\"w-20 px-3 sm:py-3.5\"></th>\n            <CollectionTopTableHeader header-key=\"name\" hide-below=\"sm\"\n              >{{ $t('collections.collection') }}\n            </CollectionTopTableHeader>\n            <CollectionTopTableHeader header-key=\"volume\" hide-below=\"sm\" align=\"end\"\n              >{{ $t('collections.volume') }}\n            </CollectionTopTableHeader>\n            <!--            <CollectionTopTableHeader header-key=\"floor_price\" hide-below=\"sm\" align=\"end\"-->\n            <!--              >{{ $t('collections.floorPrice') }}-->\n            <!--            </CollectionTopTableHeader>-->\n            <CollectionTopTableHeader\n              v-if=\"!props.hideNumTrades\"\n              header-key=\"trade_count\"\n              hide-below=\"md\"\n              align=\"center\"\n              >{{ $t('collections.numTrades') }}\n            </CollectionTopTableHeader>\n            <CollectionTopTableHeader v-if=\"!props.hideNumItems\" header-key=\"num_items\" hide-below=\"lg\" align=\"center\"\n              >{{ $t('collections.numItems') }}\n            </CollectionTopTableHeader>\n          </tr>\n        </thead>\n        <tbody>\n          <NuxtLink\n            v-for=\"(profile, planIdx) in profiles\"\n            :key=\"profile.id\"\n            v-slot=\"{ navigate }\"\n            :to=\"getUrlForProfile(profile)\"\n            custom\n          >\n            <tr class=\"cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-900\" @click=\"navigate\">\n              <td\n                :class=\"[\n                  planIdx === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'relative py-4 pl-4',\n                ]\"\n              >\n                <div class=\"text-center text-xl font-bold text-neutral-600 dark:text-neutral-300\">\n                  {{ planIdx + 1 }}\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  planIdx === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'relative py-4 pl-4 pr-3 lg:text-lg',\n                ]\"\n              >\n                <div\n                  class=\"aspect-1 group-hover:opacity-75\"\n                  :class=\"[!profile.avatar_uri ? 'flex items-center justify-center rounded-md bg-gradient-to-br' : '']\"\n                  :style=\"avatarGradientStyles(profile.id)\"\n                >\n                  <img\n                    v-if=\"profile.avatar_uri\"\n                    :alt=\"`${profile.name} image`\"\n                    :src=\"profile.avatar_uri\"\n                    loading=\"lazy\"\n                    class=\"aspect-1 rounded-md object-cover\"\n                  />\n                  <FingerPrintIcon v-else class=\"h-3/4 w-3/4 text-neutral-200 dark:text-neutral-700\" />\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  planIdx === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'lg:text-md relative py-8 pl-4 pr-3',\n                ]\"\n              >\n                <div\n                  class=\"flex items-center gap-1 text-neutral-900 dark:text-neutral-50\"\n                  :class=\"[profile.name ? 'font-semibold' : 'font-mono text-sm tracking-tighter']\"\n                >\n                  {{ profile.name || profile.encoded_id.substring(0, 20) }}\n                  <BadgeCheckIcon v-if=\"profile?.verification_state === 1\" class=\"h-5 w-5 text-emerald-600\" />\n                </div>\n                <div class=\"mt-1 flex flex-col font-medium text-neutral-900 dark:text-neutral-50 lg:hidden\">\n                  <span class=\"flex items-center gap-1 sm:hidden\">\n                    <span> Volume: {{ formatXchPrice(profile.volume) }} </span>\n                  </span>\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  planIdx === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'lg:text-md hidden w-44 px-3 py-3.5 font-bold text-neutral-900 dark:text-neutral-50 sm:table-cell',\n                ]\"\n              >\n                <div class=\"flex items-center justify-end gap-1\">\n                  <span>\n                    {{ formatXchPrice(profile.volume) }}\n                  </span>\n                </div>\n              </td>\n            </tr>\n          </NuxtLink>\n          <template v-if=\"pending && !profiles?.length\">\n            <tr v-for=\"index in 10\" :key=\"index\" class=\"cursor-pointer hover:bg-emerald-50\">\n              <td\n                :class=\"[\n                  index === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'relative py-4 pl-4 text-sm sm:pl-6',\n                ]\"\n              ></td>\n              <td\n                :class=\"[\n                  index === 0\n                    ? 'border-neutral-300 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'relative py-4 pl-4 text-sm sm:pl-6',\n                ]\"\n              >\n                <div class=\"aspect-h-1 aspect-w-1 group-hover:opacity-75\">\n                  <div class=\"h-full w-full animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800\"></div>\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  index === 0\n                    ? 'border-neutral-300 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'relative py-8 pl-4 pr-3 lg:text-lg',\n                ]\"\n              >\n                <div class=\"flex items-center gap-1 font-semibold text-neutral-900 dark:text-neutral-50\">\n                  <div class=\"h-6 w-3/4 animate-pulse rounded-full bg-neutral-100 dark:bg-neutral-800\"></div>\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  index === 0\n                    ? 'border-neutral-300 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'hidden w-72 px-3 py-3.5 sm:table-cell',\n                ]\"\n              >\n                <div class=\"flex justify-end\">\n                  <div class=\"h-6 w-3/4 animate-pulse rounded-full bg-neutral-100 dark:bg-neutral-800\"></div>\n                </div>\n              </td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n    </div>\n    <div v-if=\"profiles && !props.limit\" ref=\"target\" />\n  </div>\n</template>\n\n<style scoped>\n:deep(.popper) {\n  --popper-theme-background-color: #333333;\n  --popper-theme-background-color-hover: #333333;\n  --popper-theme-text-color: #ffffff;\n  --popper-theme-border-width: 0px;\n  --popper-theme-border-style: solid;\n  --popper-theme-border-radius: 12px;\n  --popper-theme-padding: 4px 8px;\n  --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);\n  font-size: 12px;\n}\n</style>\n"],"names":["props","__props","intervalInDays","toRef","target","ref","profiles","pending","useInfiniteScroll","getApiRoot"],"mappings":"mwDAWA,MAAMA,EAAQC,EASRC,EAAiBC,EAAMH,EAAO,gBAAgB,EAE9CI,EAASC,IACT,CAAE,MAAOC,EAAU,QAAAC,CAAoD,EAAAC,EAC3EJ,EACA,IAAM,GAAGK,EAAY,CAAA,qBAAqBP,EAAe,KAAK,GAC9D,CAACA,CAAc,EACfF,EAAM,OAAS,EAAA"}