first functionable

src/components/MethodBadge.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  method: string;
+}>();
+
+const colors = computed(() => {
+  switch (props.method.toUpperCase()) {
+    case 'GET': return 'bg-sky-500/20 text-sky-400 border-sky-500/30';
+    case 'POST': return 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30';
+    case 'PUT': return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
+    case 'DELETE': return 'bg-rose-500/20 text-rose-400 border-rose-500/30';
+    case 'PATCH': return 'bg-violet-500/20 text-violet-400 border-violet-500/30';
+    default: return 'bg-slate-500/20 text-slate-400 border-slate-500/30';
+  }
+});
+</script>
+
+<template>
+  <span 
+    class="px-2 py-0.5 text-xs font-bold rounded border backdrop-blur-sm uppercase tracking-wider select-none"
+    :class="colors"
+  >
+    {{ method }}
+  </span>
+</template>