feat(SPA): media page T0

web/src/components/OfflineBanner.vue

@@ -1,6 +1,26 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 
+const DEFAULT_MESSAGE =
+	"You're offline. You can keep writing, but saving and publishing will wait until you're back online."
+
+const BLEED_UI = {
+	root: 'w-auto -mx-4 -mt-4 mb-4 lg:-mx-6 lg:-mt-6 lg:mb-6',
+	container: 'h-auto min-h-10 max-w-none justify-start gap-2.5 px-4 py-2.5 sm:px-4 lg:px-4',
+	left: 'hidden lg:hidden',
+	icon: 'size-4',
+	title: 'whitespace-normal font-normal text-wrap',
+}
+
+withDefaults(
+	defineProps<{
+		message?: string
+		icon?: string
+		bleed?: boolean
+	}>(),
+	{ message: DEFAULT_MESSAGE, icon: undefined, bleed: false },
+)
+
 const isOffline = ref(!navigator.onLine)
 
 function updateOnlineStatus() {
@@ -22,6 +42,8 @@ onUnmounted(() => {
 	<UBanner
 		v-if="isOffline"
 		color="neutral"
-		title="You're offline. You can keep writing, but saving and publishing will wait until you're back online."
+		:icon="icon"
+		:title="message"
+		:ui="bleed ? BLEED_UI : undefined"
 	/>
 </template>