Copy

<script setup lang="ts">
import type { HoneypotEvent } from "src/types";

const props = defineProps<{
  evt: HoneypotEvent;
}>();

const emit = defineEmits<{
  "field-click": [event: MouseEvent, key: string, value: string];
}>();
</script>

<template>
  <button
    v-if="evt.fields?.from"
    @click="emit('field-click', $event, 'from', evt.fields.from as string)"
  >
    <span>From:</span>
    <strong>{{ evt.fields.from }}</strong>
  </button>
  <button
    v-if="evt.fields?.to"
    @click="emit('field-click', $event, 'to', evt.fields.to as string)"
  >
    <span>To:</span>
    <strong>{{ evt.fields.to }}</strong>
  </button>
  <button
    v-if="evt.fields?.commands"
    @click="
      emit('field-click', $event, 'commands', evt.fields.commands as string)
    "
  >
    <span>Commands:</span>
    {{ evt.fields.commands }}
  </button>
  <button
    v-if="evt.fields?.data"
    @click="emit('field-click', $event, 'data', evt.fields.data as string)"
  >
    <span>Data:</span>
    {{ evt.fields.data }}
  </button>
</template>