dialog header for middleware

app/components/SignInDialogHeader.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="flex items-center gap-2 p-0 text-warn-600 dark:text-warn-500">
+    <Icon
+      name="ph:warning-circle-fill"
+      size="1.375rem"
+    />
+
+    <div class="text-lg font-semibold">
+      You&rsquo;ll need to sign in before doing that.
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped></style>