<script setup>
defineProps({
  items: Array,
  command: Function,
});
</script>

<template>
  <div class="slash-menu">
    <button v-for="item in items" :key="item.title" @click="command(item)">
      {{ item.title }}
    </button>
  </div>
</template>

<style scoped>
.slash-menu {
  background: white;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.slash-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: right;
  border-radius: 6px;
}

.slash-menu button:hover {
  background: #f5f5f5;
}
</style>
