move to nuxt

frontend/components/Base/ActionsDivider.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="relative">
+    <div class="absolute inset-0 flex items-center" aria-hidden="true">
+      <div class="w-full border-t border-primary" />
+    </div>
+    <div class="relative flex justify-center">
+      <span class="isolate inline-flex -space-x-px rounded-md shadow-sm">
+        <div class="btn-group">
+          <button @click="$emit('edit')" name="options" class="btn btn-sm btn-primary">
+            <Icon name="heroicons-pencil" class="h-5 w-5 mr-1" aria-hidden="true" />
+            <span> Edit </span>
+          </button>
+          <button @click="$emit('delete')" name="options" class="btn btn-sm btn-primary">
+            <Icon name="heroicons-trash" class="h-5 w-5 mr-1" aria-hidden="true" />
+            <span> Delete </span>
+          </button>
+        </div>
+      </span>
+    </div>
+  </div>
+</template>

frontend/components/Base/Button.vue

@@ -0,0 +1,24 @@
+<template>
+  <button
+    :disabled="disabled || loading"
+    class="btn"
+    :class="{
+      loading: loading,
+    }"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  });
+</script>

frontend/components/Base/Container.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+  defineProps({
+    is: {
+      type: String,
+      default: 'div',
+    },
+  });
+</script>
+
+<template>
+  <component :is="is" class="container max-w-6xl mx-auto px-4">
+    <slot />
+  </component>
+</template>

frontend/components/Base/Details.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="overflow-hidden card bg-base-100 shadow-xl sm:rounded-lg">
+    <div class="px-4 py-5 sm:px-6 bg-neutral">
+      <h3 class="text-lg font-medium leading-6 text-neutral-content">
+        <slot name="title"></slot>
+      </h3>
+      <p v-if="$slots.subtitle" class="mt-1 max-w-2xl text-sm text-gray-500">
+        <slot name="subtitle"></slot>
+      </p>
+    </div>
+    <div class="border-t border-gray-300 px-4 py-5 sm:p-0">
+      <dl class="sm:divide-y sm:divide-gray-300">
+        <div v-for="(dValue, dKey) in details" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-500">
+            {{ dKey }}
+          </dt>
+          <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+            {{ dValue }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  type StringLike = string | number | boolean;
+
+  defineProps({
+    details: {
+      type: Object as () => Record<string, StringLike>,
+      required: true,
+    },
+  });
+</script>
+
+<style scoped></style>

frontend/components/Base/Modal.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="z-[9999]">
+    <input type="checkbox" :id="modalId" class="modal-toggle" v-model="modal" />
+    <div class="modal">
+      <div class="modal-box relative">
+        <button @click="close" :for="modalId" class="btn btn-sm btn-circle absolute right-2 top-2">✕</button>
+
+        <h3 class="font-bold text-lg">
+          <slot name="title"></slot>
+        </h3>
+        <slot> </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const emit = defineEmits(['cancel', 'update:modelValue']);
+  const props = defineProps({
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    /**
+     * in readonly mode the modal only `emits` a "cancel" event to indicate
+     * that the modal was closed via the "x" button. The parent component is
+     * responsible for closing the modal.
+     */
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  function close() {
+    if (props.readonly) {
+      emit('cancel');
+      return;
+    }
+    modal.value = false;
+  }
+
+  const modalId = useId();
+  const modal = useVModel(props, 'modelValue', emit);
+</script>

frontend/components/Base/SectionHeader.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="border-b border-base-200 pb-3">
+    <h3 class="text-xl font-medium leading-4 text-base-content">
+      <slot />
+    </h3>
+    <p v-if="$slots.description" class="mt-2 max-w-4xl text-sm text-gray-500">
+      <slot name="description" />
+    </p>
+  </div>
+</template>