<template>
  <div
    :style="[phRowHeight]"
    class="ph-row w-full"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

const DEFAULT_HEIGHT_ROW = '100%'

export default defineComponent({
  name: 'Row',
  props: {
    rowHeight: {
      type: [Number, String],
      default: undefined
    }
  },
  computed: {
    phRowHeight () {
      const height = this.rowHeight || DEFAULT_HEIGHT_ROW
      return {
        height
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.ph-row {
  @apply rounded-xs bg-skeleton-loader;
}
</style>
