<template>
  <div class="ui-adding-panel">
    <q-icon name="la la-plus-square" color="blue-grey-1" size="88px" />
    <div class="text-h2 ui-adding-panel__title q-mb-md">{{ title }}</div>
    <ui-btn @click="submit" size="lg" :label="submitLabel" />
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import UiBtn from '../buttons/UiBtn.vue'
import { QIcon } from 'quasar'

@Component({
  components: { UiBtn, QIcon },
  inheritAttrs: false,
})
export default class UiAddingPanel extends Vue {
  @Prop({ type: String, required: true }) title!: string
  @Prop({ type: String, required: true }) submitLabel!: string

  @Emit()
  submit() {
    return true
  }
}
</script>
