initial

apps/client/components/invoices/empty.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="invoices-empty">
+    <img
+      src="/flag.svg"
+      class="mb-40"
+    >
+
+    <h2>
+      {{ $t('your_invoices_will_be_displayed_here.title') }}
+    </h2>
+
+    <h4 class="invoices-empty__text">
+      {{ $t('your_invoices_will_be_displayed_here.content') }}
+    </h4>
+
+    <UiButton
+      size="large"
+      class="mt-40 w-100"
+      :href="`/create/invoice/${id}`"
+    >
+      {{ $t('create_an_invoice') }}
+    </UiButton>
+  </div>
+</template>
+
+<script setup>
+defineProps({ id: { type: String, required: true } })
+
+defineEmits(['create'])
+</script>
+
+<style lang="scss">
+.invoices-empty {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 422px;
+  align-self: center;
+  justify-self: center;
+
+  &__text {
+    color: $clr-grey-400;
+    margin-top: 8px;
+  }
+}
+</style>