feat: implementa rota de ranking de jogos

app/components/AppSelect.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="grid gap-2">
+    <label :for="id" class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
+      {{ label }}
+    </label>
+
+    <div class="relative">
+      <select :id="id" v-model="selectedValue" :disabled="disabled"
+        class="h-14 w-full appearance-none rounded-lg border border-[#d6d3d1] bg-white px-4 pr-11 text-base leading-normal tracking-[0.16px] text-[#0c0a09] outline-none transition focus:border-2 focus:border-[#0c0a09] disabled:cursor-not-allowed disabled:opacity-50">
+        <option v-for="option in options" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+
+      <Icon name="mdi:chevron-down"
+        class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-xl text-[#777169]" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  modelValue: {
+    type: String,
+    required: true
+  },
+  options: {
+    type: Array,
+    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const selectedValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+</script>