Modals
1 month ago
skeletons
5 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
5 months ago
PluginExpansion.vue
8 months 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
5 months ago
WooCommerceEntriesTable.vue
4 months ago
ActionButtonsSection.vue
44 lines
| 1 | <script setup lang="ts"> |
| 2 | import ActionButton from '@/components/ActionButton.vue'; |
| 3 | |
| 4 | interface ActionButtonData { |
| 5 | icon: HIconUnion; |
| 6 | text: string; |
| 7 | url: string; |
| 8 | } |
| 9 | |
| 10 | interface Props { |
| 11 | buttons: ActionButtonData[]; |
| 12 | } |
| 13 | |
| 14 | const props = defineProps<Props>(); |
| 15 | </script> |
| 16 | |
| 17 | <template> |
| 18 | <div class="action-buttons-section"> |
| 19 | <ActionButton |
| 20 | v-for="button in props.buttons" |
| 21 | :key="button.text" |
| 22 | :icon="button.icon" |
| 23 | :text="button.text" |
| 24 | :url="button.url" |
| 25 | /> |
| 26 | </div> |
| 27 | </template> |
| 28 | |
| 29 | <style scoped lang="scss"> |
| 30 | .action-buttons-section { |
| 31 | display: flex; |
| 32 | justify-content: stretch; |
| 33 | align-items: stretch; |
| 34 | align-self: stretch; |
| 35 | gap: 8px; |
| 36 | } |
| 37 | |
| 38 | @media (max-width: 1023px) { |
| 39 | .action-buttons-section { |
| 40 | flex-direction: column; |
| 41 | } |
| 42 | } |
| 43 | </style> |
| 44 |