Modals
9 months ago
skeletons
10 months ago
ActionButton.vue
10 months ago
ActionButtonsSection.vue
10 months ago
Banner.vue
10 months ago
FAQ.vue
10 months ago
FormItem.vue
10 months ago
FormsSection.vue
10 months ago
Hero.vue
9 months ago
PluginEntriesTable.vue
10 months ago
PluginEntry.vue
10 months ago
PluginExpansion.vue
10 months ago
Toggle.vue
10 months ago
UsageCard.vue
10 months ago
UsageCardsRow.vue
10 months ago
UsageCardsSection.vue
10 months ago
ActionButtonsSection.vue
44 lines
| 1 | <script setup lang="ts"> |
| 2 | import ActionButton from '@/components/ActionButton.vue'; |
| 3 | |
| 4 | interface ActionButtonData { |
| 5 | icon: string; |
| 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 |