| 684 | } |
| 685 | |
| 686 | function Assets() { |
| 687 | return ( |
| 688 | <div |
| 689 | role="group" |
| 690 | aria-label="Assets" |
| 691 | className={style({ |
| 692 | padding: 16, |
| 693 | boxSizing: 'border-box', |
| 694 | height: 'full', |
| 695 | display: 'flex', |
| 696 | flexDirection: 'column' |
| 697 | })}> |
| 698 | <div className={style({font: 'title-lg'})}>Assets</div> |
| 699 | <div |
| 700 | className={style({ |
| 701 | display: 'grid', |
| 702 | gridTemplateColumns: `repeat(auto-fit, minmax(${size(96)}, 1fr))`, |
| 703 | gridAutoRows: 'max-content', |
| 704 | justifyContent: 'space-between', |
| 705 | gap: 12, |
| 706 | margin: -16, |
| 707 | marginTop: 0, |
| 708 | padding: 16, |
| 709 | flexGrow: 1, |
| 710 | minHeight: 0, |
| 711 | overflow: 'auto' |
| 712 | })}> |
| 713 | <SkeletonCard /> |
| 714 | <SkeletonCard /> |
| 715 | <SkeletonCard /> |
| 716 | <SkeletonCard /> |
| 717 | <SkeletonCard /> |
| 718 | <SkeletonCard /> |
| 719 | <SkeletonCard /> |
| 720 | <SkeletonCard /> |
| 721 | <SkeletonCard /> |
| 722 | <SkeletonCard /> |
| 723 | <SkeletonCard /> |
| 724 | <SkeletonCard /> |
| 725 | <SkeletonCard /> |
| 726 | <SkeletonCard /> |
| 727 | <SkeletonCard /> |
| 728 | </div> |
| 729 | </div> |
| 730 | ); |
| 731 | } |