add badge

Author: VovaStelmashchuk

app/components/MainBadge.vue

@@ -0,0 +1,34 @@
+<template>
+    <span :class="[
+        'inline-flex items-center justify-center rounded-lg',
+        'px-3 py-1 text-sm font-semibold',
+        variantClasses[variant],
+    ]" :style="variantStyles[variant]">
+        {{ label }}
+        <slot />
+    </span>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    label?: string
+    variant?: 'info' | 'success' | 'error'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    label: '',
+    variant: 'info',
+})
+
+const variantClasses = {
+    info: 'bg-accent-primary text-background-primary',
+    success: '',
+    error: '',
+}
+
+const variantStyles = {
+    info: {},
+    success: { backgroundColor: '#16a34a', color: '#ffffff' }, // green-600
+    error: { backgroundColor: '#dc2626', color: '#ffffff' }, // red-600
+}
+</script>

app/pages/design/badges.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="min-h-screen bg-background-primary">
+        <div class="container mx-auto px-6 py-16">
+            <h1 class="text-4xl font-bold mb-8 text-accent-primary">
+                Сторінка показує всі бейджі які є в дизайн системі сайту
+            </h1>
+
+            <div class="space-y-12">
+                <div v-for="variant in badgeVariants" :key="variant.name" class="space-y-6">
+                    <h2 class="text-2xl font-semibold text-accent-primary">
+                        {{ variant.label }}
+                    </h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div v-for="example in badgeExamples" :key="`${variant.name}-${example.label}`" class="p-6">
+                            <div class="flex flex-col gap-4">
+                                <div class="text-center">
+                                    <h3 class="text-lg font-medium mb-2 text-accent-primary">
+                                        {{ example.label }}
+                                    </h3>
+                                    <MainBadge :variant="variant.name" :label="example.text" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mt-16 p-8 bg-fill-secondary rounded-xl border border-separator-primary">
+                <h2 class="text-2xl font-bold mb-6 text-accent-primary">
+                    Badge Examples
+                </h2>
+                <div class="flex flex-wrap gap-4 items-center">
+                    <MainBadge variant="info" label="Info Badge" />
+                    <MainBadge variant="success" label="Success Badge" />
+                    <MainBadge variant="error" label="Error Badge" />
+                    <MainBadge variant="info" label="New" />
+                    <MainBadge variant="success" label="Active" />
+                    <MainBadge variant="error" label="Inactive" />
+                    <MainBadge variant="info" label="Pending" />
+                    <MainBadge variant="success" label="Completed" />
+                    <MainBadge variant="error" label="Failed" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { trackEvent } from '~~/app/utils/track'
+
+onMounted(() => {
+    trackEvent('page_view', { page: 'design_sandbox_badges' })
+})
+
+const badgeVariants = [
+    { name: 'info' as const, label: 'Info' },
+    { name: 'success' as const, label: 'Success' },
+    { name: 'error' as const, label: 'Error' },
+]
+
+const badgeExamples = [
+    { label: 'Short Text', text: 'Badge' },
+    { label: 'Medium Text', text: 'Status Badge' },
+    { label: 'Long Text', text: 'Very Long Badge Text' },
+    { label: 'Number', text: '42' },
+]
+</script>

app/pages/electricity/[slug].vue

@@ -13,11 +13,10 @@
         <div class="w-full grid gap-4 md:grid-cols-3">
             <div class="bg-fill-secondary p-4 rounded-xl border border-separator-primary md:col-span-2">
                 <div class="flex items-center gap-3 mb-2">
-                    <span :class="[
-                        'inline-flex items-center gap-2 text-sm font-semibold px-3 py-1 rounded-full border',
-                    ]">
-                        {{ currentStatus === 'online' ? 'Online' : 'Offline' }}
-                    </span>
+                    <MainBadge
+                        :variant="currentStatus === 'online' ? 'success' : 'error'"
+                        :label="currentStatus === 'online' ? 'світло є' : 'світла немає'"
+                    />
                 </div>
                 <p class="text-sm text-label-secondary">
                     Last seen: {{ formatDate(data?.current.lastAliveAt) }}