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>
    {{ evt.fields.from }}
  </button>
  <button
    v-if="evt.fields?.to"
    @click="emit('field-click', $event, 'to', evt.fields.to as string)"
  >
    <span>To:</span>
    {{ evt.fields.to }}
  </button>
  <button
    v-if="evt.fields?.uri"
    @click="emit('field-click', $event, 'uri', evt.fields.uri as string)"
  >
    <span>URI:</span>
    {{ evt.fields.uri }}
  </button>
</template>