Merge pull request #12 from livraison-dev/tabs

feat: add method tabs

components/details/Details.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const activeTab = ref()
+
+const tabs = computed(() => {
+  const items = []
+  items.push({
+    name: 'Params',
+    slug: 'params',
+    length: 0,
+  })
+  items.push({
+    name: 'Query',
+    slug: 'query',
+    length: 0,
+  })
+  items.push({
+    name: 'Body',
+    slug: 'body',
+    length: 0,
+  })
+  items.push({
+    name: 'Headers',
+    slug: 'headers',
+    length: 0,
+  })
+  items.push({
+    name: 'Cookies',
+    slug: 'cookies',
+    length: 0,
+  })
+  return items
+})
+</script>
+
+<template>
+  <div flex="~ gap2 wrap" w-full items-center px4 pb2 text-center text-sm border="b" class="app-border-base">
+    <ButtonBase
+      v-for="tab of tabs"
+      :key="tab.slug"
+      :class="activeTab === tab.slug ? 'text-primary app-primary' : 'border-transparent shadow-none'"
+      @click="activeTab = tab.slug"
+    >
+      <Icon class="app-icon" :name="ServerRouteTabIcons[tab.slug]" />
+      <div class="hidden md:block">
+        {{ tab.name }}
+        {{ tab?.length ? `(${tab.length})` : '' }}
+      </div>
+    </ButtonBase>
+  </div>
+</template>

composables/constants.ts

@@ -0,0 +1,7 @@
+export const ServerRouteTabIcons: Record<string, string> = {
+  headers: 'i-carbon-html-reference',
+  cookies: 'i-carbon-cookie',
+  params: 'i-carbon-text-selection',
+  query: 'i-carbon-help',
+  body: 'i-carbon-document',
+}

pages/index.vue

@@ -44,5 +44,8 @@ const methodOptions = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS
         <IconBase icon="carbon:send" />
       </ButtonBase>
     </div>
+    <div class="mt-3">
+      <Details />
+    </div>
   </div>
 </template>