nft-gallery/components/profile/CuratedDrops.vue at 7f47d70fd25c31abb04e090a266262355749945a · kodadot/nft-gallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<template>
  <div
    v-if="!(loaded && !drops?.length)"
    class="pt-6 pb-7 md:!pb-16 max-sm:mx-5 mx-12 2xl:mx-auto border-b border-neutral-5 dark:border-neutral-9 max-w-[89rem]"
  >
    <div class="flex flex-col gap-8 w-full">
      <div
        v-if="loaded"
        class="flex flex-wrap items-center max-md:gap-2 justify-between"
      >
        <div class="flex gap-2 items-center">
          <p class="text-xl font-bold">
            {{ $t('profiles.curatedGenerativDrops.title') }}
          </p>

          <KIcon
            name="i-mdi:check"
            class="text-k-accent"
          />
        </div>

        <NeoTooltip
          :label="$t('profiles.curatedGenerativDrops.explainHowThisWorks')"
          position="auto"
          multiline
          multiline-width="256px"
        >
          <p class="text-neutral-7 text-sm capitalize">
            {{ $t('profiles.curatedGenerativDrops.howThisWorks') }}
          </p>
        </NeoTooltip>
      </div>

      <div
        v-else
        class="flex justify-between items-center"
      >
        <div class="flex gap-2">
          <div class="w-[255] h-[24]">
            <NeoSkeleton
              width="255"
              height="24"
              :rounded="false"
              no-margin
            />
          </div>
          <div class="!w-4">
            <NeoSkeleton
              width="16"
              rounded
              circle
              no-margin
            />
          </div>
        </div>
        <div>
          <NeoSkeleton
            width="120"
            height="14"
            :rounded="false"
            no-margin
          />
        </div>
      </div>

      <DynamicGrid
        grid-size="medium"
        persist
        :default-width="{ medium: DROP_CARD_MIN_WIDTH, small: 0, large: 0 }"
      >
        <DropsDropItem
          v-for="drop in drops"
          :key="drop.id"
          :drop="drop"
          :show-minted="true"
        />
      </DynamicGrid>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { NeoSkeleton, NeoTooltip } from '@kodadot1/brick'
import { useQuery } from '@tanstack/vue-query'
import { getDrops } from '@/services/fxart'

const props = defineProps<{
  id: string
}>()

const { urlPrefix } = usePrefix()

const { data: drops, isSuccess: loaded } = useQuery({
  queryKey: ['drop-items-curated', urlPrefix.value],
  queryFn: () => getDrops({
    active: [true, false],
    chain: [urlPrefix.value],
    creator: props.id,
  }),
})
</script>