pms-iot-vue/src/views/pms/monitor/data-row.vue

<template>
  <div
    style="border-radius: 5px"
    :class="[
      'flex text-[#00d9df] items-center justify-between border-b border-cyan-500/20 hover:bg-cyan-500/10 transition-colors px-2 -mx-2 rounded',
      compact ? 'py-1' : 'py-2'
    ]"
  >
    <span class="text-cyan-200">{{ label }}</span>
    <div class="flex items-center gap-2">
      <span class="font-mono text-white font-bold">{{ value }}</span>
      <button
        v-if="button"
        style="border-radius: 5px"
        :class="[
          'px-3 py-1 rounded text-white text-sm transition-all',
          buttonColor === 'green'
            ? 'bg-green-600 hover:bg-green-500 shadow-[0_0_10px_rgba(22,163,74,0.5)]'
            : 'bg-red-600 hover:bg-red-500 shadow-[0_0_10px_rgba(220,38,38,0.5)]'
        ]"
      >
        {{ button }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  label: string
  value: string
  button?: string
  buttonColor?: 'green' | 'red'
  compact?: boolean
}

withDefaults(defineProps<Props>(), {
  compact: false
})
</script>