Initial commit: Import existing Laravel project

resources/js/Components/StatusBadge.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    status: {
+        type: String,
+        required: true,
+    },
+});
+
+const config = computed(() => {
+    switch (props.status) {
+        case 'draft':
+            return {
+                label: 'Brouillon',
+                classes: 'bg-slate-100 text-slate-800 border-slate-200 dark:bg-slate-900/50 dark:text-slate-300 dark:border-slate-800',
+            };
+        case 'validated':
+            return {
+                label: 'Validée',
+                classes: 'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-950/50 dark:text-sky-300 dark:border-sky-900',
+            };
+        case 'ordered':
+            return {
+                label: 'Commandée',
+                classes: 'bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:border-amber-900',
+            };
+        case 'delivered':
+            return {
+                label: 'Livrée',
+                classes: 'bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300 dark:border-emerald-900',
+            };
+        case 'closed':
+            return {
+                label: 'Clôturée',
+                classes: 'bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-950/50 dark:text-purple-300 dark:border-purple-900',
+            };
+        default:
+            return {
+                label: props.status,
+                classes: 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-750',
+            };
+    }
+});
+</script>
+
+<template>
+    <span
+        :class="`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border ${config.classes}`"
+    >
+        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-current"></span>
+        {{ config.label }}
+    </span>
+</template>