Init

docs/design-examples/components/ExperimentaStatusMessage.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * ExperimentaStatusMessage Component
+ *
+ * Status message component with animated icon.
+ * Used for success, error, warning, and info states.
+ *
+ * @example
+ * <ExperimentaStatusMessage type="success" title="Erfolg!">
+ *   Ihre Aktion war erfolgreich.
+ * </ExperimentaStatusMessage>
+ *
+ * <ExperimentaStatusMessage type="error" title="Fehler">
+ *   Ein Fehler ist aufgetreten.
+ * </ExperimentaStatusMessage>
+ */
+
+interface Props {
+  /** Status type */
+  type: 'success' | 'error' | 'warning' | 'info'
+  /** Status title */
+  title?: string
+  /** Custom icon (overrides default) */
+  icon?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: undefined,
+})
+
+// Default icons for each type
+const defaultIcons = {
+  success: '✓',
+  error: '✖',
+  warning: '!',
+  info: 'i',
+}
+
+const displayIcon = computed(() => props.icon || defaultIcons[props.type])
+</script>
+
+<template>
+  <div class="status-message">
+    <!-- Animated Status Icon -->
+    <div :class="['status-icon', `status-icon-${type}`]" role="img" :aria-label="`${type} icon`">
+      {{ displayIcon }}
+    </div>
+
+    <!-- Title -->
+    <h1 v-if="title || $slots.title" class="status-title">
+      <slot name="title">{{ title }}</slot>
+    </h1>
+
+    <!-- Message Content -->
+    <div class="status-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Status Message Container */
+.status-message {
+  @apply text-center;
+}
+
+/* Status Icon */
+.status-icon {
+  @apply flex items-center justify-center;
+  @apply w-25 h-25 rounded-full;
+  @apply text-6xl text-white;
+  @apply mb-8 mx-auto;
+  @apply animate-pulse;
+}
+
+/* Icon Colors by Type */
+.status-icon-success {
+  @apply bg-success;
+}
+
+.status-icon-error {
+  @apply bg-error;
+}
+
+.status-icon-warning {
+  @apply bg-warning;
+}
+
+.status-icon-info {
+  @apply bg-info;
+}
+
+/* Responsive Icon Size */
+@media (max-width: 480px) {
+  .status-icon {
+    @apply text-5xl;
+  }
+}
+
+/* Status Title */
+.status-title {
+  @apply text-4xl md:text-3xl sm:text-2xl;
+  @apply font-light tracking-tight;
+  @apply mb-8;
+  @apply text-white;
+}
+
+/* Status Content */
+.status-content {
+  @apply text-lg md:text-base sm:text-sm;
+  @apply text-white/90;
+  @apply leading-relaxed;
+}
+
+/* Pulse Animation Override (Custom) */
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+</style>