-
Notifications
You must be signed in to change notification settings - Fork 103
/
NftMediaContainer.svelte
73 lines (68 loc) · 2.28 KB
/
NftMediaContainer.svelte
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
<script lang="typescript">
import { selectedAccountIndex } from '@core/account'
import { getNftByIdFromAllAccountNfts } from '@core/nfts'
import { NftMediaSize, NftPlaceholderIcon } from 'shared/components'
export let size: NftMediaSize = NftMediaSize.Medium
export let nftId: string
export let shape: 'square' | 'circle' | 'squircle' = 'squircle'
$: nft = getNftByIdFromAllAccountNfts($selectedAccountIndex, nftId)
let width
let height
let radius
let padding
$: size, setShapeAndSize()
function setShapeAndSize(): void {
switch (size) {
case NftMediaSize.ExtraSmall:
width = 6
height = 6
// squircle or circle
radius = shape === 'squircle' ? 'md' : 'full'
padding = 2
break
case NftMediaSize.Small:
width = 8
height = 8
// squircle or circle
radius = shape === 'squircle' ? 'lg' : 'full'
padding = 2
break
case NftMediaSize.Medium:
width = 20
height = 20
// squircle or circle
radius = shape === 'squircle' ? 'xl' : 'full'
padding = 2
break
case NftMediaSize.Large:
width = 60
height = 60
// squircle or circle
radius = shape === 'squircle' ? '2xl' : 'full'
padding = 2
break
case NftMediaSize.ExtraLarge:
width = 96
height = 9
// squircle or circle
radius = shape === 'squircle' ? '2xl' : 'full'
break
}
// if square remove radius
radius = shape === 'square' ? 'none' : radius
}
const isLoaded = false
</script>
<div class="flex w-full items-center justify-center">
<div
class="flex justify-center items-center transition-none p-{padding} bg-gray-500 w-{width} h-{height} rounded-{radius} "
>
{#if !isLoaded}
<NftPlaceholderIcon {nft} />
{:else}
<div>
<!-- Loaded and Secure NFT Media -->
</div>
{/if}
</div>
</div>