frequi_origin/src/components/general/ValuePair.vue

<template>
  <div class="d-flex">
    <div class="d-flex justify-content-between me-2" :class="classLabel">
      <label>{{ description }}</label>
      <InfoBox v-if="help" :hint="help" />
    </div>
    <div :class="classValue">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import InfoBox from '@/components/general/InfoBox.vue';

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ValuePair',
  components: { InfoBox },
  props: {
    description: { type: String, required: true },
    help: { type: String, default: '', required: false },
    classLabel: { type: String, default: 'col-4 fw-bold mb-0' },
    classValue: { type: String, default: 'col-8' },
  },
});
</script>

<style scoped></style>