SolRengine Starter · solrengine-ui v0.5.0
x
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
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
  <div class="rounded-xl overflow-hidden border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
    <div class="aspect-square bg-gray-100 dark:bg-gray-800 flex items-center justify-center overflow-hidden">
      <img src="https://placehold.co/400x400/9945FF/fff?text=NFT+1" alt="Mad Lad #1234" loading="lazy" class="w-full h-full object-cover">
    </div>
    <div class="px-3 py-2">
      <p class="text-sm font-medium text-gray-900 dark:text-white truncate" title="Mad Lad #1234">Mad Lad #1234</p>
      <div class="flex items-center gap-1.5 mt-0.5">
        <p class="text-xs text-gray-500 dark:text-gray-400 truncate" title="Mad Lads">Mad Lads</p>
      </div>
    </div>
  </div>
  <div class="rounded-xl overflow-hidden border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
    <div class="aspect-square bg-gray-100 dark:bg-gray-800 flex items-center justify-center overflow-hidden">
      <img src="https://placehold.co/400x400/00ff88/000?text=NFT+2" alt="SuperteamTH Genesis" loading="lazy" class="w-full h-full object-cover">
    </div>
    <div class="px-3 py-2">
      <p class="text-sm font-medium text-gray-900 dark:text-white truncate" title="SuperteamTH Genesis">SuperteamTH Genesis</p>
      <div class="flex items-center gap-1.5 mt-0.5">
        <p class="text-xs text-gray-500 dark:text-gray-400 truncate" title="SuperteamTH">SuperteamTH</p>
      </div>
    </div>
  </div>
  <div class="rounded-xl overflow-hidden border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
    <div class="aspect-square bg-gray-100 dark:bg-gray-800 flex items-center justify-center overflow-hidden">
      <img src="https://placehold.co/400x400/1a1a2e/fff?text=cNFT" alt="Compressed Drop #42" loading="lazy" class="w-full h-full object-cover">
    </div>
    <div class="px-3 py-2">
      <p class="text-sm font-medium text-gray-900 dark:text-white truncate" title="Compressed Drop #42">Compressed Drop #42</p>
      <div class="flex items-center gap-1.5 mt-0.5">
        <p class="text-xs text-gray-500 dark:text-gray-400 truncate" title="Workshop Mints">Workshop Mints</p>
        <span class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300">cNFT</span>
      </div>
    </div>
  </div>
  <div class="rounded-xl overflow-hidden border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
    <div class="aspect-square bg-gray-100 dark:bg-gray-800 flex items-center justify-center overflow-hidden">
      <span class="text-2xl text-gray-400 dark:text-gray-600">🖼</span>
    </div>
    <div class="px-3 py-2">
      <p class="text-sm font-medium text-gray-900 dark:text-white truncate" title="No Image NFT">No Image NFT</p>
      <div class="flex items-center gap-1.5 mt-0.5">
      </div>
    </div>
  </div>
</div>
1
render Solrengine::Ui::NftGridComponent.new(nfts: sample_nfts)

No notes provided.

No params configured.