initial

apps/client/components/page-form.vue

@@ -0,0 +1,77 @@
+<template>
+  <form
+    class="page-form"
+    @submit="onSubmit"
+  >
+    <UiButton
+      icon="chevron-left"
+      color="secondary"
+      type="link"
+      class="mb-8"
+      :href="backLink"
+    >
+      {{ backText }}
+    </UiButton>
+
+    <slot name="title">
+      <h1 :class="titleOffset ? 'mb-32' : ''">
+        {{ title }}
+      </h1>
+    </slot>
+
+    <div class="page-form__summary">
+      <StaticError class="mb-16" />
+
+      <slot />
+    </div>
+
+    <slot name="submit" v-bind="{ isSubmitting }">
+      <UiButton
+        class="page-form__submit"
+        size="large"
+        native-type="submit"
+        :loading="isSubmitting"
+      >
+        {{ submitText }}
+      </UiButton>
+    </slot>
+  </form>
+</template>
+
+<script setup>
+import { useForm } from 'vee-validate'
+
+const props = defineProps({
+  title: { type: String, required: true },
+  backLink: { type: String, required: true },
+  backText: { type: String, required: true },
+  submitText: { type: String, required: true },
+  titleOffset: { type: Boolean, default: true },
+  handler: {
+    type: Function,
+    required: true,
+  },
+})
+
+const { handleSubmit, isSubmitting } = useForm()
+
+const onSubmit = handleSubmit(async (values) => {
+  await props.handler(values)
+})
+</script>
+
+<style lang="scss">
+.page-form {
+  margin: 0 auto;
+  width: 500px;
+
+  &__summary {
+    padding-top: var(--page-form-padding-top, 24px);
+    padding-bottom: var(--page-form-padding-bottom, 16px);
+  }
+
+  &__submit {
+    width: 100%;
+  }
+}
+</style>