feat: schema builder's create flow

web/src/components/DirectoryLoadError.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { t } from '@/i18n'
+import RetryAlert from '@/components/RetryAlert.vue'
 
 defineProps<{ title: string; description?: string }>()
 
@@ -7,28 +8,9 @@ defineEmits<{ retry: [] }>()
 </script>
 
 <template>
-	<UAlert
-		role="alert"
-		color="error"
-		variant="soft"
-		orientation="vertical"
-		:close="false"
-		icon="i-lucide-circle-x"
+	<RetryAlert
 		:title="title"
 		:description="description ?? t('Check your connection and try again.')"
-		:ui="{ actions: 'mt-2' }"
-	>
-		<template #actions>
-			<UButton
-				color="neutral"
-				variant="outline"
-				icon="i-lucide-rotate-cw"
-				class="h-11 gap-1.5 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 md:h-8"
-				:ui="{ leadingIcon: 'size-3.5' }"
-				@click="$emit('retry')"
-			>
-				{{ t('Try again') }}
-			</UButton>
-		</template>
-	</UAlert>
+		@retry="$emit('retry')"
+	/>
 </template>