hereconnect/apps/frontend/src/components/create/CreatePlacementSection.vue

<template>
  <section>
    <h2 class="text-xl font-semibold mb-4">Где вы хотите разместить QR‑код?</h2>
    <p class="text-gray-600 mb-4">Этот выбор поможет настроить QR‑код с подходящими действиями.</p>
    <div class="flex flex-col gap-3 mb-4">
      <div v-for="{ label, type } in qrCodePlacements" :key="type" class="flex items-center gap-2">
        <RadioButton
          v-model="selectedPlacement"
          :inputId="type"
          name="placement"
          :value="type"
          @change="$emit('nextStep')"
        />
        <label :for="type">{{ label }}</label>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { qrCodePlacements } from '@/constants/qrCodePlacements'
import type { QRCodeDocument } from '@/types/DBDocumentTypes'
const selectedPlacement = defineModel<null | QRCodeDocument['placement']>()

defineEmits(['nextStep'])
</script>