Modals
1 month ago
skeletons
4 months ago
ActionButton.vue
5 months ago
ActionButtonsSection.vue
5 months ago
Banner.vue
3 months ago
FAQ.vue
5 months ago
FormItem.vue
2 months ago
FormsSection.vue
11 months ago
Hero.vue
1 month ago
Integrations.vue
4 months ago
Pagination.vue
10 months ago
PluginEntriesTable.vue
4 months ago
PluginEntry.vue
4 months ago
PluginExpansion.vue
8 months ago
ReachContactsSummary.vue
2 weeks ago
SyncStatusLabel.vue
6 months ago
Tabs.vue
9 months ago
Toggle.vue
10 months ago
UsageCard.vue
10 months ago
UsageCardsRow.vue
1 year ago
UsageCardsSection.vue
1 year ago
WooCommerce.vue
2 weeks ago
WooCommerceEntriesTable.vue
4 months ago
SyncStatusLabel.vue
62 lines
| 1 | <script setup lang="ts"> |
| 2 | import { HIcon } from '@hostinger/hcomponents'; |
| 3 | import { computed } from 'vue'; |
| 4 | |
| 5 | import type { ImportStatusType, StatusIcon } from '@/types'; |
| 6 | import { IMPORT_STATUSES } from '@/types'; |
| 7 | import { translate } from '@/utils/translate'; |
| 8 | |
| 9 | interface Props { |
| 10 | enabled: boolean; |
| 11 | status: ImportStatusType; |
| 12 | } |
| 13 | |
| 14 | const props = defineProps<Props>(); |
| 15 | const getStatusIcon = computed((): StatusIcon => { |
| 16 | switch (props.status) { |
| 17 | case IMPORT_STATUSES.IMPORTED: |
| 18 | return { icon: 'ic-checkmark-circle-filled-16', color: 'success--500' }; |
| 19 | case IMPORT_STATUSES.IMPORTING: |
| 20 | return { icon: 'ic-arrows-circle-16', color: 'neutral--300' }; |
| 21 | case IMPORT_STATUSES.NOT_IMPORTED: |
| 22 | return { icon: 'ic-warning-circle-filled-16', color: 'neutral--300' }; |
| 23 | default: |
| 24 | return { icon: 'ic-half-filled-circle-16', color: 'neutral--300' }; |
| 25 | } |
| 26 | }); |
| 27 | </script> |
| 28 | |
| 29 | <template> |
| 30 | <span class="status-content" :data-status="props.status" :data-availabe="props.enabled"> |
| 31 | <HIcon |
| 32 | v-if="props.enabled && props.status !== IMPORT_STATUSES.OFF" |
| 33 | :name="getStatusIcon.icon" |
| 34 | :color="getStatusIcon.color" |
| 35 | /> |
| 36 | {{ |
| 37 | props.enabled |
| 38 | ? translate(`hostinger_reach_contacts_${props.status}`) |
| 39 | : translate('hostinger_reach_contacts_not_available') |
| 40 | }} |
| 41 | </span> |
| 42 | </template> |
| 43 | |
| 44 | <style scoped lang="scss"> |
| 45 | .status-content { |
| 46 | display: flex; |
| 47 | align-items: center; |
| 48 | gap: 5px; |
| 49 | |
| 50 | &[data-availabe='false']='false'] { |
| 51 | color: var(--neutral--300); |
| 52 | opacity: 0.7; |
| 53 | } |
| 54 | |
| 55 | &[data-status='importing']='importing'] { |
| 56 | svg { |
| 57 | animation: spin 2.5s linear infinite; |
| 58 | } |
| 59 | } |
| 60 | } |
| 61 | </style> |
| 62 |