33 lines
866 B
Vue
33 lines
866 B
Vue
<script setup lang="ts">
|
|
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
|
|
import type { ButtonSize } from '#layers/types/components/button'
|
|
|
|
const props = defineProps<{
|
|
groupsData: PageDataResourceGroup[]
|
|
}>()
|
|
|
|
const breakpoints = useResponsiveBreakpoints()
|
|
|
|
const buttonSize = computed<ButtonSize>(() => {
|
|
return breakpoints.md.value ? 'medium' : 'extra-small'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="props.groupsData"
|
|
class="flex flex-wrap justify-center gap-3 sm:gap-4"
|
|
>
|
|
<AtomsButton
|
|
v-for="button in props.groupsData"
|
|
:key="button.group_code"
|
|
:size="buttonSize"
|
|
:background-color="button.btn_info?.color_code_btn"
|
|
:text-color="button.btn_info?.color_code_txt"
|
|
:disabled="button.btn_info?.disabled"
|
|
>
|
|
{{ button.btn_info?.txt_btn_name }}
|
|
</AtomsButton>
|
|
</div>
|
|
</template>
|