PluginEntrySkeleton.vue
5 months ago
PluginIntegrationSkeleton.vue
1 year ago
PluginsSectionSkeleton.vue
10 months ago
PluginsSectionSkeleton.vue
84 lines
| 1 | <script lang="ts" setup> |
| 2 | import { HSkeletonLoader } from '@hostinger/hcomponents'; |
| 3 | |
| 4 | const SKELETON_COUNT = 3; |
| 5 | </script> |
| 6 | |
| 7 | <template> |
| 8 | <div class="plugins-section-skeleton"> |
| 9 | <div class="plugins-section-skeleton__toggle"> |
| 10 | <HSkeletonLoader width="160px" height="32px" border-radius="sm" /> |
| 11 | </div> |
| 12 | |
| 13 | <div class="plugins-section-skeleton__list"> |
| 14 | <div v-for="i in SKELETON_COUNT" :key="`skeleton-${i}`" class="plugins-section-skeleton__item"> |
| 15 | <div class="plugins-section-skeleton__item-info"> |
| 16 | <div class="plugins-section-skeleton__item-icon"> |
| 17 | <HSkeletonLoader width="40px" height="40px" border-radius="sm" /> |
| 18 | </div> |
| 19 | <div class="plugins-section-skeleton__item-details"> |
| 20 | <HSkeletonLoader width="120px" height="16px" border-radius="sm" /> |
| 21 | <HSkeletonLoader width="80px" height="14px" border-radius="sm" /> |
| 22 | </div> |
| 23 | </div> |
| 24 | <div class="plugins-section-skeleton__item-actions"> |
| 25 | <HSkeletonLoader width="60px" height="24px" border-radius="lg" /> |
| 26 | <HSkeletonLoader width="80px" height="32px" border-radius="sm" /> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | </div> |
| 31 | </template> |
| 32 | |
| 33 | <style lang="scss" scoped> |
| 34 | .plugins-section-skeleton { |
| 35 | display: flex; |
| 36 | flex-direction: column; |
| 37 | gap: 16px; |
| 38 | |
| 39 | &__toggle { |
| 40 | display: flex; |
| 41 | justify-content: center; |
| 42 | } |
| 43 | |
| 44 | &__list { |
| 45 | display: flex; |
| 46 | flex-direction: column; |
| 47 | gap: 12px; |
| 48 | } |
| 49 | |
| 50 | &__item { |
| 51 | display: flex; |
| 52 | align-items: center; |
| 53 | justify-content: space-between; |
| 54 | padding: 16px; |
| 55 | background: var(--neutral--0); |
| 56 | border: 1px solid var(--neutral--200); |
| 57 | border-radius: 12px; |
| 58 | } |
| 59 | |
| 60 | &__item-info { |
| 61 | display: flex; |
| 62 | align-items: center; |
| 63 | gap: 12px; |
| 64 | } |
| 65 | |
| 66 | &__item-icon { |
| 67 | flex-shrink: 0; |
| 68 | } |
| 69 | |
| 70 | &__item-details { |
| 71 | display: flex; |
| 72 | flex-direction: column; |
| 73 | gap: 4px; |
| 74 | } |
| 75 | |
| 76 | &__item-actions { |
| 77 | display: flex; |
| 78 | align-items: center; |
| 79 | gap: 12px; |
| 80 | flex-shrink: 0; |
| 81 | } |
| 82 | } |
| 83 | </style> |
| 84 |